Le 16 migliori procedure di progettazione delle intestazioni delle e-mail

L’intestazione è un elemento che utilizzate regolarmente nelle vostre newsletter. È la prima cosa che si nota di tutta l'e-mail, ma spesso ci si dimentica che è più complessa di un semplice logo e di un menu.

Vediamo come ottenere il massimo dal design dell'intestazione delle e-mail, sulla base delle migliori tecniche collaudate dal nostro team.

L'importanza delle intestazioni delle e-mail e gli elementi chiave

Dal punto di vista del marketing, il banner, che apre un'e-mail, è una parte fondamentale del formato della newsletter per questi motivi:

1. Catturate l'attenzione degli utenti con un design accattivante dell'intestazione dell'e-mail

L'utilizzo di un'immagine accattivante, l'evidenziazione degli sconti o l'indicazione del menu che l'utente probabilmente cliccherà a causa dell'elevata rilevanza delle categorie, farà sicuramente prestare maggiore attenzione da parte di chi legge alla sezione in alto dell'e-mail.

(Fonte: Modello Stripo)

2. Spingere gli utenti verso il conversion funnel, un banner e-mail alla volta.

Roma non è stata costruita in un giorno e i marketing funnel spesso si estendono su una lunga serie di tocchi multipli del marchio. Se c'è un'idea con cui volete che i vostri potenziali clienti familiarizzino, uno dei modi per diffonderla è incorporarla nel design dell'intestazione dell'e-mail. Anche se l'utente dovesse chiudere subito l'e-mail, avrà già letto il messaggio chiave.

Nell'esempio laconico che segue, una società di domini Dan mira a far conoscere la sua acquisizione da parte del leader di mercato, GoDaddy. Questo perché non solo il cambiamento porta con sé diversi aggiornamenti tecnici, ma anche per godere della visibilità di un marchio madre molto più forte. Questo messaggio porterà risultati commerciali immediati? Non proprio. Avrà un impatto commerciale positivo sul modo in cui gli utenti considereranno il marchio e la piattaforma a lungo termine? Altroché.

(Fonte: E-mail di Dan.com)

3. Rafforzate la vostra consapevolezza del marchio e spostate il vostro marchio nella zona di comfort commerciale

L'uso dei colori, dei loghi, degli slogan, dei caratteri e delle immagini del marchio aiuta gli utenti a riconoscerlo meglio ogni volta. La familiarità con il marchio e con le sue aspettative porta il prodotto in una zona di comfort per il potenziale cliente, che si sente più sicuro e informato. In questo modo, la coerenza del marchio nel design dell'intestazione della newsletter aiuta ad avvicinare i vostri potenziali clienti alla decisione di acquisto, aumentando la fiducia e la familiarità.

4. Promuovete i saldi: approfittate dell'acquisto d'impulso per gli articoli a basso prezzo.

Non sono molte le persone che possono permettersi di acquistare d'impulso un'auto o un asciugacapelli Dyson, ma gli articoli a basso prezzo esposti al momento giusto e con la giusta evidenza possono certamente innescare un acquisto emotivo. L'immagine di intestazione di un'e-mail con il prodotto e la CTA giusti ha il potere di essere uno stimolo all'acquisto d'impulso.

(Fonte: Modello Stripo)

Elementi chiave del design dell'intestazione delle newsletter

Sappiamo bene come far sì che le vostre newsletter abbiano un rapporto qualità/prezzo più vantaggioso. Ecco perché vi diamo una prospettiva più ampia quando analizziamo i componenti dell'intestazione delle e-mail, osservandoli attraverso il prisma del design delle newsletter commerciali.

Nell'e-mail marketing, gli elementi dell'intestazione della newsletter sono suddivisi in 3 sottosezioni:

1. Informazioni sul mittente.
2. L'oggetto e l'intestazione.
3. L'intestazione dell'e-mail stessa.

In questo post vi mostreremo come impostare la riga dell'oggetto e il preheader. Condivideremo anche 16 idee per l'intestazione delle e-mail che renderanno i vostri messaggi più efficaci.

(Fonte: Modello Stripo)

1. Informazioni sul mittente;

Questo pezzo di intestazione ha normalmente:

• nome mittente;
• nome destinatario;
• indirizzo "da";
• indirizzo di risposta;
• data;
• logo del marchio (opzionale).

Se utilizzi un ESP per inviare messaggi di posta elettronica in blocco, dovrai impostare i seguenti dati lì: il nome del mittente, il logo della società, l'indirizzo di risposta. Normalmente rimane invariato da campagna a campagna, quindi lo si imposta solo una volta. Mentre la riga dell'oggetto e la pre-intestazione cambiano sempre. Quindi dovrai impostarlo ogni volta che inizi una nuova campagna.

2. La riga dell'oggetto e la pre-intestazione

Un pre-intestazione, noto anche come testo di anteprima, alcuni lo chiamano addirittura snippet, è l'elemento più piccolo ma estremamente essenziale dell'email.

Una pre-intestazione informativa notifica ai destinatari lo scopo dell'e-mail. Sui desktop, va dopo il trattino "-" nella riga dell'oggetto, sui cellulari si trova sulla riga sotto l'oggetto. Alla ricezione della mail, secondo lo studio di Litmus, il 24% dei destinatari giudica dalla pre-intestazione se aprire il messaggio.

Ogni volta che ricevo un'email da Mailchimp, SimilarWeb o Netflix, so senza aprirla di cosa si tratterà.

Alcune aziende inseriscono le loro offerte di vendita nella pre-intestazione che porta loro dei clic.

Una delle migliori soluzioni per un'ottima pre-intestazione è creare storie, quando il testo è una continuazione della riga dell'oggetto.

Chubbies: "Sono cambiato - Ok, ero avaro, ma ora sono cambiato per i saldi natalizi".

Brighton: "Lei adora il ROSSO durante le feste - e anche tu".

D'Artagnan: "Dategli una bistecca! 15% DI SCONTO su tutte le bistecche e le costolette - I saldi terminano domenica”.

Come impostare un testo per la pre-intestazione con Stripo:

• sopra il modello, fare clic sul "impostazioni";
• inserire una riga dell'oggetto e un testo di pre-intestazione.

Importante:

Quando nella tua email non è presente alcuna pre-intestazione, i destinatari vedranno la primissima parte del testo dell'email. Non sarà finita e completa. Potrebbe apparire qualcosa come "Visualizza in linea", "Il mio account".

Quindi, se non vuoi che i tuoi destinatari lo vedano, puoi sempre scegliere di non mostrare nulla come pre-intestazione.

In Stripo, devi solo abilitare l'opzione "Aggiungi uno spazio bianco".

Una volta che lo fai, l'anteprima della tua e-mail apparirà così nelle caselle di posta degli utenti:

Utilizza le annotazioni sulle promozioni di Gmail

Come suggerisce il nome, puoi annotare la durata della vendita, l'importo dello sconto e accompagnare il tutto con il badge della promozione nella Posta in arrivo degli utenti senza che gli utenti aprano le tue e-mail. 

Queste informazioni vanno subito dopo la riga dell'oggetto dell'email e un testo di preintestazione. 

Funziona sui dispositivi mobili in Gmail, ma non distorce l'aspetto della tua posta in altri client di posta. 

Guarda il nostro breve video per imparare come creare annotazioni promozionali per le tue newsletter con Stripo.

Per i requisiti dei badge e delle annotazioni, consultate il nostro post sul blog "Guida alla nuova scheda promozioni di Gmail". L'articolo spiega anche come utilizzare Stripo per creare annotazioni in Gmail con una singola immagine, un'inserzione carosello o un'annotazione di un'offerta (che include elementi come sconto, codice e data di scadenza dell'offerta).

3. Intestazione e-mail

Non esiste una regola unica riguardo a come deve apparire un'intestazione di posta elettronica professionale. Tutto può variare... ma ti forniremo una serie di idee ed esempi.

Prima di immergerci in idee creative, facciamo un elenco di dei tradizionali elementi dell'intestazione delle e-mail, che sono il nome della società, il logo e il menu.

Nome e logo della società

Di norma, il logo di un'azienda include il nome dell'azienda.

Se la tua azienda è appena arrivata sul mercato e le persone stanno ancora imparando a conoscere il tuo marchio e i tuoi prodotti, non dimenticare di aggiungere il nome della tua azienda. Poiché il nome dell'azienda è la cosa per cui i clienti ti riconoscono. Inseriscilo in tutte le email, non importa se è trigger o promozionale.

(Fonte: Modello Stripo)

Ma quando la tua azienda è famosa in tutto il mondo e sei sicuro che tutti conoscano il tuo logo, puoi omettere il nome dell'azienda e inserire solo il logo.

(Fonte: Email da Airbnb)

Nota: lo sfondo del logo deve essere trasparente per abbinare il tema del colore del messaggio.
Il logo viene inserito come immagine, quindi non devi preoccuparti dei caratteri. Verrà visualizzato correttamente in tutti i client di posta e su tutti i dispositivi.

Menu

Il menu è un altro elemento tradizionale delle e-mail perché ti aiuta a navigare con i clienti e a condurli al tuo sito web. Il menu è funzionale.

È possibile selezionare un menu normale o interattivo.

Tutti i normali menu di posta elettronica che aggiungi con Stripo sono totalmente reattivi.

(Fonte: Email da Gap)

Per informazioni più dettagliate su come aggiungere menu, fare riferimento al nostro post del blog "Aggiungi menu in e-mail con Stripo".

Best practice per la progettazione di intestazioni e-mail

Abbiamo selezionato i migliori esempi da marchi reali.

1. Aggiunta dell'opzione "Visualizza nel browser"/"Versione Web"

Ovviamente, puoi inserire questo collegamento in un piè di pagina di un'e-mail, il che è ok. Ma se la tua e-mail contiene GIF che potrebbero non caricarsi velocemente o non caricarsi affatto, se la tua e-mail contiene elementi interattivi che potrebbero non essere visualizzati correttamente in alcuni client, è meglio aggiungere l'opzione "Visualizza online" nell'intestazione delle tue email. Aumenta le possibilità che gli utenti lo notino e lo facciano clic.

(Fonte: Email da Banana Republic)

2. Aggiunta dello store finder

Insieme al logo e al menu, Adidas ha aggiunto uno Store Finder all'intestazione. Idea geniale. Scelgo le scarpe di cui ho bisogno direttamente nelle e-mail e poi, nello Store Finder, mi forniscono l'indirizzo di un negozio offline nelle vicinanze per provare le scarpe. Ottimo servizio. Grazie!

(Fonte: Email da Adidas)

3. Inserimento di informazioni sullo sconto

Questo è uno dei migliori esempi di intestazione di posta elettronica in quanto l'azienda di cosmetici Anabel ha inserito la propria proposta di valore nell'intestazione. Decisione interessante. Non potevo perdermela. Per informazioni più dettagliate ho dovuto fare clic sul link.

(Fonte: Email da Brighton)

4. Promozione dei prodotti

La società Filmmaker promuove un abbonamento a pagamento per il loro prodotto dal vivo proprio nell'intestazione.
Un buon modo per pubblicizzare se la newsletter è solo informativa.

(Fonte: Email da Filmmaker)

5. Aggiunta dell'opzione "Account personale" a un'intestazione di posta elettronica

La mappa dei clic dei rapporti di eSputnik (il nostro ESP) sulle campagne di newsletter mostra che molti destinatari fanno clic sul logo o sul pulsante di accesso per accedere ai propri account.

Una volta che alcuni destinatari hanno finito di leggere l'intero riassunto, potrebbero voler continuare a lavorare con Stripo/il tuo strumento facendo clic sul pulsante "Il mio account".

Come possiamo vedere, il 12,8% dei destinatari ha utilizzato questa opzione.

6. Icone dei social media

Perché non andare contro il sistema? Se vuoi distinguerti, inserisci i link agli account dei tuoi social network nell'intestazione. Abbastanza insolito, ma abbastanza evidente. Soprattutto se il tuo obiettivo principale è indirizzare gli abbonati ai tuoi account sui social media in cui condividi tutti i dettagli su un evento imminente.

(Fonte: e-mail da Ukrainian Hub)

7. Utilizzo di GIF o loghi animati

Vuoi animare la tua intestazione? Fallo. Assicurati di mantenere la dimensione dell'immagine dell'intestazione dell'email al di sotto di 1 Mb perché almeno la metà dei tuoi clienti legge le email sui dispositivi mobili. Nel caso in cui un'e-mail impieghi molto tempo a caricarsi, le persone la chiudono.

(Fonte: Email da Banana Republic)

8. Lavorare sugli sfondi dell'intestazione delle e-mail

Se non desideri apportare modifiche significative alle intestazioni di email marketing, puoi giocare con i colori.

(Fonte: Email dal negozio online Scuderia Ferrari)

9. Decorare le intestazioni per le vacanze

Quando arrivano le feste, facciamo del nostro meglio per rendere festosa anche le email. Qualche tempo fa, la maggior parte delle aziende lasciava invariato il design dell'intestazione dell'email. Ma era un po' noioso. Ravviva la tua intestazione con fiocchi di neve, palline decorative, ecc.

(Fonte: Email da GrowthHackers)

A prima vista, i destinatari erano ben consapevoli dell'obiettivo dell'intera campagna. A mio avviso, questo è un ottimo esempio di progettazione di intestazioni di posta elettronica per le vacanze.

10. Applicazione di caratteri personalizzati alle schede dei menu

Un buon carattere decorativo arricchirà il design dell'intestazione della tua email. Usa la tua immaginazione, diventa creativo.
Importante per rendere leggibili tutti i caratteri: i caratteri corsivi richiedono una dimensione maggiore.

(Email aperta in Gmail, macOS e Windows 10)

Vogliamo ricordarti che Stripo consente di aggiungere e utilizzare caratteri personalizzati nel design dell'intestazione dell'email HTML.

Importante:

Se un carattere selezionato non è supportato da un client di posta elettronica, verrà sostituito da quello predefinito del client di posta.

11. Specifica della data di emissione

Guardando l'email di Apple News, si può facilmente dire in che giorno l'ha ricevuta. Come? Questa azienda aggiunge una data all'intestazione dell'email. A mio parere, questa è una delle migliori idee per la progettazione di intestazioni di posta elettronica.

(Fonte: Email da Apple News)

12. Non utilizzare affatto un'intestazione

Tutti i marchi famosi hanno qualcosa in comune: hanno il loro stile. Pertanto, le e-mail della Nike sono fluide. Non noterai mai quando finisce un'intestazione e inizia un banner.

(Fonte: Email da Nike)

In effetti, Nike non utilizza affatto intestazioni: mettono sempre il loro logo sui banner.

Una decisione interessante se non si intende aggiungere un menu all'intestazione.

13. Aggiunta del collegamento "Aggiorna preferenze"

Vogliamo tutti che le nostre newsletter siano altamente efficaci. Pertanto, dobbiamo fornire solo informazioni pertinenti. Le preferenze dei clienti cambiano abbastanza spesso. I destinatari devono avere la possibilità di aggiornare le proprie informazioni ogni volta che lo desiderano.

Il ristorante D'Artagnan posiziona il pulsante "Aggiorna preferenze" proprio nell'intestazione.

(Fonte: Email da D'Artagnan)

Importante:

Normalmente, i dispositivi mobili mostrano solo 4 schede in un menu. Più di cinque schede in un menu possono causare uno scorrimento orizzontale. Per evitarlo, potrebbe essere necessario disabilitare alcune schede per i dispositivi mobili.

Se stai costruendo la tua intestazione e-mail con Stripo, devi:

• fare clic su una scheda del menu che si desidera disabilitare;
• nel pannello delle impostazioni, fare clic sul pulsante "Nascondi su dispositivi mobili" accanto all'elemento scelto;

• fare lo stesso con tutti gli altri elementi che potresti disabilitare per i dispositivi mobili;
• fatto.

14. Specifica dell'ID di appartenenza

Se offri l'iscrizione ai tuoi clienti, il loro ID dovrebbe essere a portata di mano. Certamente, puoi inserire queste informazioni da qualche parte nelle impostazioni del loro account. Ma Decathlon specifica il numero ID proprio nell'intestazione. È abbastanza evidente. In questo modo, i destinatari sapranno sempre dove cercare il numero di iscrizione.

(Fonte: Email da Decathlon)

15. Aggiunta di una foto del mittente

Questa è una delle intestazioni più informative di sempre. Contiene i pulsanti "condividi", le icone dei social media, le date, il nome dell'autore e la sua foto.

Sempre bello sapere chi è l'autore, soprattutto quando si tratta delle ultime notizie di economia e politica.

(Fonte: e-mail da fonti affidabili CNN)

16. Mettere l'opzione "Fallo adesso"

Puoi, se lo desideri, aggiungere i link "Mostra ora" alle tue intestazioni. Alcuni marchi li mettono sopra il logo, altri mettono questi collegamenti proprio accanto al loro logo. È totalmente a tua discrezione.

Maybelline, ad esempio, aggiunge i collegamenti "Registrati ora" nelle intestazioni delle e-mail HTML quando promuove i loro prossimi eventi, webinar, per essere precisi.

(Fonte: Email da Maybelline New York)

Ora che (si spera) sei stato ispirato dagli esempi di progettazione dell'intestazione dell'email sopra, sei pronto per creare una nuova intestazione per le tue campagne future.

Come creare un'intestazione di posta elettronica con Stripo - guida

Esistono due modi per progettare le intestazioni delle e-mail con il nostro editor:

1. Personalizzazione delle intestazioni nei modelli

Questa opzione si adatta meglio a coloro che non hanno tempo per creare intestazioni di posta elettronica da zero.

Tutti i modelli di email HTML di Stripo contengono già intestazioni. Devi solo scegliere quello che ti piace, sostituire i nostri link con i tuoi, sostituire il logo esistente con il tuo.

2. Creazione di una nuova intestazione di posta elettronica da zero

Voglio creare un'intestazione con il mio logo situato tra le schede del menu. Come questa:

È facile e bastano pochi passaggi:

Quindi, ecco in dettaglio cosa devi fare:

• trascina una struttura a 3 colonne nel modello di email HTML;

se vuoi che l'intestazione della tua email contenga alcune strisce, dovrai trascinare un rispettivo numero di strutture nel tuo modello;

• per aggiungere un logo clicco sull'icona “immagine”;

• imposta la dimensione del mio logo;

Assicurati di fare clic sul pulsante "Immagine reattiva" per i dispositivi mobili;

• trascina il blocco del menu nella prima colonna del modello

• rimuovi la terza scheda del menu poiché abbiamo bisogno solo di 2 schede per ogni colonna (per impostazione predefinita, il blocco del menu ha tre schede);
• nominali - "modelli" e "note di rilascio";
• seleziona il colore del carattere: nel nostro editor, si chiama "Colore link";

• fai lo stesso con la terza colonna;
• per l'intera striscia, ho impostato il bianco come colore di sfondo;
• equalizzare i contenitori - nel mio caso sono 250/250 e quello con il logo è 30;

Se vuoi impostare un'immagine di sfondo, dovrai fare clic sul pulsante "Immagine di sfondo";

• Consiglio di impostare la dimensione del carattere quando l'intestazione è completa e contiene tutti i contenitori, quindi ne vedrai un'immagine generale.

Io ho impostato Tahoma, 18;

Nota: vogliamo ricordarti che Stripo consente di aggiungere caratteri personalizzati e applicarli ai menu e a tutte le altre copie nei modelli di email.

• attiva il pulsante "Struttura reattiva" - fai in modo che il tuo menu venga visualizzato correttamente anche sui dispositivi mobili;

• imposta i paddings. Potrebbe essere necessario eseguire questa operazione per allineare tutti i contenitori. Clicca sul pulsante "altro";

• prima di salvare questo blocco nella libreria, visualizzalo in anteprima.

Importante:

Normalmente, un'intestazione di posta elettronica è qualcosa che crei una volta sola per molte campagne. Quindi non aver paura di dedicare del tempo al design dell'intestazione della newsletter.

Salvalo nella memoria del modulo personale e trascinalo quando crei una nuova campagna email.

Considerazioni finali

Come puoi vedere dal numero di vari esempi di progettazione di intestazioni di posta elettronica forniti qui, non esiste un "miglior design di intestazione di posta elettronica". Sentiti libero di essere creativo.

I nostri modelli di email contengono già varie intestazioni codificate professionalmente: selezionane una e personalizzala.

Ti auguro sinceramente buona fortuna per tutti i tuoi impegni futuri!