Quanto conosci il Dark Mode?

CONDIVIDI L’ARTICOLO

Preview_blog_Dark mode

Il mondo di magnews - 8 MIN. DI LETTURA

Aggiornato: Giugno 2022
Jenny Bertelli

Customer Success Manager & Training Manager

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.

Attiviamo il Dark Mode

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
Cosa fai il dark-mode

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

Esempio icone
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
    Parzialmente compatibile
  • Non Compatibile → Non interpreta @media queries e non cambia il colore
    Non compatibile


Tabella di compatibilità Dark Mode

Email ClientInverte i colori?Common Dark Mode Challenge
Apple Mail
(iPhone/iPad)
Inverte i background trasparenti o bianco puro (#fffff).
Apple Mail
(macOS)
Sì  Inverte i background trasparenti o bianco puro (#fffff).
Outlook
(iOS)
ParzialmentePuò 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)
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)
Non supporta le query @media (prefers-color-scheme).
Gmail
(webmail)
NoNon supporta le query @media (prefers-color-scheme).
AOL
(webmail)
NoAttualmente non c’è alcuna interfaccia  utente attuale in modalità scura
Yahoo!
(webmail)
NoNo 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

Dark Mode Outlook
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.

…If you try black never come back…

CONDIVIDI L’ARTICOLO

SCOPRI

Altri articoli
popolari.

Monitora e ottimizza i workflow grazie all’AI

Il mondo di magnews

Monitora e ottimizza i workflow grazie all’AI

Nelle scorse release di magnews abbiamo sviluppato due nuovi nodi per i workflow, i nodi AI-driven, per trasformare i tuoi flussi di automation, rendendoli più intelligenti ed efficaci...

4 MIN. LETTURA

magnews

Digital Marketing Platform

Workflow con tempi attesa (intelligentemente) ottimizzati con AI Wait

Il mondo di magnews

Workflow con tempi attesa (intelligentemente) ottimizzati con AI Wait

AI Wait: dopo il nodo AI Split, un altro nodo “AI” a tua disposizione per workflow sempre più efficaci. Anche il nodo AI Wait rivoluziona i tuoi workflow, decidendo per te quali sono i tempi di attesa più efficaci e produttivi.

4 MIN. LETTURA

magnews

Digital Marketing Platform

Massimizza il Customer Lifetime Value con la Marketing Automation

Il mondo di magnews

Massimizza il Customer Lifetime Value con la Marketing Automation

La nostra funzionalità di traduzione AI-driven aiuta a garantire che i tuoi sforzi di email marketing siano veramente globali. Ti consente di raggiungere potenziali clienti nelle lingue che conoscono e comprendono meglio, risparmiando il tempo che avresti speso per le traduzioni e riducendo in maniera importante i costi di traduzione.

2 MIN. LETTURA

magnews

Digital Marketing Platform

Traduzione AI-driven per una comunicazione senza barriere linguistiche

Il mondo di magnews

Traduzione AI-driven per una comunicazione senza barriere linguistiche

La nostra funzionalità di traduzione AI-driven aiuta a garantire che i tuoi sforzi di email marketing siano veramente globali. Ti consente di raggiungere potenziali clienti nelle lingue che conoscono e comprendono meglio, risparmiando il tempo che avresti speso per le traduzioni e riducendo in maniera importante i costi di traduzione.

3 MIN. LETTURA

magnews

Digital Marketing Platform

Con AI Split il workflow si auto-ottimizza in modo intelligente verso il percorso più performante

Il mondo di magnews

Con AI Split il workflow si auto-ottimizza in modo intelligente verso il percorso più performante

Scopri come il rivoluzionario Nodo AI Split può trasformare i tuoi flussi di automation, rendendoli più intelligenti e produttivi, indirizzandoli gradualmente verso i percorsi più performanti. Un’AI a tua disposizione per workflow sempre più efficaci.

3 MIN. LETTURA

magnews

Digital Marketing Platform

Email Marketing: strategie per il Back to School

Calendario Marketing

Email Marketing: strategie per il Back to School

Con gli ultimi mesi dell’anno, sono molti i momenti e gli eventi che richiamano l’attenzione: il Back to School è il primo capitolo di questo periodo dinamico. È questa una fase cruciale per la pianificazione, così da raggiungere gli obiettivi di business desiderati nei mesi successivi.

4 MIN. LETTURA

magnews

Digital Marketing Platform

Diventa Partner!

Creare una relazione tra le aziende e i consumatori che possa generare valore di business per entrambi in una esperienza di successo.

Stiamo creando una community che vogliamo far crescere assieme per costruire una collaborazione sempre più di valore.

Partner Program, la soluzione di magnews che consente di diventare parte di un vero knowledge hub, progettato per favorire la crescita di competenze e business.

  • Ho letto e compreso la Privacy Policy e accetto integralmente i Termini d'Uso.

Raggiungi i tuoi obiettivi di business

Scrivi ad un nostro consulente oppure richiedi una demo gratuitamente!

Richiedi una demo Scrivi ad un consulente

No grazie