Procedure consigliate per la progettazione di e-mail in modalità scura

Cosa imparerai

Scopri la modalità scura, un'impostazione che gli utenti possono attivare sul proprio dispositivo o nell'app e-mail per scurire gli schermi. Questa impostazione influisce su come vengono visualizzate le e-mail. Klaviyo non ha un controllo diretto su come ogni casella di posta applica la modalità scura.

Perché le persone usano la modalità scura?

La modalità scura è diventata popolare perché si ritiene che offra una serie di vantaggi. Le persone potrebbero scegliere la modalità scura per:

• Riduci l'affaticamento degli occhi.
• Favorisci abitudini di sonno più sane.
• Prolunga la durata della batteria di un dispositivo.
• Migliora l'accessibilità.

Secondo Litmus, il numero di persone che visualizzano le e-mail in modalità scura è aumentato dal 28% nel 2021 al 34% nel 2022.

Modalità scura e il tuo brand

La modalità scura influisce sul branding della tua e-mail regolando l'HTML utilizzato per visualizzarla nella casella di posta. Queste modifiche possono essere minime, come l'inversione dei colori nelle e-mail solo testo (lasciando invariate le e-mail HTML), oppure sostanziali, come la regolazione di ogni colore nel tuo modello di e-mail completamente progettato.

Se non consideri la modalità scura quando progetti le tue e-mail, potresti ottenere testo difficile da leggere, colori non allineati agli stili del tuo brand e altro ancora.

Considera il logo di SWAK Cosmetics. Su uno sfondo bianco ha un aspetto fantastico.

Ma se visualizzato su un dispositivo in modalità scura, è impossibile da leggere.

Nota le modifiche nell'intestazione di questa e-mail tra la modalità chiara e quella scura. Il colore di sfondo dell'e-mail, il colore del testo e il colore della barra dei link sono stati tutti invertiti.

App e dispositivi e-mail che offrono la modalità scura

I dettagli delle modifiche della modalità scura variano tra app di posta, dispositivi e sistemi operativi. Litmus offre una risorsa sui client di e-mail che offrono la modalità scura e su come gestiscono le e-mail HTML.

In generale, le caselle di posta rientrano in 1 di 2 categorie: quelle che apportano modifiche minime o non ne apportano, e quelle che invertono i colori delle e-mail.

Modifiche minime

Alcune caselle di posta in arrivo, come Apple Mail per desktop, lasciano invariati i colori nelle e-mail HTML completamente progettate, a meno che tu non includa i metatag per la modalità scura. Le e-mail solo testo possono comunque cambiare in modalità scura. Quando il contenuto dell’e-mail rimane lo stesso, cambia colore solo la casella di posta in arrivo circostante.

Inversione dei colori

Altre caselle di posta in arrivo, come Outlook.com, invertono parzialmente i colori. Questo significa che alcuni colori più chiari vengono sostituiti con tonalità più scure e alcuni colori più scuri vengono sostituiti con tonalità più chiare (ad es. testo scuro che in precedenza era su uno sfondo chiaro). Il risultato finale è un’e-mail notevolmente più scura rispetto all’originale.

Alcune caselle di posta applicano un'inversione completa dei colori, modificando sia gli sfondi chiari che quelli scuri. Ad esempio, Outlook 2021 per Windows può rendere chiaro uno sfondo scuro.

Strategie di mitigazione

Esistono diverse strategie per mantenere il tuo branding ottimizzando al contempo per la modalità chiara e scura. Scegli quello che si allinea meglio alla capacità del tuo team e alle esigenze di branding.

Sviluppa design tenendo conto della modalità chiara e della modalità scura

Se utilizza l'editor trascina-rilascia di Klaviyo per inviare le sue e-mail, questa strategia è la migliore. Sviluppa i modelli di e-mail tenendo conto dei cambiamenti che subiranno sui dispositivi in modalità scura:

• Usa loghi e immagini che abbiano un bell’aspetto su sfondi chiari e scuri, come questo per i prodotti da forno di Bola.
  

• In alternativa, aggiungi un’ombra chiara a un logo scuro con sfondo trasparente, in modo che risalti in modalità scura.
  

• In alternativa, usa file immagine che includono colori di sfondo, anziché usare uno sfondo trasparente. Se scegli questa opzione, assicurati che l'immagine riempia completamente lo spazio che occupa (ad es., 600 px di larghezza per le immagini a larghezza intera).
  

• Usa il testo, ove possibile, invece di usare immagini che contengono testo. Questo consente l’inversione completa dei colori (inoltre, è meglio per l’accessibilità).

Versioni scure e chiare del codice personalizzato

Se hai un team di sviluppo che può programmare da zero le tue e-mail HTML personalizzate, puoi fornire CSS che rileva se chi visualizza sta usando la modalità scura o chiara e regolare di conseguenza il design. Questo può sovrascrivere alcune impostazioni predefinite della modalità scura in alcune caselle di posta, così hai più controllo.

Puoi usare @media (prefers-color-scheme: dark) e [data-ogsc] per rivolgerti in modo specifico agli utenti in modalità scura nel codice della tua e-mail. Scopri di più su quali client e-mail supportano questi tag e quale codice usare nei tuoi design.

Evita le e-mail di sole immagini

Non consigliamo di usare e-mail solo con immagini per diversi motivi:

• Senza testo alternativo, la tua e-mail può sembrare sospetta ai provider di posta in arrivo e finire nella cartella spam.
• Le e-mail solo con immagini non sono una best practice in termini di accessibilità, perché sono difficili da leggere per molte persone e per gli screen reader.
• Usare e-mail solo con immagini per forzare un aspetto in modalità chiara significa aggirare le preferenze dei tuoi iscritti.

Molti brand usano e-mail composte solo da immagini perché i file immagine preservano i colori e i caratteri integrati nell’immagine. Tuttavia, le e-mail composte solo da immagini si basano comunque sull’HTML per layout, spaziatura e sfondi circostanti. Una casella di posta può cambiare quei colori circostanti in modalità scura, quindi questo approccio non garantisce che l’intera e-mail corrisponda al tuo design originale.

Testa la tua e-mail in modalità chiara e scura

Prima di inviare, verifica che loghi, testo e link siano leggibili in entrambe le modalità. I test della casella di posta sono disponibili per gli account Klaviyo a pagamento e includono 100 test per utente al mese. Ogni anteprima della casella di posta che generi conta come 1 test.

1. Nell’editor e-mail drag-and-drop, fai clic su Anteprima, poi seleziona Test della casella di posta.
2. Seleziona un profilo per visualizzare l'anteprima. Per un'e-mail che utilizza i dati degli eventi, seleziona l'evento pertinente così puoi verificare il contenuto personalizzato.
3. In Seleziona test della posta in arrivo, espandi Modalità scura e scegli le caselle di posta in arrivo utilizzate dai tuoi iscritti. Seleziona le versioni in modalità chiara per il confronto e rimuovi tutte le caselle di posta in arrivo preselezionate che non ti servono.
4. Fai clic su Esegui il test. Quando le anteprime sono pronte, fai clic su ogni riquadro per esaminarla.
5. Clicca su Fine per tornare all'editor. Apporta eventuali modifiche di design, poi esegui nuovi test per controllare l'e-mail aggiornata.

Scopri di più su come usare il test della casella di posta. Puoi anche inviare un’e-mail di prova alle caselle di posta a cui hai accesso e confrontarla in modalità chiara e scura.

Risorse aggiuntive