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

Cosa imparerai

Scopri di più sulla modalità scura, un'impostazione del dispositivo che alcuni utenti attivano per scurire i display. Questa impostazione influisce sul modo in cui le e-mail vengono visualizzate. La modalità scura è un'impostazione utente finale selezionata a livello di dispositivo e Klaviyo non ha un controllo diretto su come la modalità scura viene implementata su ciascun dispositivo.

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.

Dispositivi e sistemi operativi che offrono la modalità scura

Le specifiche delle modifiche alla modalità scura variano tra dispositivi e sistemi operativi. Litmus offre una risorsa sui dispositivi che offrono la modalità scura e su come trattano 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, come Apple Mail per desktop, non apportano modifiche direttamente ai contenuti della tua e-mail (a meno che tu non includa metatag per la modalità scura). In questa casella di posta, l'unica modifica che vedrai tra un messaggio in modalità scura o chiara è il colore dietro le informazioni sul mittente.

Inversione dei colori

Altre caselle di posta, come Outlook su desktop, invertono parzialmente i tuoi colori. Ciò significa che alcuni colori più chiari vengono sostituiti con tonalità più scure e alcuni colori più scuri vengono sostituiti con tonalità più chiare (ad esempio, testo scuro che prima era su uno sfondo chiaro). Il risultato finale è un'e-mail sensibilmente più scura dell'originale.

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.

Usa e-mail con 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.

Tuttavia, molti brand usano questa strategia, quindi vale la pena menzionarlo qui. Le e-mail con sole immagini non si basano su HTML per colori, font, spaziatura e altro ancora. Ciò significa che non possono essere invertite, quindi le caselle di posta mostreranno un’e-mail che in genere è allineata al design originale.

Risorse aggiuntive