Questa guida parla della modalità scura, spiegando cos’è e come puoi assicurarti che le tue e-mail vengano visualizzate correttamente da chi la utilizza.

Cos'è la modalità scura?

La modalità scura è un'impostazione che cambia i colori dell'interfaccia per renderla più leggibile. Lo sfondo diventa scuro e il testo bianco. Il vantaggio principale è quello di ridurre l'affaticamento degli occhi di chi guarda. Si dice anche che la modalità scura riduca il consumo della batteria.

Probabilmente gli sviluppatori conoscono bene la modalità scura, dato che ormai da diversi anni è un modo molto diffuso per visualizzare il codice. La modalità scura è utile anche per chi è sensibile alla luce o lavora di notte, perché in un ambiente poco illuminato è più facile leggere il codice in questa modalità.

Alcune app molto diffuse offrono l’opzione “modalità scura” per la loro interfaccia utente, comprese le app di posta elettronica. Ma i client di posta devono gestire la modalità scura in modo diverso, ed è proprio qui che sta la sfida.

Le sfide della modalità scura per chi fa email marketing

Quando attivi la modalità scura, l'interfaccia utente dell'applicazione di posta potrebbe cambiare. Ma alcuni client di posta modificano anche l'aspetto dell'intero messaggio. Lo script di controllo dei colori esamina qualsiasi colore o colore di sfondo con una proprietà CSS come background, color, background-color o un attributo HTML come bgcolor o color.

In parole povere, la modalità scura rende più chiari i colori dello sfondo e dei caratteri delle e-mail quando le guardi su uno schermo scuro.

"Ok", starai pensando, "allora basta cambiare i caratteri per far funzionare questa transizione in modalità scura". Beh, purtroppo risolvere questo problema non è proprio così semplice.

Le email in testo semplice, con testo nero su sfondo bianco, di solito non danno problemi in modalità scura. Però, quando le email sono scritte in HTML, le cose si complicano parecchio.

Come preparare le email per la modalità scura

Anche se molte persone visualizzano le email in modalità scura, non tutti lo fanno. Quindi, la prima sfida che i professionisti del marketing devono affrontare è quella di creare email che funzionino sia in modalità scura che in modalità chiara. Ecco un paio di buone pratiche da seguire.

Sostituisci i file JPEG con quelli PNG

Se usi immagini PNG trasparenti, il cambio di colore dello sfondo in modalità scura sarà impercettibile. In questo modo, lo sfondo dell'immagine si adatterà sempre al nuovo colore di sfondo.

Ma devi comunque prepararti all'eventualità di testo e icone neri.

Linee bianche, elementi grafici neri

A volte, le email in modalità scura possono far sparire le tue campagne. Questo succede quando il testo nero, le icone, i loghi e altri elementi diventano invisibili su sfondi scuri.

Aggiungere contorni bianchi attorno al testo e alle icone è un modo efficace per rendere le tue email più leggibili. Quando le persone visualizzano la tua email in modalità chiara, i contorni bianchi non saranno visibili. Ma quando la visualizzano in modalità scura, i contorni bianchi aiuteranno a far risaltare gli elementi.

Ma che importanza ha, in fin dei conti?

Creare email che funzionino in modalità scura può sembrare un bel po’ di lavoro in più. Ma, se non lo fai, finirai per creare email illeggibili o che offrono un’esperienza negativa ai tuoi iscritti. Entrambe le cose porteranno a disiscrizioni e a una mancanza di coinvolgimento in un aspetto altrimenti fondamentale della tua strategia di marketing.

Se le persone vogliono visualizzare le email in modalità scura, è meglio soddisfare le loro esigenze e offrire loro questa esperienza.

Modalità scura e supporto per i client di posta elettronica

Forse la sfida più grande nell'usare la modalità scura per le email è che i vari client di posta, come Gmail, Apple Mail e Outlook, visualizzano le cose in modo diverso.

Alcuni client di posta elettronica invertono automaticamente i colori, mentre altri no. Alcuni client di posta elettronica supportano le media query per le combinazioni di colori scure e chiare, mentre altri no.

Ecco un'anteprima:

- Apple Mail (iPhone/iPad)

Inverte automaticamente i colori quando lo sfondo è trasparente o bianco puro (#fffff).‍

- Apple Mail (macOS)

Si inverte automaticamente quando lo sfondo è trasparente o bianco puro (#fffff).

- Outlook (iOS)

Potrebbe rendere il colore dello sfondo più scuro.

- Outlook (macOS)

Potrebbe rendere il colore dello sfondo più scuro.

- Outlook (Windows)

Questa opzione di Outlook inverte automaticamente i colori in modo coerente.

- Outlook.com (webmail)

Questa è l'unica opzione di Outlook in cui funziona la sostituzione delle immagini.

Potrebbe rendere il colore dello sfondo più scuro.

- Gmail (Android)

Inverte automaticamente i colori.

- Gmail

Non inverte automaticamente.

- AOL (webmail)

Al momento non c'è un'interfaccia utente in modalità scura.

- Yahoo! (webmail)

Al momento non c'è un'interfaccia utente in modalità scura.

‍

Se qualcuno usa un sistema operativo o un dispositivo diverso, potrebbe essere più difficile attivare la modalità scura per le email. Ecco perché è utile verificare come appariranno le tue campagne su diversi dispositivi e sistemi operativi. In questo modo, puoi capire cosa funziona e cosa no prima di inviarle.

Come verificare la leggibilità delle email in modalità scura

Testare sembra piuttosto facile, vero? Ti mandi un’e-mail, ti assicuri che tutto sia a posto e funzioni, e voilà! Il test è fatto. Ma… come per tutto ciò che riguarda la modalità scura, non è proprio così semplice. È frustrante, vero?

Vediamo se riusciamo ad alleviare un po' quella frustrazione.

‍

1. Quali client di posta usano i tuoi iscritti?

Controlla quali client di posta usano di più i tuoi iscritti. E prova prima il tuo modello di email proprio su quei client.

2. Attiva la modalità scura

Prima di inviare le email di prova, attiva la modalità scura sul tuo dispositivo.

3. Invia le e-mail a te stesso

Invia le email al tuo account (o a un account di prova). Confronta la versione originale con quella in modalità scura. Che ne pensi? Cosa andrebbe cambiato?

5. Apporta le modifiche e riprova

In un processo di test manuale, è fondamentale procedere per tentativi. Bisogna testare le email su diversi client, in diverse modalità e su diversi dispositivi. Questo può richiedere parecchio tempo. Se tutto va bene, dopo qualche mese di test, riuscirai a capire meglio cosa funziona e cosa no.

6. Prova invece uno strumento per la modalità scura

Il modo più efficiente per testare la tua email è inserirla in uno strumento di test per la modalità scura. Alcuni programmi e app di email marketing offrono questo servizio. In questi casi, puoi inserire la tua email nello strumento, che ti mostrerà le diverse modalità di anteprima e dove potrebbero esserci eventuali problemi. Invece di inviarti (e reinviarti) email e controllare diversi dispositivi, hai tutto in un unico posto.

Hai qualche consiglio su come progettare per la modalità scura?

Certo che sì, e siamo felici di condividerle! Innanzitutto, ecco alcune risorse utili sul rapporto tra lo sviluppo delle email e la modalità scura:

• Migliori pratiche per il design della modalità scura dal blog BEE Design (2022)
• 5 consigli per la progettazione di email in modalità scura dal blog di BEE Design (2020)
• La guida definitiva alla modalità scura per chi fa email marketing, a cura di Litmus
• Modalità scura per le email: cos’è e come gestirla da Email on Acid
• Modalità scura nelle email HTML di Sidemail
  
  Litmus ha appena pubblicato una guida per i programmatori:Come affrontare la programmazione delle email in modalità scura: una guida per gli sviluppatori di email
  
  Ecco due immagini che parlano da sole:

Come si dice in gergo da sviluppatori per indicare il supporto alla modalità scura

Se tu o qualcuno del tuo team è uno sviluppatore, ci sono due modi per rendere i colori delle tue email più scuri. La modalità scura funziona in modo diverso a seconda del client di posta che usi. Ma se vuoi usare i tuoi colori personalizzati per la modalità scura, puoi farlo.

@media (prefers-color-scheme: dark)

Puoi usare questo metodo per creare un tema personalizzato in modalità scura per il tuo sito web. È simile all'uso di un blocco di stili all'interno di una query @media per la visualizzazione mobile responsive, solo che questo blocco CSS funzionerà per qualsiasi interfaccia utente impostata in modalità scura.

@media (prefers-color-scheme: dark) ti permette di modificare diversi aspetti del tuo sito web, come le immagini e lo sfondo, quando qualcuno usa la modalità scura.

[data-ogsc]

Questo metodo serve per indirizzare l'app di Outlook. Con gli stili @media (prefers-color-scheme: dark), ora puoi aggiungere i prefissi [data-ogsc] appropriati a ogni regola CSS.

‍

Testare le tue email in modalità scura può essere un po’ complicato, ma con i consigli giusti è fattibile. Speriamo che i nostri suggerimenti ti abbiano aiutato a capire cosa fare quando testi le tue email in modalità scura. Se hai bisogno di ulteriore aiuto o vuoi provare uno strumento per la modalità scura, ti consigliamo di dare un’occhiata alle funzionalità di Cakemail.

‍