[Beta]{class="badge informative"}
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 modalità scura in cui puoi definire impostazioni personalizzate specifiche. Quando la modalità scura è attiva, i client e-mail di supporto visualizzano le impostazioni definite per questa modalità.
Un elenco dei client di posta elettronica che supportano la modalità scura è presentato in questa sezione.
Cos’è la modalità scura? what-is-dark-mode
La modalità scura consente ai client e-mail e alle app supportati 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 (Apple Mail, Gmail, Outlook, Twitter, Slack), è diventato un elemento importante nella progettazione moderna delle e-mail per garantire che il contenuto rimanga leggibile e visivamente attraente per tutti gli utenti.
Tuttavia, non è possibile garantire che l’aspetto dell’e-mail sia esattamente lo stesso in modalità scura su tutti i dispositivi. Alcune modifiche visive possono essere causate anche dall’app e-mail o dal dispositivo che sovrascrive la progettazione originale.
In effetti, il modo in cui la modalità scura viene applicata dai client e-mail può variare come segue:
-
Non tutti i client e-mail supportano questa funzione.
note note NOTE Un elenco dei client di posta elettronica che non supportano la modalità scura è presentato in questa sezione. -
Alcuni client e-mail regolano automaticamente colori, sfondi e immagini. In questo caso, se definisci impostazioni personalizzate in E-mail Designer, probabilmente non verrà eseguito il rendering di tali impostazioni.
-
Altri client di posta elettronica offrono l'opzione di eseguire il rendering della modalità scura personalizzata (ad esempio con il metodo
@media (prefers-color-scheme: dark)). In questo caso, devono essere visualizzate le impostazioni specifiche definite nel Designer e-mail. Scopri come definire le impostazioni personalizzate della modalità scura nel Designer e-mail in questa sezione.
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
-
Evitare le immagini con sfondi bianchi o chiari codificati.
-
Salvare logo e icone come file PNG con sfondi trasparenti per evitare la presenza di caselle bianche visibili in modalità scura.
-
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.
Client e-mail che supportano la modalità scura supporting-email-clients
Di seguito è riportato un elenco dei principali client e-mail che supportano la modalità scura.
Client e-mail che non supportano la modalità scura non-supporting-email-clients
Alcuni client e-mail consentono agli utenti di passare dalla propria interfaccia alla modalità scura, ma questa impostazione non influisce sulla visualizzazione delle e-mail di HTML. Indipendentemente dal fatto che l’interfaccia sia in modalità chiara o scura, l’e-mail riprodurrà lo stesso risultato. Di seguito è riportato un elenco dei client: