In breve
- Lo sfondo con gradiente di un’email va sempre costruito a livelli: prima un colore di sfondo pieno, poi un gradiente CSS sopra e una versione con immagine o VML dove i gradienti CSS non vengono renderizzati.
- I client di posta differiscono per quanto CSS supportano, e il supporto cambia tra una versione e l’altra, quindi prova nelle caselle che i tuoi lettori usano davvero.
- Outlook classico per Windows renderizza le email con Word e ignora i gradienti CSS, ma può disegnare un semplice gradiente a due colori con il VML.
- La modalità scura può cambiare i colori del testo lasciando intatto un gradiente, quindi progetta intestazioni che si leggano bene anche se l’uno o l’altro viene alterato.
In questa pagina
Lo sfondo con gradiente di un’email funziona quando lo costruisci a livelli. Ogni client mostra un colore di sfondo pieno, molti client moderni renderizzano anche un gradiente CSS sopra di esso, e Outlook classico per Windows richiede una forma VML o un’immagine. Se i livelli sono giusti, ogni lettore vede qualcosa che sembra voluto, anche se non è il gradiente completo.
Un’email non è un browser. Ogni casella elimina, riscrive o ignora CSS diversi, e ognuna si aggiorna con i propri tempi. Questa guida tratta ciò che è affidabile, il codice di riserva e come mantenere leggibile il testo quando interviene la modalità scura. Per la grafica dell’intestazione in sé, vedi il design delle intestazioni email.
Quali client di posta mostrano i gradienti CSS
Il supporto si divide in tre gruppi. I client costruiti su motori di browser tendono a renderizzare fedelmente i gradienti CSS. Outlook classico per Windows usa Microsoft Word per impaginare le email e li ignora del tutto. Webmail e app per telefono stanno nel mezzo: ciò che mantengono dipende dall’app, dal tipo di account e da come è scritto il CSS.
| Client | Gradiente CSS | Su cosa contare |
|---|---|---|
| Apple Mail su Mac, iPhone e iPad | In genere lo renderizza | Il gradiente CSS, con un colore pieno dietro |
| Outlook classico per Windows | Ignorato | Un colore pieno, o il VML per un gradiente semplice |
| Nuovo Outlook per Windows e Outlook sul web | Varia | Prova, e mantieni sensato il colore pieno |
| Gmail sul web e nelle sue app | Varia | Prova con i tipi di account che usano i tuoi lettori |
| Altre webmail e app per telefono | Varia | Il colore pieno è l’unica cosa che ogni client mostra |
Lo stack di riserva, nel codice
Metti il gradiente su una cella di tabella, perché il layout a tabelle è ciò che ogni client capisce. Dichiara il colore tre volte, dal più vecchio al più nuovo: l’attributo bgcolor, poi background-color nello stile inline, poi il gradiente come background-image. Un client che non capisce il gradiente scarta quella dichiarazione e mantiene il colore.
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="hero" bgcolor="#4c1d95"
style="background-color:#4c1d95;
background-image:linear-gradient(135deg, #1e1b4b 0%, #6d28d9 55%, #db2777 100%);
padding:48px 32px;">
<h1 style="margin:0; font-family:Arial, Helvetica, sans-serif;
font-size:32px; line-height:40px; color:#ffffff;">
The autumn edit is here
</h1>
</td>
</tr>
</table><style>.linear-gradient(135deg, #1e1b4b 0%, #6d28d9 55%, #db2777 100%)Scegli la riserva con cura. È la versione che molti lettori vedranno davvero, quindi deve reggere il testo bianco o scuro tanto bene quanto il gradiente. Prendere un colore dal centro della sfumatura di solito funziona. Verificalo con il colore del testo secondo le regole del contrasto dei colori, 4,5:1 per il testo del corpo.
Gradienti in Outlook classico con il VML
Outlook classico su Windows capisce ancora il VML, un vecchio formato vettoriale di Microsoft. Racchiuso in un commento condizionale che solo Outlook legge, un rettangolo VML può dipingere un gradiente a due colori dietro il tuo contenuto. Tutti gli altri lo saltano.
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
style="width:600px; height:240px;">
<v:fill type="gradient" color="#1e1b4b" color2="#db2777" angle="135" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<!-- your table cell content goes here -->
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->I gradienti VML sono rudimentali: due colori, dimensioni fisse e poco controllo. Molti team decidono che lo sforzo non vale e lasciano che Outlook classico mostri il colore pieno. È un ottimo risultato se il colore pieno è stato scelto bene.
Usare un’immagine al posto di un gradiente CSS
L’altra via è esportare il gradiente, spesso con il titolo al suo interno, come immagine. Ogni client che mostra le immagini la mostrerà in modo identico, e può portare grana, texture e lettering che il CSS non può. Gli svantaggi sono che alcuni lettori vedono le immagini solo dopo averle consentite, le parole nell’immagine non possono essere lette dai lettori di schermo né dalla ricerca, e il file aggiunge peso.
Intestazione email
1200 × 600
Firma email
600 × 200
Gradiente CSS
- Il testo resta vivo, leggibile e traducibile
- Quasi nessun peso di file
- Si vede anche quando le immagini sono bloccate
- Richiede riserve e varia a seconda del client
Immagine con gradiente
- Identica ovunque le immagini si carichino
- Può portare grana, texture e lettering
- Metti le parole chiave anche in testo vivo e descrivi l’immagine nel testo alternativo
- Aggiunge peso; la forte compressione JPEG causa banding
Una via di mezzo comune: il gradiente come immagine di sfondo sulla cella, con un colore pieno corrispondente dietro e il titolo come vero testo sopra. Se esporti un’immagine con gradiente, salvala in PNG o in JPEG di alta qualità. I gradienti morbidi sono proprio il punto in cui la compressione appare come strisce; il banding nei gradienti spiega la soluzione.
Gradienti nelle email e modalità scura
La modalità scura è il punto in cui le email con gradiente si rompono più spesso. Alcuni client lasciano in pace i tuoi colori, alcuni scambiano solo gli sfondi chiari e il testo scuro, e alcuni regolano tutto. Un gradiente in background-image viene spesso lasciato intatto mentre i colori del testo vengono cambiati, e questo può mettere testo scuro su un gradiente scuro.
Un’intestazione scura con testo chiaro cambia appena in modalità scura…
…mentre un’intestazione chiara con testo scuro è ciò che la modalità scura riscrive.
- 1
Progetta prima l’intestazione scura
Un gradiente profondo con testo chiaro è già ciò che vuole la modalità scura, quindi i client hanno poco da cambiare. Vedi il design in modalità scura per i principi più generali.
- 2
Dichiara il supporto degli schemi di colore
Aggiungi
<meta name="color-scheme" content="light dark">e imposta una versione scura dentro@media (prefers-color-scheme: dark)per i client che la rispettano. - 3
Metti il testo in HTML vivo, non solo nell’immagine
Il testo vivo può essere regolato dal client; le parole incorporate in un’immagine no, e spariscono quando le immagini sono disattivate.
- 4
Prova nelle app vere
Invia email di prova ai client che la tua lista usa davvero, con impostazioni chiare e scure, prima di inviare a tutti.
Dietro tutto questo c’è un principio da mettere testo su un gradiente: le parole devono leggersi sia sulla parte più scura sia su quella più chiara dello sfondo, e sul colore di riserva. Se è così, l’email regge qualunque cosa decida di fare la casella di posta.
Le domande più frequenti
I gradienti CSS funzionano nelle email?
In alcuni client. Apple Mail in genere li renderizza, Outlook classico per Windows li ignora e webmail e app per telefono variano, quindi metti sempre un colore di sfondo pieno dietro il gradiente.
Come aggiungo uno sfondo con gradiente in Outlook?
Outlook classico per Windows ignora i gradienti CSS ma può disegnare un semplice gradiente a due colori con un rettangolo VML in un commento condizionale. Molti mittenti lo lasciano semplicemente mostrare il colore pieno di riserva.
Gmail supporta gli sfondi con gradiente?
Dipende dall’app di Gmail, dal tipo di account e da come è scritto il CSS, e può cambiare. Costruisci il gradiente con un colore pieno di riserva e prova nelle app di Gmail che usano i tuoi lettori.
Che dimensione dovrebbe avere l’immagine di un’intestazione email?
Progettala a 1200 × 600 pixel e mostrala a 600 pixel di larghezza, così resta nitida sugli schermi ad alta densità.
Perché l’intestazione della mia email sembra sbagliata in modalità scura?
Alcuni client cambiano i colori del testo in modalità scura ma lasciano in pace immagini di sfondo e gradienti. Progettare l’intestazione come un gradiente scuro con testo vivo chiaro evita la maggior parte del problema.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo
