Quanto conosci il Dark Mode?

CONDIVIDI L’ARTICOLO

Condividi su facebook
Condividi su twitter
Condividi su linkedin
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

Condividi su facebook
Condividi su twitter
Condividi su linkedin

SCOPRI

Altri articoli
popolari.

Quanto conosci il Dark Mode?

Il mondo di magnews

Quanto conosci il Dark Mode?

Cos'è il dark Mode, come si applica e tutti i trucchi per rendere la tua newsletter leggibile anche nell'oscurità

8 MIN. LETTURA

Jenny Bertelli

Customer Success Manager & Training Manager

Quanto convertono i tuoi workflow?

Roadmap

Quanto convertono i tuoi workflow?

Abbiamo iniziato l'implementazione su Matilda del report dei workflow. Il report contiene rivisitazioni di dati già visibili sulla versione classica e nuovi insight, in particolare puoi scoprire quanto converte il tuo workflow.

1 MIN. LETTURA

magnews

Digital Marketing Platform

Monitora le conversioni anche dal web

Roadmap

Monitora le conversioni anche dal web

Per non perdere informazioni preziose, registriamo anche le conversioni che provengono dai click sui messaggi on site e sulle landing page. Conversioni che probabilmente tu già realizzi, ma di cui non conosci il valore. Da oggi puoi monitorare quindi le conversioni dei tuoi contatti con più precisione e con la provenienza più corretta.

1 MIN. LETTURA

magnews

Digital Marketing Platform

Apple Mail Privacy Protection: la vendetta dei Proxy

Il mondo di magnews

Apple Mail Privacy Protection: la vendetta dei Proxy

In questo articolo, ripercorriamo un po la teoria del tracciamento aperture email, vi raccontiamo cosa sono i PROXY, elemento tecnico fondamentale in queste dinamiche, e vediamo assieme quali sono i principali impatti pratici da tenere in considerazione.

7 MIN. LETTURA

magnews

Digital Marketing Platform

Filtri sui contatti più friendly

Roadmap

Filtri sui contatti più friendly

Abbiamo cambiato l'aspetto dei filtri, in particolare i filtri sulle liste di contatti. I filtri sono strutturati secondo "livelli discendenti", ad albero. Quando si fa un filtro su un campo o un'informazione statistica con molti livelli, è indispensabile ricordare il percorso fatto per raggiungere il filtro. Ora questi li vedi visualizzati subito sopra al filtro finale scelto. 

2 MIN. LETTURA

magnews

Digital Marketing Platform

Una sola app per 2 nuovi canali: WhatsApp e Telegram

Roadmap

Una sola app per 2 nuovi canali: WhatsApp e Telegram

Con il connettore MessengerPeople puoi gestire i canali WhatsApp for business e Telegram. Con la nuova versione dell'app MessengerPeople puoi inviare notifiche e reminder ai tuoi contatti, direttamente dalla piattaforma. Leggi l'articolo completo!

3 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