Il modo migliore per codificare i colori e le sfumature di sfondo delle e-mail HTML

Pubblicato: 2021-04-22

La codifica dei colori di sfondo sembra un compito semplice, giusto? La verità? Anche questa piccola parte dello stile presenta alcune insidie ​​e ci sono alcune considerazioni che devono essere fatte per ottenere un rendering coerente tra i client di posta elettronica.

E non sono solo gli sviluppatori a dover placare gli dei della posta in arrivo. Con la modalità oscura che sta prendendo piede, ci sono ancora più ambienti di cui essere a conoscenza, alcuni dei quali richiederanno ai progettisti di posta elettronica di prestare particolare attenzione quando applicano i colori di sfondo nei loro progetti.

In questo articolo del blog imparerai:

  • I vantaggi dei colori di sfondo
  • Come codificare uno sfondo a tinta unita (+ supporto client di posta elettronica)
  • Come codificare uno sfondo sfumato (+ supporto client di posta elettronica)
  • Suggerimenti per l'ottimizzazione per la modalità scura

Perché utilizzare i colori di sfondo nelle e-mail?

Mettere in atto una strategia per il colore di sfondo soddisfa alcune esigenze quando si tratta di migliorare il tuo programma di posta elettronica. Da un punto di vista tecnico, l'implementazione dei colori di sfondo non aggiunge alcun tempo di caricamento alle tue e-mail e sono ancora visibili anche quando le immagini sono disattivate. Possono aiutare a separare i contenuti, richiamare messaggi o distinguere un'e-mail dagli altri nella casella di posta del tuo abbonato, aumentando potenzialmente il coinvolgimento tra il tuo pubblico.

Fatti notare nella posta in arrivo

Puoi creare un'esperienza di apertura di grande impatto, come questa email di Blurb.

L'area degli eroi ha un pugno. L'audace sfondo arancione ha un impatto contrastando con il blu del logo, elevando l'identità del marchio. Una volta che il lettore scorre oltre l'area dell'eroe, il contenuto secondario si trova su uno sfondo bianco, offrendo l'esperienza di lettura ideale per testi più grandi.

blurb email esempio di colore di sfondo
Fonte: email davvero buone

Separare le sezioni

Se hai una lunga e-mail, il colore è un ottimo modo per separare visivamente diversi blocchi di contenuto in modo che risulti più digeribile.

Le e-mail promozionali del gigante dei caffè Starbucks possono essere piuttosto lunghe, con più promozioni ospitate all'interno di una singola e-mail. Per aiutare le sezioni a distinguersi l'una dall'altra, vengono utilizzati diversi colori di sfondo.

esempio di e-mail Starbucks di colori di sfondo
Visualizza questa email in tornasole

Elevare l'identità del marchio

I gradienti fanno parte dell'identità del marchio di Marketing Agency 1973 Ltd, motivo per cui spesso si trovano gradienti lineari audaci sullo sfondo delle loro e-mail. I gradienti di sfondo possono rendere le composizioni più dinamiche e persino incoraggiare l'abbonato a scorrere.

Esempio di email di 1973 Ltd di sfondo sfumato
Fonte: email davvero buone

Quindi qual è il modo migliore per portare queste tecniche nello sviluppo della posta elettronica? Ho chiesto al mio compagno di squadra e sviluppatore di e-mail di tornasole, Carin Slater, di darci le nozioni principali sulla codifica di sfondi solidi e sfumati.

Come codificare un colore di sfondo e-mail HTML solido

I colori di sfondo possono essere codificati in più modi e in più posti. Ma ogni metodo non è ugualmente supportato tra i client di posta elettronica. Ecco una rapida tabella di quale codice di stile di sfondo e metodo di codice colore funziona per i migliori client di posta elettronica.

Supporto client di posta elettronica per i colori di sfondo

Codice di stile Proprietà CSS
'sfondo' e 'colore di sfondo'
Attributo HTML 'bgcolor'
Codice colore 6 cifre esadecimali esadecimale a 3 cifre RGB RGBA 6 cifre esadecimali esadecimale a 3 cifre RGB RGBA
Posta Apple 14 ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì No No
Outlook 2016 (macOS 10.12.6) ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì No No
Outlook 13, 16, 19 (Windows 10) ✓ Sì ✓ Sì ✓ Sì No ✓ Sì No No No
Outlook Office 365 (Windows 10) ✓ Sì ✓ Sì ✓ Sì No ✓ Sì No No No
Outlook Office 365 (Mac OS 10.15) ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì No No
Posta di Windows 10 ✓ Sì ✓ Sì ✓ Sì No ✓ Sì No No No
Applicazione Gmail (Android 10) ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì No No
Applicazione Gmail (iOS 13.4.1) ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì No No
Outlook (Android 7.0) ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì No No
Outlook (iOS 12.0) ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì No No
Posta Samsung (Android 7.0) ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì No No
iPad 11 Air (Gen 4 iOS 14.2) ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì No No
iPhone 12 (iOS 14.2) ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì No No
Posta AOL (Edge) ✓ Sì ✓ Sì ✓ Sì No ✓ Sì No No No
Comcast (bordo) ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì No No
Gmail (Chrome) ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì No No
Ufficio 365 ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì No No
Outlook.com ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì ✓ Sì No No
Web.de ✓ Sì ✓ Sì ✓ Sì No ✓ Sì No No No
Yahoo! posta ✓ Sì ✓ Sì ✓ Sì No ✓ Sì No No No

Sappiamo tutti che i client di posta elettronica possono essere un po' pignoli. Quindi qual è il modo migliore per codificare i colori di sfondo in modo che funzioni su tutti i client di posta elettronica? Ti guiderò attraverso la nostra raccomandazione e perché.

1. Usa tabelle e celle di tabella

Ci sono quattro punti nel tuo codice HTML in cui puoi aggiungere un colore di sfondo:

  • <corpo>
  • <div>
  • <tabella>
  • <td>

Il posto più sicuro per aggiungere il colore di sfondo è su una tabella o una cella di tabella.

Il tag <body> viene eliminato in Yahoo e AOL, quindi qualsiasi colore di sfondo applicato non verrà visualizzato in quei client di posta elettronica. E posizionare un colore su un involucro <div> dopo il corpo funzionerebbe ovunque tranne i client Outlook poiché non supportano i tag <div> nelle e-mail.

Per ottenere la più ampia gamma di supporto del client di posta elettronica, avvolgi l'intera email in un tag <table> della larghezza del 100% e inserisci lì il colore di sfondo. E usa le celle della tabella <td> per le sezioni della tua email in modo da avere una maggiore flessibilità nel colorare blocchi di contenuto specifici.

2. Aggiungi colore con una proprietà CSS e codici colore HEX o valori RGB

I colori di sfondo possono essere codificati in diversi modi:

  • Utilizzo dell'attributo HTML bgcolor
  • Usando la proprietà CSS background-color
  • Utilizzo dello sfondo della proprietà abbreviata CSS
  • Utilizzo del codice colore esadecimale a 6 cifre
  • Utilizzo del codice colore esadecimale a 3 cifre
  • Utilizzo dei valori di colore RGB

Per quanto riguarda come mettere il colore di sfondo sulla tabella o sulla cella della tabella, dovresti usare una proprietà CSS.

Testando i due metodi di proprietà CSS, background-color e background, abbiamo scoperto che entrambi hanno gli stessi risultati coerenti purché si aggiunga solo colore (nessuna immagine). Secondo caniemail.com, l'utilizzo della proprietà background per qualsiasi cosa diversa dall'aggiunta di un colore potrebbe comportare la mancata visualizzazione del colore.

L'attributo HTML bgcolor non ha funzionato bene in Outlook, con un supporto incoerente per i codici HEX a 3 cifre. E l'uso dei valori RGB e RGBA ha provocato il colore errato o il colore è caduto completamente.

Ecco il nostro test del colore di sfondo utilizzando i vari metodi in Outlook in modo che tu possa vedere di persona:

Cartina di tornasole su come vengono visualizzati i colori di sfondo nelle email HTML in Outlook
Vedi questo test in Tornasole →

In altri client di posta elettronica, il codice esadecimale a 3 cifre veniva visualizzato correttamente, ma i valori RGB e RGBA risultavano in colori non corretti quando applicati all'attributo HTML bgcolor.

Cartina di tornasole su come vengono visualizzati i colori di sfondo nelle e-mail HTML in Apple Mail
Vedi questo test in Tornasole →

Dopo tutti i nostri test, siamo giunti a una conclusione: attenersi alle proprietà CSS e utilizzare codici HEX a 3 o 6 cifre o valori RGB. Quelli hanno funzionato su tutti i client di posta elettronica.

L'introduzione dell'opacità con l'alfa per il valore RGBA non era supportata in Outlook, Web.de o GMX.de, ma aveva un supporto decente per il resto.

Quindi il tuo codice finale dovrebbe essere simile a questo per colorare l'intero sfondo di una tabella: