Modalità scura per il contenuto delle e-mail dark-mode
Modalità scura consente a un client e-mail o a un'app di supporto di visualizzare e-mail con sfondi più scuri e colori più chiari per testo, pulsanti e altri elementi visivi. Questo tipo di display può ridurre l'affaticamento degli occhi, ridurre la durata della batteria e migliorare la leggibilità in ambienti scarsamente illuminati, per un'esperienza di visualizzazione più confortevole. In quanto tendenza in crescita tra i principali sistemi operativi e app, ora è un elemento importante nella progettazione di e-mail moderne per garantire che il contenuto rimanga leggibile e visivamente attraente per tutti gli utenti.
Quando crei il contenuto delle e-mail nello spazio di progettazione visiva Journey Optimizer B2B Edition, puoi passare alla visualizzazione modalità scura . In questa visualizzazione, puoi anche definire impostazioni personalizzate specifiche per il supporto dei client e-mail quando è abilitata la modalità scura.
Considerazioni sul client e-mail
Esiste una varianza significativa nel modo in cui i diversi client e-mail e le diverse app applicano la modalità scura. Per questo motivo, è necessario considerare con cautela le aspettative relative al rendering in modalità scura. Prima di utilizzare la modalità scura nell’area di progettazione delle e-mail, considera i seguenti casi di utilizzo del client e-mail:
Alcuni client di posta elettronica non supportano affatto questa funzione, ad esempio:
- Yahoo! Mail
- AOL
Se definisci le impostazioni personalizzate della modalità scura nella progettazione delle e-mail, questi client e-mail non possono visualizzare alcun rendering in modalità scura.
Alcuni client di posta elettronica applicano sistematicamente la propria modalità scura predefinita a tutte le e-mail ricevute. Regolano automaticamente colori, sfondi, immagini e altri elementi in base alle impostazioni della modalità scura e alle impostazioni esterne. Questi clienti includono:
- Gmail (Posta sul desktop, iOS, Android™, Posta sul Web mobile)
- Windows di Outlook
- Outlook Windows Mail
In questo caso, le impostazioni della modalità scura client sovrascriveranno le impostazioni della modalità scura personalizzata definite in Journey Optimizer B2B Edition
Molti dei client di posta elettronica più popolari offrono l'opzione di eseguire il rendering della modalità scura personalizzata con la query @media (prefers-color-scheme: dark), che è il metodo utilizzato dagli stili di posta elettronica Journey Optimizer B2B Edition. Questo elenco di client include:
- Apple Mail macOS
- Apple Mail iOS
- Outlook macOS
- Outlook.com
- IOS di Outlook
- Android di Outlook™
In questo caso, viene eseguito il rendering delle impostazioni specifiche definite in Journey Optimizer B2B Edition. Tuttavia, potrebbero essere applicate alcune restrizioni in base a ciascun client e-mail. Ad esempio, alcuni client (come Apple Mail 16 (macOS 13)) non generano la modalità scura se le immagini sono presenti nel contenuto dell’e-mail.
Per risultati ottimali, verifica il contenuto con i client e-mail di destinazione. Per visualizzare una simulazione che si avvicina il più possibile al risultato finale per ogni client, utilizzare l'integrazione del rendering del test e-mail Litmus nello spazio di progettazione e-mail.
Design per modalità scura
Quando si applica uno stile al contenuto delle e-mail per la modalità scura in Journey Optimizer B2B Edition, lo spazio di progettazione visiva offre due tipi di strumenti:
-
Utilizza la funzione anteprima per rivedere il rendering predefinito in modalità scura per la maggior parte dei client e-mail che supportano.
-
Se desideri ignorare le impostazioni predefinite di supporto dei client e-mail, definisci e applica impostazioni personalizzate della modalità scura al contenuto delle e-mail. Ulteriori informazioni
Anteprima modalità scura predefinita preview-dark-mode
-
Apri il contenuto dell’e-mail nello spazio di progettazione e-mail.
In alto a destra nell’area di lavoro, è presente un selettore luce-buio che attiva la visualizzazione del contenuto tra la modalità chiara (predefinita) e scura.
-
Cambia il selettore in modalità scura (
L’area di lavoro visualizza il contenuto utilizzando l’anteprima in modalità scura predefinita.x
Per impostazione predefinita, l'anteprima in modalità scura applica la combinazione di colori
full color inverta tutti gli elementi ad eccezione di immagini e icone. Questa combinazione di colori rileva le aree con elementi chiari e scuri e le inverte. Gli sfondi chiari diventano scuri e il testo scuro diventa chiaro, gli sfondi scuri diventano chiari e il testo chiaro diventa scuro.
Definire le impostazioni personalizzate della modalità scura custom-dark-mode
Dopo il passaggio alla modalità scura, puoi scegliere di modificare elementi di stile specifici del contenuto che vengono visualizzati solo quando la modalità scura è abilitata nel client e-mail del destinatario (purché supporti tale funzione).
Lo stile modalità scura personalizzato nello spazio di progettazione e-mail utilizza Query CSS @media (prefers-color-scheme: dark) che rileva se il client di posta elettronica è impostato sulla modalità scura e applica la struttura a tema scuro definita nell'e-mail.
Per definire le impostazioni personalizzate della modalità scura :
-
Se necessario, sposta il selettore in modalità scura (
-
Modificare gli attributi dei colori di stile, ad esempio testo, sfondi o pulsanti.
-
Per le immagini e le icone, definisci risorse specifiche solo per la modalità scura.
Non è possibile modificare i colori delle immagini e delle icone, ma è possibile definire risorse alternative da utilizzare per la modalità scura. È possibile sperimentare diverse combinazioni di colori per le icone o apportare regolazioni per il colore e la saturazione delle immagini fotografiche.
Seleziona un'immagine e passa alla modalità scura utilizzando l'interruttore dedicato nel riquadro Impostazioni. Quindi, seleziona un’altra risorsa immagine.
Per ulteriori informazioni sulla selezione di una risorsa immagine, consulta Aggiungi risorse immagine.
-
In qualsiasi momento durante le modifiche alla progettazione, seleziona Passa alla visualizzazione attiva per verificare come il contenuto potrebbe essere riprodotto su dispositivi di varie dimensioni.
Da questa visualizzazione, modifica il selettore in modalità scura (
note caution CAUTION La visualizzazione live è un’anteprima generica progettata per confrontare l’aspetto del rendering tra le varie dimensioni dei dispositivi. Il rendering finale può variare a seconda del client e-mail del destinatario. -
Al termine della modifica della modalità scura, fare clic su Simula contenuto.
Utilizza gli strumenti di anteprima e verifica per testare la progettazione delle e-mail. Per ulteriori informazioni, consulta Anteprima e verifica del contenuto delle e-mail.
-
Se disponi di un account Litmus Enterprise, seleziona Rendering e-mail per visualizzare il rendering finale in modalità scura per vari client e-mail in Litmus.
Per ulteriori informazioni, vedi Test del rendering di e-mail con Litmus.
note caution CAUTION Anche se la simulazione si avvicina molto al modo in cui le e-mail vengono visualizzate in modalità scura, il rendering effettivo potrebbe variare a causa delle variazioni nei provider di servizi e-mail o nelle impostazioni a livello di dispositivo.
Best practice best-practices
Poiché l'adozione della modalità scura aumenta tra i principali client e-mail, è essenziale considerare il rendering delle e-mail in ambienti chiari e scuri, indipendentemente dal fatto che si utilizzi la modalità scura personalizzata o meno.
La modalità scura può alterare i colori, gli sfondi e le immagini, a volte ignorando le scelte di progettazione. Per garantire coerenza visiva, accessibilità e integrità del brand, segui queste best practice:
Elenco di controllo:
- Salvare logo e icone come file PNG con sfondi trasparenti per evitare la presenza di caselle bianche visibili in modalità scura.
- Evitare le immagini con sfondi bianchi o chiari codificati.
- Se la trasparenza non è un'opzione, posizionate le immagini su uno sfondo a tinta unita nel progetto per evitare scomode inversioni di colore.
Elenco di controllo:
- Assicurati un contrasto sufficiente tra il testo e i colori di sfondo per garantire leggibilità sia nelle modalità chiara che in quelle scure.
- Evita di utilizzare solo i colori di sfondo per i contenuti critici. Alcuni client ignorano i colori di sfondo in modalità scura, quindi assicurati che le informazioni chiave siano ancora visibili.
Elenco di controllo:
- Utilizza combinazioni di colori facili da distinguere per le persone con daltonismo.
- Utilizza una palette di mezzitoni per garantire il contrasto sia contro gli sfondi chiari che scuri.
- Utilizza combinazioni di colori accessibili con contrasto elevato per migliorare la leggibilità e soddisfare gli standard Web Content Accessibility Guidelines (WCAG). Utilizza strumenti come WebAIM Contrast Checker per verificare il contrasto dei colori.
- Evita i font sottili in quanto possono influire sulla leggibilità. Se il tuo marchio richiede un font sottile, grassetto in modalità scura.
- Salta il bianco puro sul nero puro, che può causare affaticamento degli occhi e potrebbe essere invertito automaticamente in alcuni client e-mail.
- Se la modalità scura non è supportata, fornisci uno stile di fallback accessibile.
Elenco di controllo:
- Utilizza l'anteprima in modalità scura nello spazio di progettazione delle e-mail, che utilizza combinazioni di colori invertite per individuare i problemi in anticipo.
- Utilizza un account Litmus Enterprise con l'opzione Rendering e-mail per simulare le progettazioni tra i principali client e-mail (ad esempio Apple Mail, Gmail e Outlook) e vedere come si comportano i colori e le immagini in modalità scura.