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.

Un nuovo standard per migliorare la tua deliverability: scopri il BIMI

Il mondo di magnews

Un nuovo standard per migliorare la tua deliverability: scopri il BIMI

I professionisti dell’email marketing sono costantemente alla ricerca di nuove strategie che possano garantire loro migliori risultati: in che modo dare maggiore visibilità alle comunicazioni all’interno della posta in arrivo, e come assicurarsi un buon Open Rate?

3 MIN. LETTURA

Lucia Mongardi

Deliverability Manager

Deliverability e brand protection score: ancora più semplice con magnews

Roadmap

Deliverability e brand protection score: ancora più semplice con magnews

Abbiamo implementato una procedura guidata per creare (e modificare) i domini web e i domini mittente. Questa implementazione è il seguito di quanto fatto nella scorsa release per tenere sotto controllo il brand score delle tue comunicazioni.

1 MIN. LETTURA

magnews

Digital Marketing Platform

Il cantiere dei tag avanza sui report (anche SMS)

Roadmap

Il cantiere dei tag avanza sui report (anche SMS)

I tag sono delle etichette che puoi utilizzare per contrassegnare o qualificare i contenuti delle comunicazioni o le comunicazioni stesse, sia email sia SMS: assegna i tag per identificare gli interessi dei contatti.

1 MIN. LETTURA

magnews

Digital Marketing Platform

Testo di anteprima: più in vista nella inbox dei tuoi contatti

Roadmap

Testo di anteprima: più in vista nella inbox dei tuoi contatti

Il testo di anteprima (aka pre-header, dagli addetti ai lavori) è uno strumento visibile in quasi tutti i client di posta e nelle anteprime degli smartphone, solitamente dopo il subject. Dal punto di vista del contatto, questo testo fornisce un'idea dell'argomento e, insieme a mittente e subject, fa decidere al contatto se aprire la tua email oppure no. 

2 MIN. LETTURA

magnews

Digital Marketing Platform

Proteggi il tuo brand dal Phishing: il dominio per il tracciamento link

Il mondo di magnews

Proteggi il tuo brand dal Phishing: il dominio per il tracciamento link

Sono ancora in molti a chiedersi se sia il caso o meno di implementare il DMARC, a cosa serva e quale sia la sua effettiva utilità: cos’è il DMARC? Come funziona e in che modo impedisce lo spoofing e il phishing?

6 MIN. LETTURA

Lucia Mongardi

Deliverability Manager

Un grande passo per la Brand Protection: difendi il tuo dominio col DMARC

Il mondo di magnews

Un grande passo per la Brand Protection: difendi il tuo dominio col DMARC

Sono ancora in molti a chiedersi se sia il caso o meno di implementare il DMARC, a cosa serva e quale sia la sua effettiva utilità: cos’è il DMARC? Come funziona e in che modo impedisce lo spoofing e il phishing?

3 MIN. LETTURA

Lucia Mongardi

Deliverability Manager

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