Quanto conosci il Dark Mode?

Cos’è la modalità scura?

La modalità scura, nota anche come dark mode, è un’impostazione che varia la palette dei colori di un’interfaccia per visualizzare il contenuto in alto contrasto usando colori di sfondo scuri e primo piano chiaro. Di fatto, rispetto alla modalità con cui siamo abituati ad utilizzare app desktop o mobile, gli sfondi chiari diventano scuri, e il testo nero per contrasto diventa bianco.

A cosa serve? / Perché si applica?

• minimizzare la luce blu
• migliorare la leggibilità per ridurre l’affaticamento degli occhi supportando gli utenti che sono più sensibili in temi fortemente luminosi.
• Risparmio di batteria: La modalità scura nel web e nelle app mobili può prolungare la durata della batteria di un dispositivo. Google ha confermato che la modalità scura sugli schermi OLED è stata di grande aiuto per la durata della batteria.
• E’ di moda: giusto o sbagliato che sia avere lo schermo nero con scritte colorare è cool, per noi programmatori ormai è un abitudine e se un software non offre la versione dark rimaniamo quasi delusi.

A cosa si applica?

Il dark mode, nato inizialmente per i siti web e le app mobile, si è poi diffuso anche nel contesto delle email. E proprio questo è il nostro punto di osservazione:

• App di posta Elettronica (Outlook App, Gmail app, Apple mail)
• Client di posta (es. Outlook macOs, Outlook Windows 10)
• Impostazione del webmail (gmail, outlook.com)

Cosa fa?

• Cambia il colore del testo e il background-color invertendo la tonalità dei colori (da chiari a scuri e viceversa)
• Alcune app usano logiche del tutto proprietarie, e quindi purtroppo diverse una dalle altre, per individuare il nuovo colore da applicare
• Altre supportano anche i CSS e mediaquery per cambiare i colori in base a ciò che desideriamo

Come ottimizzare le proprie email per il Dark Mode

Possiamo ottimizzare le nostre newsletter sia dalla costruzione grafica che dal punto di vista del codice.

Progettazione

1. Immagini: Utilizzare PNG con sfondo trasparente, evitare di usare immagini che corrispondono al colore dello sfondo nell’html.
2. Logo: Se il logo è scuro applicare un bordo chiaro che lo farà risaltare nella modalità scura
   Come creare il logo
   
   

Esempio errato

Esempio Corretto

3. Divider grafici: Attenzione ai divisori con sfondi incorporati o colori fissi; è preferibile usare HTML e CSS il più possibile per codificare i divisori e i separatori, permetterà loro di cambiare anche i colori per rimanere coerenti con il design.

Dark Mode
Visualizzazione Normale

4. Icone social: solitamente sono di colore scuro a piede della comunicazione; corrono il rischio di perdersi. Si consiglia di utilizzare tratti bianchi intorno a elementi di design neri in quanto il tratto bianco non sarà visibile in modalità chiara ma solo in modalità scura e permetterà di rendere distinguibili gli elementi

La prima icona di twitter non è ottimizzata per il dark mode

In questo caso l’immagine ha il riquadro bianco che evidenzia le icone anche nel dark mode, ma non si vede nella modalità light

Implementazione

Dal punto di vista del codice vi consiglio di seguire i seguenti step inserendo degli snippets di codice per ottimizzare la visualizzazione.

1. Inserire meta per abilitare la gestione tramite css della dark mode

2. Inserire le CSS mediaqueries per gestire le classi/attributi
   Nell’esempio indichiamo che per coloro che visualizzano la newsletter in modalità dark il colore di sfondo dovrà essere grigio chiaro e tutti i titoli (h1, h2 h3 ) e i link della classe articleTitle li forziamo a verde.

3. Inserire CSS con [data-ogsc] per aumentare la compatibilità con Outlook app e per Android

[data-ogsc] serve per Outlook

4. Usare un filtro nei CSS per le immagini

img { filter: brightness(.8) contrast(1.2); }

5. Durante il debug cambiare il colore di sfondo della tabella principale con un bgcolor=”#000000”

Quanto è compatibile?

E’ importante ricordare che non tutti i dispositivi/software supportano il dark mode:

• Totalmente compatibile → Inverte completamente i colori di sfondo e colere del testo
  
• Parzialmente compatibile → Cambia il colore di sfondo in nero, ma non interpreta le @ media queries
  
• Non Compatibile → Non interpreta @media queries e non cambia il colore
  

Tabella di compatibilità Dark Mode

Email Client	Inverte i colori?	Common Dark Mode Challenge
Apple Mail (iPhone/iPad)	Sì	Inverte i background trasparenti o bianco puro (#fffff).
Apple Mail (macOS)	Sì	Inverte i background trasparenti o bianco puro (#fffff).
Outlook (iOS)	Parzialmente	Può rendere il colore dello sfondo più scuro
Outlook (macOS)	Parzialmente	Supporta solamente @media (prefers-color-scheme). Può rendere il colore dello sfondo più scuro
Outlook (Windows)	Sì	Inverte automaticamente i colori in modo coerente.
Outlook.com (webmail)	Parzialmente	Lo scambio di immagini funziona. Può rendere il colore di sfondo più scuro.
Gmail (Android)	Sì	Non supporta le query @media (prefers-color-scheme).
Gmail (webmail)	No	Non supporta le query @media (prefers-color-scheme).
AOL (webmail)	No	Attualmente non c’è alcuna interfaccia  utente attuale in modalità scura
Yahoo! (webmail)	No	No current dark mode user interface.

Come si configura il dark mode?

GMAIL APP
Puoi attivarlo manualmente toccando l’icona del menu in alto a sinistra >> Impostazioni >> Impostazioni generali >> Tema

Configurazione Dark Mode su App gmail

GMAIL Webmail
Impostazioni >> Tema >> Scuro

Gmail web mail

OUTLOOK
File >> Opzioni >> Tema di Office

Configurazione dark mode Outlook

*Visualizzazione Dark Mode Outlook

Con alcune piccole modifiche, il design di una email può essere compatibile con i client email in dark mode, senza dover intervenire su HTML e CSS.
Considera come le tue immagini verranno visualizzate e se ci sono o meno testi sopra immagini di background per sapere se il tuo design email si vedrà perfettamente.
E volendo, con una piccola aggiunta di CSS e HTML, potrai assicurarti che con testi, immagini e loghi vada tutto per il meglio.