Le migliori pratiche di design delle e-mail in modalità scura
Imparerai
Scopra la modalità scura, un'impostazione del dispositivo che alcuni utenti attivano per oscurare i loro display. Questa impostazione influisce sulla modalità di visualizzazione delle e-mail. La modalità scura è un'impostazione dell'utente finale che viene selezionata a livello di dispositivo e Klaviyo non ha il controllo diretto su come la modalità scura viene implementata su ogni dispositivo.
Perché le persone usano la modalità scura?
La modalità scura è diventata popolare perché si ritiene che abbia una serie di vantaggi. Gli utenti possono scegliere la modalità scura per:
- Riduce al minimo l'affaticamento degli occhi.
- Favorisce abitudini del sonno più sane.
- Estendere la durata della batteria di un dispositivo.
- Migliorare 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.
La modalità scura e il suo branding
La modalità scura influisce sul branding delle sue e-mail modificando l'HTML utilizzato per renderle nella casella di posta. Queste regolazioni possono essere piccole come l'inversione dei colori nelle e-mail di solo testo (lasciando invariate le e-mail HTML), o sostanziali come la regolazione di ogni colore nel suo modello di e-mail completamente progettato.
Se non prende in considerazione la modalità scura durante la progettazione delle sue e-mail, il risultato può essere un testo difficile da leggere, colori non in linea con lo stile del suo marchio e altro ancora.
Consideri il logo di SWAK Cosmetics. Su uno sfondo bianco, ha un aspetto fantastico.
Ma quando viene visualizzato su un dispositivo in modalità scura, è impossibile da leggere.
Noti i cambiamenti 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à dark
Le specifiche delle modifiche alla modalità scura variano a seconda dei dispositivi e dei sistemi operativi. Litmus offre una risorsa sui dispositivi che offrono la modalità scura e come trattano le e-mail HTML.
In generale, le caselle di posta elettronica rientrano in una delle due categorie: quelle che apportano modifiche minime o nulle e quelle che invertono i colori delle e-mail.
Modifiche minime
Alcune caselle di posta, come Apple Mail per desktop, non apportano direttamente modifiche al contenuto delle sue e-mail (a meno che non includa i metatag della modalità scura). In questa casella di posta, l'unico cambiamento che noterà tra un messaggio in modalità scura o chiara è il colore dietro le informazioni sul mittente.
Inversione del colore
Altre caselle di posta, come Outlook sul desktop, invertono parzialmente i colori. Ciò significa che alcuni colori più chiari vengono sostituiti con tonalità più scure e alcuni colori più scuri vengono sostituiti con altri più chiari (ad esempio, un testo scuro che prima era su uno sfondo chiaro). Il risultato finale è un'e-mail notevolmente più scura rispetto all'originale.
Strategie di mitigazione
Esistono diverse strategie per mantenere il suo marchio ottimizzando la modalità chiara e scura. Scelga quello che meglio si allinea alle capacità del suo team e alle esigenze di branding.
Sviluppi i progetti tenendo conto della modalità chiara e scura
Se utilizza l'editor trascina-rilascia di Klaviyo per inviare le sue e-mail, questa strategia è la migliore. Sviluppi i suoi modelli di e-mail tenendo conto dei cambiamenti che subiranno sui dispositivi in modalità scura:
- Utilizzi loghi e immagini che si adattano bene a sfondi chiari e scuri, come questo per i prodotti da forno di Bola.
- Oppure aggiunga un'ombra chiara a un logo scuro con uno sfondo trasparente, in modo che risalti in modalità scura.
- In alternativa, utilizzi file di immagine che includono colori di sfondo, piuttosto che utilizzare uno sfondo trasparente. Se sceglie questa opzione, si assicuri che la sua immagine riempia completamente lo spazio che occupa (ad esempio, 600px di larghezza per le immagini a tutta larghezza).
- Utilizzi il testo quando è possibile, piuttosto che utilizzare immagini che contengono testo. Questo permette l'inversione a colori (inoltre, è meglio per l'accessibilità).
Codice personalizzato versioni dark e light
Se dispone di un team di sviluppatori in grado di codificare le sue e-mail HTML da zero, può fornire un CSS che rilevi se un visualizzatore utilizza la modalità scura o chiara e regolare il design di conseguenza. Questo può annullare alcune impostazioni predefinite della modalità scura in alcune caselle di posta, in modo da avere un maggiore controllo.
Ogni casella di posta, dispositivo e sistema operativo è diverso, quindi dovrà considerare un'ampia varietà di destinatari di e-mail quando progetterà le versioni in modalità dark e light di un'e-mail.
Può utilizzare @media (prefers-color-scheme: dark) e [data-ogsc] per indirizzare in modo specifico gli utenti della modalità scura nel codice della sua e-mail. Scopra quali client di posta elettronica supportano questi tag e quale codice utilizzare nei suoi progetti.
Utilizzi e-mail di sole immagini
Non raccomandiamo l'uso di e-mail di sole immagini per una serie di motivi:
- Senza testo alt, la sua e-mail può apparire sospetta nella casella di posta elettronica e finire nella cartella spam.
- Le e-mail con sole immagini non sono una best practice per l'accessibilità, in quanto sono difficili da leggere per molte persone e screen reader.
- L'utilizzo di e-mail di sole immagini per forzare l'aspetto in modalità luminosa significa aggirare le preferenze dei suoi abbonati.
Tuttavia, molti marchi utilizzano questa strategia, quindi vale la pena menzionarla qui. Le e-mail di sola immagine non si basano sull'HTML per i colori, i caratteri, la spaziatura e altro ancora. Ciò significa che non possono essere invertiti, quindi le caselle di posta visualizzeranno un'e-mail che generalmente si allinea al suo design originale.
Risorse aggiuntive
- Guida all'editor di modelli di e-mail
Scopri l'editor di modelli di e-mail trascina-rilascia di Klaviyo e come utilizzare gli stili di modello e configurare ogni tipo di blocco.
- Accessibilità nelle e-mail e nei moduli riferimento alle migliori pratiche
Scopri come rendere più accessibile la tua e-mail e il tuo modulo d'iscrizione. Nel progettare la tua e-mail e il tuo modulo d'iscrizione, dovrai assicurarti che i tuoi progetti siano accessibili a tutti i tuoi destinatari.
- Iniziare con il design delle e-mail