Gestire i contenuti in modalità scura dark-mode
Durante la progettazione delle e-mail, Journey Optimizer Invia e-mail a Designer ti consente di passare alla visualizzazione Modalità scura.
In questa visualizzazione in modalità scura è inoltre possibile definire impostazioni personalizzate specifiche che verranno visualizzate dai client di posta elettronica di supporto quando la modalità scura è attiva.
Cos’è la modalità scura? what-is-dark-mode
Il modo in cui viene riprodotta la modalità scura nei vari client e-mail è complesso. Definiamo prima la modalità scura.
La modalità scura consente ai client e alle app e-mail di supporto di visualizzare e-mail con sfondi più scuri e colori più chiari per testo, pulsanti e altri elementi dell’interfaccia utente. Consente di ridurre l'affaticamento degli occhi, di risparmiare la durata della batteria e di migliorare la leggibilità in ambienti scarsamente illuminati, per un'esperienza di visualizzazione più confortevole.
Come tendenza crescente tra i principali sistemi operativi e app, è diventata un elemento importante nella progettazione di e-mail moderne per garantire che il contenuto rimanga leggibile e visivamente accattivante per tutti gli utenti.
Guardrail guardrails
Le aspettative in termini di rendering in modalità scura devono essere considerate con cautela in quanto il modo in cui viene applicato dai diversi client e-mail può variare molto.
Prima di utilizzare la modalità scura nel Designer e-mail di Journey Optimizer, è fondamentale comprendere in che modo i client e-mail principali la gestiscono. Ci sono tre casi da distinguere:
Client che non supportano la modalità scura not-supporting
Alcuni client di posta elettronica non supportano affatto questa funzione, ad esempio:
- Yahoo!Posta
- AOL
Che tu definisca o meno le impostazioni personalizzate della modalità scura nel Designer e-mail, questi client e-mail non visualizzano mai alcun rendering della modalità scura.
Client che applicano la propria modalità scura default-support
Alcuni client e-mail applicano sistematicamente la propria modalità scura predefinita per tutte le e-mail ricevute. Colori, sfondi, immagini, ecc. vengono regolate automaticamente con le impostazioni della modalità scura specifiche del client e-mail, il che significa che non è possibile alcuna modifica esterna.
Questi client sono, ad esempio:
- Gmail (Posta sul desktop, iOS, Android, Posta sul web mobile)
- Windows Outlook
- Outlook Windows Mail
In questo caso, se definisci le impostazioni della modalità scura personalizzata in E-mail Designer, queste vengono ignorate con le impostazioni del client e-mail.
È importante comprendere che questi client e-mail gestiscono la modalità scura, ma che la progettazione specifica della modalità scura non verrà renderizzata.
Client che supportano la modalità scura personalizzata custom-support
Altri client di posta elettronica offrono l'opzione di eseguire il rendering della modalità scura personalizzata con la query @media (prefers-color-scheme: dark), che è il metodo utilizzato dal Designer di posta elettronica Journey Optimizer.
Elenco dei client principali che gestiscono questa opzione:
- Apple Mail macOS
- Apple Mail iOS
- MacOS di Outlook
- Outlook.com
- IOS di Outlook
- Android di Outlook
In questo caso, devono essere visualizzate le impostazioni specifiche definite nel Designer e-mail.
Tuttavia, possono essere applicate alcune restrizioni in base a ciascun client e-mail. Ad esempio, alcuni client come Apple Mail 16 (macOs 13) non genereranno 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'opzione Rendering di e-mail in E-mail Designer.
Modalità scura in E-mail designer dark-mode-email-designer
Quando si tratta della modalità scura in E-mail Designer, ci sono due aspetti da considerare:
-
Puoi ottenere un’anteprima di come verrà riprodotto il rendering della modalità scura predefinita nella maggior parte dei client e-mail che supportano. Ulteriori informazioni
-
Se desideri ignorare le impostazioni predefinite di supporto dei client e-mail, puoi definire impostazioni personalizzate in modalità scura da applicare all’e-mail che stai modificando. Ulteriori informazioni
Anteprima modalità scura predefinita preview-dark-mode
Per accedere alla modalità scura in E-mail Designer e visualizzare un’anteprima delle impostazioni predefinite della modalità scura, segui la procedura riportata di seguito.
-
Dalla home page di E-mail Designer, seleziona l'opzione Progetta da zero. Ulteriori informazioni
-
Aggiungi strutture e componenti contenuto al contenuto.
-
In alto a destra nell'area di lavoro centrale, passa alla modalità Scuro.
-
Viene visualizzata l'anteprima predefinita in modalità scura.
Per impostazione predefinita, l’anteprima in modalità scura di E-mail Designer applica la combinazione di colori "inversione completa dei colori" a tutti gli elementi eccetto immagini e icone.
Significa che rileva aree con elementi chiari e scuri e le inverte, in modo che gli sfondi chiari diventino testo scuro e chiaro, mentre gli sfondi scuri diventino chiari e il testo chiaro diventi scuro.
Definire la modalità scura personalizzata define-custom-dark-mode
Dopo il passaggio alla modalità scura, puoi scegliere di modificare elementi di stile specifici del contenuto che verranno visualizzati solo quando la modalità scura è abilitata nel client e-mail del destinatario, purché supporti tale funzione.
Per sfruttare lo stile personalizzato della modalità scura di E-mail Designer, Journey Optimizer utilizza Query CSS @media (prefers-color-scheme: dark) che rileva se il client e-mail dell'utente è impostato sulla modalità scura e applica la struttura a tema scuro definita nell'e-mail.
Per definire le impostazioni personalizzate della modalità scura, effettua le seguenti operazioni.
-
Accertati di passare all'anteprima della modalità scura nel Designer e-mail. Scopri come
-
Modifica gli attributi dei colori di stile come testo, sfondi, pulsante e così via.
-
Non è possibile modificare i colori delle immagini e delle icone, ma è possibile definire risorse specifiche solo per la modalità scura. A questo scopo, seleziona un’immagine. Passa alla modalità scura utilizzando l'interruttore dedicato nel riquadro Impostazioni e seleziona un'altra risorsa.
-
In qualsiasi momento puoi Passare alla visualizzazione live per verificare come il contenuto potrebbe essere riprodotto su dispositivi di varie dimensioni. Da questa vista, seleziona l’opzione Modalità scura nella parte superiore dello schermo per visualizzare in anteprima la versione in modalità scura del contenuto tra i diversi dispositivi.
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. -
Dopo aver apportato le modifiche desiderate per la modalità scura, fare clic su Simula contenuto.
-
Seleziona Rendering e-mail e collegati al tuo account Litmus. Puoi vedere il rendering finale in modalità scura per vari client e-mail. Ulteriori informazioni sul rendering di e-mail.
note warning WARNING Anche se la simulazione si avvicina molto al modo in cui le e-mail appariranno 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 le best practice elencate di seguito.
Ottimizza immagini e logo
-
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.
Guarda gli sfondi
-
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.
Progettare contenuti accessibili in modalità scura
-
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 delle linee guida per l’accessibilità dei contenuti web (WCAG). Utilizza strumenti come Verifica contrasto di WebAIM 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 in quanto può causare affaticamento degli occhi e potrebbe essere automaticamente invertito da alcuni client e-mail.
-
Se la modalità scura non è supportata, fornisci uno stile di fallback accessibile.
Verifica le e-mail in ambiente in modalità scura
-
Utilizza l'anteprima in modalità scura di E-mail Designer che utilizza combinazioni di colori invertite per individuare in anticipo i problemi.
-
Utilizza l'opzione Rendering di e-mail che sfrutta Litmus per simulare le progettazioni tra i principali client e-mail (Apple Mail, Gmail, Outlook) e vedere come si comportano i colori e le immagini in modalità scura.