La modalità scura è diventata un'impostazione di visualizzazione ampiamente adottata su dispositivi e piattaforme. Con client email come Gmail, Outlook e Apple Mail che supportano la Modalità Scura, è importante comprendere come influisce sul design delle email e come ottimizzare le tue campagne di conseguenza.
In questo articolo, imparerai cos'è la modalità scura, come visualizzare in anteprima le tue email in modalità scura e le migliori pratiche per ottimizzare i tuoi design per le modalità chiara e scura.
Cos'è la modalità scura?
La modalità scura è un'impostazione di visualizzazione che utilizza uno sfondo scuro con testo chiaro, progettata per ridurre l'affaticamento degli occhi in ambienti con scarsa illuminazione. Dalla sua introduzione, la modalità scura ha guadagnato popolarità su piattaforme principali (iOS, Gmail, Outlook) per motivi come:
Riduzione dell'affaticamento degli occhi in condizioni di scarsa illuminazione.
Conservazione della batteria sugli schermi OLED.
Maggiore leggibilità dei contenuti su diversi dispositivi.
Preferenza estetica per un aspetto elegante e moderno.
⚠️ Importante: Non puoi impedire che le tue email vengano visualizzate in modalità scura o disabilitare l'inversione automatica dei colori. La modalità scura è controllata dal client email e dalle impostazioni del dispositivo dei tuoi iscritti (Gmail, Apple Mail, Outlook, ecc.), non dal mittente. Invece di prevenire la modalità scura, concentrati sul progettare email che abbiano un aspetto fantastico sia in modalità chiara che scura.
Come accedere all'anteprima della modalità scura in Omnisend
Per accedere all'anteprima della modalità scura in Omnisend:
Apri la tua email nell'Editor email.
Clicca Anteprima nell'angolo in alto a destra.
Una volta in modalità anteprima, attiva l'interruttore per Anteprima in modalità scura.
Puoi visualizzare in anteprima la tua email utilizzando due tipi di inversione dei colori: Completa e Parziale. Le sezioni sottostanti spiegano cosa significa ciascun tipo e come i client email gestiscono la modalità scura.
Tipi di inversione dei colori
I client email applicano la Modalità Scura in modi diversi, influenzando come vengono visualizzati i colori. Comprendere queste variazioni può aiutare a creare design che appaiono bene sia in modalità scura che chiara.
1. Inversione completa
Inverte tutti i colori (chiaro a scuro e viceversa). Tipicamente applicata da:
Outlook Desktop (Windows): Inversione completa, rendendo l'intero sfondo scuro e il testo chiaro.
Gmail Web: Può applicare un'inversione completa, soprattutto se l'email non è specificamente ottimizzata per la modalità scura.
Yahoo Mail: Simile a Gmail, Yahoo Mail utilizza spesso l'inversione completa, invertendo sia i colori del testo che dello sfondo per un migliore contrasto.
2. Inversione parziale
Regola solo elementi specifici, come il testo, mentre lascia immagini e alcuni colori del marchio intatti. Questo approccio è comune con:
Apple Mail (iOS e macOS): Applica inversione parziale, dove il testo cambia in colori più chiari, ma i colori di sfondo e le immagini generalmente rimangono gli stessi a meno che non siano estremamente luminosi.
Outlook Mobile: Utilizza tipicamente l'inversione parziale, modificando il testo e alcuni colori di sfondo mantenendo le immagini.
Gmail Mobile (Android & iOS): Utilizza l'inversione parziale, spesso lasciando immagini e colori di sfondo intatti mentre regola il colore del testo per migliorare la leggibilità in modalità scura.
Esempio di inversione dei colori in modalità scura. Credito immagine: https://www.listrak.com/
Per massimizzare la leggibilità e la coerenza del marchio, progetta email tenendo presente le modalità di inversione parziale e completa.
Perché le email appaiono diverse su mobile rispetto al desktop: Lo stesso client email (ad es. Gmail) può applicare diversi tipi di inversione a seconda del dispositivo. Gmail iOS utilizza l'inversione completa, mentre Gmail Android utilizza l'inversione parziale. Questo è controllato dalla logica della modalità scura del client email, non da Omnisend. Visualizza sempre la tua email sia in modalità scura completa che parziale e invia email di prova a te stesso su mobile e desktop prima di inviarla al tuo audience.
Compatibilità della Modalità Scura nei Client Email Popolari
La tabella sottostante mostra come i diversi client email gestiscono la modalità scura a partire da ottobre 2023. Usa questo come riferimento quando progetti le tue email.
Client Email | Trattamento HTML in Modalità Scura | Supporta | [data‐ogsc] supporto | Curiosità notevoli | |
Apple Mail (MacOS) | Nessuna modifica* | ✔ Sì | ✘ No | ✔ Sì | I BG bianchi puri (#ffffff) verranno invertiti se è presente |
iPhone / iPad (iOS 16) | Nessuna modifica* | ✔ Sì | ✘ No | ✔ Sì | I BG bianchi puri (#ffffff) verranno invertiti se è presente |
Inverti parzialmente | ✘ No | Parziale* | ✘ No | I colori di sfondo più chiari verranno scuriti. | |
Outlook 2021 (WinOS) | Inverti completamente* | ✘ No | ✘ No | ✘ No | Il targeting speciale è possibile per le sezioni VML. |
App Outlook (iOS) | Inverti parzialmente | ✘ No | Parziale* | ✘ No | I colori di sfondo più chiari verranno scuriti e i caratteri chiari su uno sfondo scuro potrebbero essere scuriti. |
App Outlook (Android) | Inverti parziale | ✘ No | Parziale* | ✘ No | I colori di sfondo più chiari verranno scuriti e i caratteri chiari su uno sfondo scuro potrebbero essere scuriti. |
App Gmail (iOS) | Inverti completo* | ✘ No | ✘ No | ✔ Sì | Targeting speciale è possibile per alcuni colori e colori dei caratteri |
App Gmail (Android) | Inverti parziale | ✘ No | ✘ No | ✔ Sì | |
Office 365 (Win) | Inverti completo | ✘ No | ✘ No | ✘ No | |
Office 365 (Mac) | Inverti parziale | Parziale* | ✘ No | ✔ Sì | I colori di sfondo più chiari verranno scuriti |
Windows Mail | Inverti completo | ✘ No | ✘ No | ✘ No |
Nota: Forzare il colore di sfondo a rimanere coerente non influisce sul colore del carattere, che continuerà a invertire. Le uniche eccezioni a questo sono i client che supportano completamente @media o [data-ogsc] e l'app Gmail, dove il fix per la fusione dei colori è efficace.
Utilizzo dei colori di sfondo forzati (Avanzato)
Alcuni client di posta elettronica (Apple Mail, app Gmail, Office 365 Mac) ti consentono di forzare i colori di sfondo utilizzando CSS personalizzati nell'elemento HTML. Tuttavia, questa tecnica non funziona in Outlook Desktop, Windows Mail o Office 365 (Win), che applicano un'inversione completa indipendentemente. Anche dove supportato, i colori del testo continueranno a invertire automaticamente.
Per aggiungere CSS personalizzato in Omnisend:
Apri la tua email nell'Editor email.
Vai a Aggiungi elementi a sinistra.
Trascina l'elemento HTML nella tua email.
L'editor HTML apparirà a destra.
Incolla il tuo codice CSS per la modalità scura lì.
⚠️ Nota: I colori di sfondo forzati non sono una soluzione universale e richiedono conoscenze avanzate di CSS. Alcuni client email potrebbero ignorare completamente il CSS personalizzato. Testa sempre in caselle di posta reali.
Migliori pratiche per progettare email per la modalità scura
Per migliorare l'esperienza della modalità scura per i tuoi abbonati, segui questi suggerimenti essenziali di design e codifica.
Ottimizza loghi e immagini per la modalità scura
Loghi bianchi su sfondi bianchi: Se il tuo logo è bianco o molto chiaro, scomparirà quando posizionato su uno sfondo bianco in modalità scura (che si inverte in nero). Aggiungi uno sfondo colorato o trasparente dietro il tuo logo, oppure includi un contorno chiaro per garantire la visibilità in entrambe le modalità. Omnisend non supporta lo scambio automatico dei loghi tra modalità chiara e scura - devi modificare direttamente il file del tuo logo.
Immagini trasparenti: Per le immagini con testo scuro su uno sfondo trasparente, aggiungi un contorno chiaro e traslucido per garantire che il testo rimanga leggibile se i colori si invertiscono. Questo è particolarmente utile per Gmail e Outlook, che spesso applicano inversioni parziali o complete dei colori in modalità scura.
Esempio del logo in modalità scura. Credito immagine: https://www.litmus.com/
Branding in modalità scura: Usa elementi leggeri e sottili che sono invisibili in modalità chiara ma aggiungono un tocco unico e di marca in modalità scura.
Immagini Non Trasparenti: Aggiungi padding attorno agli elementi chiave nelle immagini non trasparenti per evitare problemi di allineamento quando i colori cambiano nella Modalità Scura. Tieni presente che le immagini con sfondi molto luminosi (bianco, giallo, ecc.) possono comunque avere i loro colori invertiti da client email come Gmail, iOS e Outlook mobile, anche se non sono trasparenti. Questo è controllato dal client email, non da Omnisend.
Usa testo nero su uno sfondo bianco per il contenuto testuale
Mantenere il contenuto testuale come nero su uno sfondo bianco è un modo semplice ma efficace per mantenere la leggibilità in entrambe le modalità, chiara e scura. Questo minimizza i cambiamenti di colore indesiderati e ti consente di concentrarti su elementi di design creativi al di fuori dell'area principale del testo.
Aggiungi Stili di Base per la Modalità Scura nei Tuoi Modelli Email
Includendo stili specifici per la modalità scura nei tuoi modelli, puoi assicurarti che tutte le tue email vengano visualizzate correttamente, anche se dimentichi di regolare gli stili per la modalità scura.
Ecco un esempio rapido di stili CSS di base:
.darkbg { background-color: black !important; } .h1, .h2 { color: white !important; } .button { background-color: white !important; color: black !important; }Consiglio veloce: Utilizzare classi come .darkbg per gli sfondi e .button per i pulsanti CTA consente aggiornamenti rapidi su più email, garantendo coerenza in modalità scura.
Per aggiungere questo CSS in Omnisend: Vai a Aggiungi elementi → trascina il HTML elemento nella tua email → incolla il codice nell'editor che appare a destra.
Testa/Anteprima sempre le email in Omnisend
Utilizza la funzione di anteprima (interruttore modalità scura attivato) in Omnisend per visualizzare le tue email per i client più popolari, come Gmail, Outlook e Apple Mail, e diversi sistemi operativi. Controlla la leggibilità, i colori del marchio e la corretta visualizzazione di loghi e immagini.
💡 Consiglio: L'anteprima della modalità scura mostra come la tua email verrà probabilmente visualizzata, ma il rendering del client email può variare. Invia sempre un'email di prova a te stesso e visualizzala nelle caselle di posta effettive (Gmail, Outlook, Apple Mail su mobile e desktop) per confermare l'aspetto finale prima di inviarla al tuo audience.
Mantieni semplici e coerenti gli elementi di design
Sfondi semplici (nero per la Modalità Scura e bianco per la Modalità Chiara) migliorano la leggibilità e riducono il rischio di incongruenze nel design tra i client email. Incorpora contrasti o ombre sottili per una maggiore profondità senza compromettere la funzionalità della modalità scura.
Problemi comuni e soluzioni alternative
I miei colori personalizzati continuano a sembrare sbagliati dopo aver progettato per entrambe le modalità
Alcuni client email (come Gmail iOS e Outlook Desktop) applicano un'inversione completa dei colori che sovrascrive il tuo design personalizzato, anche se hai progettato per entrambe le modalità. Questa è una limitazione del client email, non un problema di Omnisend.
Soluzione Alternativa: Crea blocchi email separati per mobile e desktop utilizzando impostazioni di visibilità e progetta i blocchi mobile con toni più scuri che si invertano meno aggressivamente nella modalità scura. Visualizza sempre in anteprima sia in modalità scura Completa che Parziale, e invia email di test a te stesso su mobile e desktop per vedere il rendering finale.
La mia email appare diversa su mobile rispetto a. desktop
Lo stesso client email può applicare diversi tipi di inversione della modalità scura a seconda del dispositivo. Ad esempio, Gmail iOS utilizza l'inversione totale dei colori (invertendo tutti i colori), mentre Gmail Android utilizza l'inversione parziale (regolando il testo e alcuni sfondi). Questo è controllato dalla logica della modalità scura del client email, non da Omnisend.
Soluzione: Visualizza la tua email sia in modalità scura completa che parziale in Omnisend e invia email di prova a te stesso su mobile e desktop prima di inviarla al tuo audience.
L'anteprima non corrisponde a ciò che vedo nella mia casella di posta
L'anteprima della modalità scura ti dà un'approssimazione di come la tua email verrà visualizzata in modalità di inversione Completa e Parziale, ma il rendering del client email può variare leggermente.
Soluzione: Invita sempre un'email di prova a te stesso e visualizzala nelle caselle di posta effettive (Gmail, Outlook, Apple Mail su mobile e desktop) per confermare l'aspetto finale prima di inviarla al tuo audience.
Domande frequenti
Posso impedire che le mie email vengano visualizzate in modalità scura?
No, non puoi impedire che le email vengano visualizzate in modalità scura o forzare uno sfondo bianco su tutti i client email. La modalità scura è controllata dal client email e dalle impostazioni del dispositivo di ciascun iscritto (Gmail, Apple Mail, Outlook, ecc.), non dal mittente. Alcuni client email applicano un'inversione completa dei colori (trasformando gli sfondi bianchi in neri), mentre altri applicano un'inversione parziale. Invece di cercare di impedire la modalità scura, progetta le tue email per apparire fantastiche sia in modalità chiara che scura utilizzando la nostra funzione di anteprima della modalità scura.
Come posso forzare i miei colori di sfondo a rimanere gli stessi in modalità scura?
Omnisend non ha una funzione integrata per forzare i colori di sfondo. Puoi aggiungere CSS personalizzato utilizzando l'elemento HTML nell'editor email per applicare colori di sfondo forzati per alcuni client email (Apple Mail, app Gmail). Tuttavia, questa tecnica non funziona in Outlook Desktop, Windows Mail o Office 365 (Win), che applicano l'inversione totale dei colori indipendentemente. Anche dove supportato, i colori del testo si invertiranno automaticamente. Per aggiungere CSS personalizzati: Vai a Aggiungi Elementi → trascina l'elemento HTML nella tua email → incolla il tuo codice CSS nell'editor che appare a destra.
Perché il mio logo bianco scompare in modalità scura?
Se il tuo logo è bianco o molto chiaro e posizionato su uno sfondo bianco, scomparirà in modalità scura perché lo sfondo si inverte in nero, ma il logo rimane bianco (o diventa più scuro). Per risolvere questo problema, aggiungi uno sfondo colorato o trasparente dietro il tuo logo, oppure applica un contorno chiaro per garantire che rimanga visibile sia in modalità chiara che scura. Visualizza sempre in anteprima la tua email in modalità scura prima di inviare.
Dove posso aggiungere il codice CSS per la modalità scura in Omnisend?
Per aggiungere CSS personalizzato in Omnisend: Apri la tua email nell'Editor email, vai su Aggiungi elementi a sinistra, trascina l'elemento HTML nella tua email e l'editor HTML apparirà a destra. Incolla il tuo codice CSS per la modalità scura lì. Tieni presente che alcuni client email potrebbero ignorare completamente il CSS personalizzato – testa sempre la tua email in caselle di posta reali.
Perché le mie email appaiono diverse su mobile rispetto al desktop in modalità scura?
Lo stesso client email può applicare diversi tipi di inversione della modalità scura a seconda del dispositivo. Ad esempio, Gmail iOS utilizza l'inversione totale dei colori (invertendo tutti i colori), mentre Gmail Android utilizza l'inversione parziale (regolando il testo e alcuni sfondi). Questo è controllato dalla logica della modalità scura del client email, non da Omnisend. Per assicurarti che la tua email appaia bene su tutti i dispositivi, visualizzala sia in modalità scura completa che parziale in Omnisend e invia email di prova a te stesso su mobile e desktop prima di inviarla al tuo audience.
Cosa succede se i miei colori personalizzati continuano a sembrare sbagliati dopo aver seguito questa guida?
Alcuni client email (come Gmail iOS e Outlook Desktop) applicano un'inversione completa dei colori che sovrascrive il tuo design personalizzato, anche se hai progettato per entrambe le modalità. Questa è una limitazione del client email, non un problema di Omnisend.
Soluzione Alternativa: Crea blocchi email separati per mobile e desktop utilizzando impostazioni di visibilità e progetta i blocchi mobile con toni più scuri che si invertano meno aggressivamente nella modalità scura. Visualizza sempre in anteprima sia in modalità scura Completa che Parziale, e invia email di test a te stesso su mobile e desktop per vedere il rendering finale.
L'anteprima della modalità scura mostra esattamente come apparirà la mia email nelle caselle di posta?
L'anteprima della modalità scura ti dà un'approssimazione di come la tua email verrà visualizzata in modalità di inversione Completa e Parziale, ma il rendering del client email può variare leggermente. Invia sempre un'email di prova a te stesso e visualizzala nelle caselle di posta effettive (Gmail, Outlook, Apple Mail su mobile e desktop) per confermare l'aspetto finale prima di inviarla al tuo audience.
Perché i miei sfondi delle immagini cambiano colore in modalità scura?
Client email come Gmail e Outlook su mobile applicano un'inversione dei colori alle immagini con sfondi molto luminosi (bianco, giallo, ecc.), anche se l'immagine non è trasparente. Questo è controllato dal client email, non da Omnisend. Per ridurre questo, utilizza immagini con sfondi non bianchi puri o aggiungi padding/bordi attorno agli elementi chiave.
Posso impostare i colori della modalità scura negli Asset del Brand?
No. Le Risorse del Brand (Colori Accento, Scuro, Chiaro) si applicano ai modelli email ma non controllano il rendering della modalità scura tra i client email. Per ottimizzare per la modalità scura, utilizza le migliori pratiche di design o aggiungi HTML personalizzato con CSS per la modalità scura.
Non riesci a trovare quello che stai cercando? Il nostro team di supporto è disponibile 24/7 per te. Inviaci un messaggio nell'app o via email [email protected].