Anteprima e ottimizzazione di come apparirà il design delle tue email in modalità scura

Molti client di posta elettronica hanno un'impostazione di modalità scura, che può portare a incongruenze con il modo in cui le tue email di marketing appaiono nei client con un aspetto più luminoso abilitato.

Anteprima dell'aspetto della tua email in specifiche modalità scure del client

Per vedere come apparirà la tua email quando un contatto la aprirà in un browser o client con la modalità scura abilitata:

• Nel tuo account HubSpot, vai a Marketing > E-mail.
• Clicca sul nomedi un'email esistente in bozza.
• In alto a destra dell'editor di e-mail, clicca sul menua discesa Azioni, poi clicca su Anteprima.
• Nella parte superiore della schermata di anteprima, clicca su Clienti.
• In Modalità oscura,seleziona la casella di controlloaccanto a qualsiasi cliente che vuoi vedere in anteprima.

• In alto a destra, clicca su Testmy email now.

Le migliori pratiche quando si progettano le email per la modalità scura

Quando visualizzi l'anteprima della tua email con diversi client in modalità scura, tieni presente che ogni client potrebbe rendere la tua email in modo diverso. Per esempio, se i tuoi contatti aprono la tua email usando Apple Mail, essa apparirà esattamente la stessa, sia che abbiano attivato o meno la modalità scura. Mentre se un contatto attiva la modalità scura in applicazioni come Gmail o Outlook su Windows, si possono notare differenze più drastiche nello stile della tua email, come ad esempio colori di sfondo invertiti.

Per verificare che lo stile delle tue email sia coerente tra i vari client, rivedi i suggerimenti qui sotto.

Usa immagini che appariranno chiaramente sia su sfondi chiari che scuri

Converti le tue immagini in file PNG prima di caricarle e aggiungerle alle tue email, questo aiuta a garantire il loro rendering nei client email che invertono automaticamente il colore di sfondo delle email in modalità scura. Se la tua immagine ha del testo, come un logo, puoi anche aggiungere un contorno traslucido intorno al testo per farlo risaltare.

Optate per colori accessibili al web

Progettare il contenuto della tua email per essere accessibile è importante indipendentemente dal client di posta elettronica che il tuo destinatario sta utilizzando. Aderendo agli standard di accessibilità, come il controllo del contrasto di colore del testo, aiuterà anche le tue email ad apparire correttamente in modalità scura. Scopri di più sui colori accessibili al web sul blog HubSpot.

Specificare una media query per lo stile in modalità scura in iOS

Diversi client di posta elettronica, tra cui Apple Mail e Outlook.com, offrono un supporto limitato per rilevare e aggiungere uno stile personalizzato tramite una media query. Se si utilizza l'editor di posta elettronica classico aggiornato e si dispone di risorse di sviluppo per apportare modifiche CSS alle vostre e-mail, è possibile aggiungere una media query con la funzione prefers-color-scheme media per configurare l'aspetto di immagini e testo in modalità scura e chiara