# Design dell’header email con i gradienti [Canonical HTML page](https://gradiently.design/it/guide/email-header-design) Un header email è la prima cosa che qualcuno vede dopo l’oggetto, in una casella che non controlli. Progettarlo bene significa pensare fin dall’inizio a immagini disattivate, dark mode e schermi piccoli. ## The short version - 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. 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](https://gradiently.design/it/guide/gradients-in-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 Le forme dell’header e della firma email. L’header ha la stessa dimensione di un banner del blog, quindi un solo design può servire per entrambi. > **Spesso più corto è meglio** Su un telefono, un header alto può riempire tutta la prima schermata. Se il tuo header è soprattutto atmosfera, valuta un ritaglio più corto così la prima riga dell’email si vede senza scorrere. ## 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 | La maggior parte dei brand usa l’ibrido: l’immagine porta l’aspetto, l’HTML porta le parole. ```html
Autumn edit: new colours for the season
Our autumn colours are here. See the new range this weekend.
``` Un header ibrido. La cella ha un colore pieno e un gradiente dietro l’immagine, così anche con le immagini bloccate si vedono il colore del brand e il testo alternativo formattato. Il messaggio è ripetuto come testo vivo sotto. ## 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 - Viola profondo: `linear-gradient(135deg, #2a1b6b 0%, #7c3aed 100%)` - Verde acqua profondo: `linear-gradient(135deg, #0f3d3e 0%, #1f8a78 100%)` - Dal bacca al corallo: `linear-gradient(135deg, #7a1f3d 0%, #e0555c 100%)` - Dalla notte al blu: `linear-gradient(135deg, #1e2a52 0%, #3f6fd8 100%)` Gradienti per header che stanno bene sia nelle caselle chiare sia in quelle scure: abbastanza profondi da non abbagliare di notte, abbastanza saturi da sembrare luminosi di giorno. 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](https://gradiently.design/it/guide/dark-mode-design) 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](https://gradiently.design/it/guide/gradient-banding). 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 ampio header email con il titolo di una newsletter e il numero di uscita su un gradiente profondo Un header di newsletter a 1200 per 600: testata, numero di uscita e una riga. Un ampio header email che annuncia l’apertura la domenica su un gradiente caldo 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 `bgcolor` sulla 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](https://gradiently.design/it/guide/launch-day-graphics). ## FAQ ### 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.