In breve
- L’immagine standard di un header email è di 1200 per 600 pixel, mostrata a 600 pixel di larghezza per restare nitida sugli schermi ad alta densità.
- Il supporto ai gradienti CSS varia tra i client di posta, quindi un header con gradiente è di solito un’immagine, con un colore di sfondo pieno impostato come riserva.
- Alcuni client di posta bloccano le immagini per impostazione predefinita, quindi ogni header ha bisogno di un testo alternativo descrittivo e di un colore di sfondo dietro.
- La dark mode può cambiare i colori intorno a un header ma di solito non dentro l’immagine, quindi progetta gli header con uno sfondo proprio e testali in entrambe le modalità.
- Metti le parole importanti come offerte, date e inviti all’azione in testo HTML vivo sotto l’header, non solo dentro l’immagine.
In questa pagina
Un buon design dell’header email parte dai vincoli della casella di posta. Fai l’immagine dell’header di 1200 per 600 pixel e mostrala a 600 pixel di larghezza, così è nitida sugli schermi ad alta densità. Poiché i client di posta gestiscono i gradienti CSS in modo incoerente, metti il gradiente dentro l’immagine e imposta dietro un colore di sfondo pieno corrispondente. Aggiungi un testo alternativo descrittivo per chi ha le immagini disattivate, controlla in dark mode e tieni le parole importanti come testo vivo sotto l’immagine.
Questa guida tratta dimensioni, immagine o CSS, dark mode, peso e testo alternativo, con HTML che puoi adattare. Per il lato tecnico dei gradienti nelle email HTML, vedi gradienti nelle email.
Dimensioni dell’header email
La maggior parte delle impaginazioni email è larga circa 600 pixel, una larghezza che sta comoda nei pannelli di lettura da desktop e si riduce sui telefoni. Esporta gli header al doppio, 1200 per 600, e imposta a 600 la larghezza di visualizzazione dell’immagine nell’HTML. La forma 2:1 lascia spazio a un titolo breve o a un logo senza spingere il contenuto sotto la piega sui telefoni.
Header email 1200×600
1200 × 600
Firma email 600×200
600 × 200
Banner del blog 1200×600
1200 × 600
Immagine o CSS: come costruire un header email con gradiente
Sul web un gradiente è una riga di CSS. Nelle email è meno affidabile: alcuni client rendono background-image: linear-gradient(...), altri lo ignorano. Le opzioni pratiche sono qui sotto.
| Approccio | Come funziona | Compromesso |
|---|---|---|
| Header come immagine | Il gradiente e l’eventuale grafica incorporati in un’immagine 1200×600 | Ha lo stesso aspetto ovunque le immagini si carichino; le parole al suo interno spariscono con le immagini disattivate |
| Gradiente CSS e testo vivo | Una cella di tabella con sfondo a gradiente e testo HTML sopra | Leggero e accessibile; torna a un colore pieno dove i gradienti non sono supportati |
| Ibrido | Un’immagine a gradiente per l’atmosfera, testo vivo per il messaggio sotto o su un colore pieno di riserva | Il più robusto: sempre leggibile, di solito bello |
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" bgcolor="#2a1b6b"
style="background-color:#2a1b6b; background-image:linear-gradient(135deg,#2a1b6b,#7c3aed);">
<img src="https://example.com/header-1200x600.jpg"
width="600" height="300"
alt="Autumn edit: new colours for the season"
style="display:block; width:100%; max-width:600px; height:auto; border:0;
color:#ffffff; font-family:Arial, sans-serif; font-size:20px;">
</td>
</tr>
<tr>
<td style="padding:24px; font-family:Arial, sans-serif; font-size:18px; line-height:1.5; color:#1c1733;">
Our autumn colours are here. See the new range this weekend.
</td>
</tr>
</table>Progettare gli header email per la dark mode
In dark mode, molte app di posta cambiano i colori dell’email intorno al tuo header: gli sfondi bianchi possono diventare scuri e il testo scuro chiaro. Le immagini di solito restano come sono. Questo crea due problemi classici: un header con sfondo bianco che brilla come un riquadro luminoso in una casella scura, e un logo trasparente con inchiostro scuro che sparisce su uno sfondo diventato scuro.
Da evitare
- Header con sfondo bianco puro
- Loghi PNG trasparenti con inchiostro scuro
- Parole importanti solo dentro l’immagine
- Testo chiaro e sottile su un gradiente pallido
Da fare
- Un header con uno sfondo proprio, medio o profondo
- Loghi su una forma piena, o una versione chiara e una scura
- Il messaggio ripetuto come testo vivo
- Un forte contrasto dentro l’immagine stessa
I gradienti da medi a profondi come questi sono la scelta più sicura. Non abbagliano in una casella scura, e il testo bianco al loro interno resta leggibile in entrambe le modalità. Il design per la dark mode tratta i principi più ampi.
Peso, testo alternativo e le parole che contano
Tieni leggere le immagini dell’header: esporta in JPEG per i gradienti fotografici o con grana e in PNG per la grafica piatta con testo, e comprimile. I grandi gradienti lisci possono fare banding se compressi troppo, e un po’ di grana nel design li aiuta a sopravvivere; vedi il banding nei gradienti.
Scrivi un testo alternativo che dica ciò che dice l’header, non com’è fatto: Autumn edit: new colours for the season, non banner viola. Imposta le proprietà del font dell’immagine perché il testo alternativo appaia con dimensione e colore leggibili sullo sfondo di riserva quando le immagini sono disattivate.
Un header di newsletter a 1200 per 600: testata, numero di uscita e una riga.
Un header di annuncio: il messaggio è abbastanza breve da ripeterlo come testo vivo sotto.
Checklist per l’header email
- 1
Progetta a 1200 per 600
Mostra a 600 di larghezza. Tieni le parole abbastanza grandi da leggersi su un telefono a quella dimensione.
- 2
Dagli uno sfondo proprio
Niente bianco puro e niente trasparenza attorno ai bordi, così la dark mode non può trasformarlo in un riquadro luminoso.
- 3
Imposta un colore di riserva
Un
bgcolorsulla cella con un colore preso dal gradiente, così anche con le immagini bloccate l’email resta in linea col brand. - 4
Scrivi un vero testo alternativo
Il messaggio, non la descrizione dell’immagine.
- 5
Ripeti il messaggio come testo vivo
Date, offerte e inviti all’azione come testo HTML sotto l’header.
- 6
Prova in entrambe le modalità
Invia email di prova alle app che usano i tuoi lettori, in modalità chiara e scura, con le immagini attive e disattivate.
In Gradiently sono integrate le dimensioni Header email (1200 per 600) e firma (600 per 200), e copia sulle dimensioni trasforma un post social finito in un header coerente per l’email del tuo giorno del lancio.
Le domande più frequenti
Che dimensione deve avere un header email?
1200 per 600 pixel, mostrato a 600 pixel di larghezza nell’HTML dell’email. La doppia risoluzione lo mantiene nitido sugli schermi ad alta densità.
I gradienti CSS funzionano nelle email?
In alcuni client di posta, non in tutti. Metti il gradiente in un’immagine oppure usa il CSS con un bgcolor pieno di riserva, e prova nelle app che usano i tuoi lettori.
Come faccio a far funzionare un header email in dark mode?
Dagli uno sfondo proprio, medio o profondo, invece di bianco o trasparente, mantieni un forte contrasto dentro l’immagine e ripeti le parole importanti come testo vivo.
Cosa deve dire il testo alternativo di un header email?
Ciò che dice l’header, come il titolo o l’offerta, così chi ha le immagini bloccate riceve comunque il messaggio.
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
