Modalità scura dark-mode
Durante la progettazione delle e-mail, il Designer e-mail consente di passare alla visualizzazione Dark mode.
In Dark mode è possibile definire impostazioni personalizzate specifiche da visualizzare supportando i client di posta elettronica quando la modalità scura è attiva.
Cos’è la modalità scura? what-is-dark-mode
La modalità scura consente ai client e-mail e alle app 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.
Guardrail guardrails
Il rendering in modalità scura può variare in modo significativo nei diversi client e-mail.
Prima di utilizzare la modalità scura, è importante 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, questi client e-mail non visualizzano 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 regolati automaticamente con le impostazioni della modalità scura specifiche per quel client e-mail. Non è possibile alcuna modifica esterna.
Alcuni esempi sono:
- Gmail (Posta sul desktop, iOS, Android, Posta sul web mobile)
- Windows di Outlook
- Outlook Windows Mail
In questo caso, se definisci le impostazioni della modalità scura personalizzata in E-mail Designer, queste vengono ignorate dalle impostazioni del client e-mail.
Pertanto, anche se questi client e-mail gestiscono la modalità scura, la progettazione specifica della modalità scura non verrà renderizzata.
Client che supportano la modalità scura personalizzata custom-dark-mode
Alcuni 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 Marketo Engage.
I client principali che gestiscono questa opzione sono:
- Apple Mail macOS
- Apple Mail iOS
- Outlook macOS
- Outlook.com
- IOS di Outlook
- Android di Outlook
Dovrebbero essere visualizzate le impostazioni definite nel Designer e-mail.
Alcune restrizioni possono essere applicate in base a ciascun client e-mail. Ad esempio, alcuni client (ad esempio, Apple Mail 16) non genereranno la modalità scura se sono presenti immagini.
Per risultati ottimali, verifica il contenuto nei client e-mail di destinazione. Per visualizzare una simulazione in ogni client, utilizzare la funzionalità 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 le impostazioni personalizzate della modalità scura nell’e-mail che stai modificando. Ulteriori informazioni
Anteprima modalità scura predefinita preview-dark-mode
Scopri come accedere alla modalità scura in E-mail Designer e ottenere un’anteprima delle impostazioni predefinite della modalità scura.
-
Dalla home page di E-mail Designer, selezionare l'opzione Design from scratch.
-
Aggiungi strutture e contenuto alla tua e-mail.
-
In alto a destra, abilita l'interruttore Dark mode.
-
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.
Ciò significa che rileva le aree con elementi chiari e scuri e li 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 a Dark mode, 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, Marketo Engage utilizza la query CSS @media (prefers-color-scheme: dark) che rileva se il client e-mail dell'utente è impostato sulla modalità scura e applica la progettazione a tema scuro definita nell'e-mail.
Per definire le impostazioni personalizzate della modalità scura, effettua le seguenti operazioni.
-
Passa alla anteprima in modalità scura nel Designer e-mail.
-
Modificare gli attributi dei colori di stile come testo, sfondi, pulsanti e così via.
-
Non puoi modificare i colori delle immagini e delle icone, ma puoi definire risorse specifiche solo per la modalità scura. A questo scopo, seleziona un’immagine. Passa a Dark mode utilizzando l'interruttore dedicato nel riquadro Settings e seleziona un'altra risorsa.
-
In qualsiasi momento puoi Switch to live view per vedere come il contenuto potrebbe essere riprodotto su dispositivi di varie dimensioni. Da questa vista, seleziona l’opzione Modalità scura per visualizzare in anteprima la versione in modalità scura del contenuto tra diversi dispositivi.
note note NOTE 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 Simulate Content.
-
Selezionare Render email e connettersi all'account Litmus. Puoi vedere il rendering finale in modalità scura per vari client e-mail. Ulteriori informazioni sul rendering di e-mail.
note important IMPORTANT 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 dei dispositivi.
Best practice best-practices
Poiché l'adozione della modalità scura aumenta tra i principali client e-mail, è essenziale considerare il modo in cui le e-mail vengono riprodotte sia in ambienti chiari che in quelli 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 la funzione Rendering di e-mail che sfrutta Litmus per simulare le progettazioni tra i principali client e-mail e vedere come si comportano i colori e le immagini in modalità scura.