Design Modelli How-to
~ 16 minuti letti
2 commenti
54805 visualizzazioni
valutalo
09 ottobre 2020

16 Best practice per la progettazione di intestazioni e-mail

Stripo / Blog / 16 Best practice per la progettazione di intestazioni e-mail

L'intestazione dell'email è l'elemento che userai regolarmente nelle tue newsletter email. Ma molto spesso ci dimentichiamo che è più complesso di un semplice logo e menu.

L'intestazione completa della newsletter è composta da tre parti essenziali:

  • informazioni sul mittente;

  • la riga dell'oggetto e una pre-intestazione;

  • l'intestazione e-mail stessa.

In questo post, mostreremo come impostare la riga dell'oggetto e la pre-intestazione. Nonché condivideremo 16 idee per intestazioni che renderanno le tue email più efficaci.

Заголовок Stripo

(Fonte: Modello Stripo)

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.

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.

Oggeto-Titulo

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".
Aggiungi uno spazio bianco

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

Disabilitato-Preheaders_Stripo

Imposta la riga dell'oggetto e il testo in anteprima per le tue e-mail

Utilizza le annotazioni sulle promozioni di Google

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. 

Esempio di email con scheda promozionale GmailFunziona 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.

Utilizza le annotazioni per risaltare nella posta in arrivo degli utenti

Per i requisiti per i badge di annotazione, fai riferimento al nostro post "Guida alla nuova scheda delle promozioni di Gmail".

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.

Intestazione-con-nome-azienda

(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.

logo-no-name

(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.


Inversione schede menu Design intestazione email

(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.

Best practice per l'intestazione dell'email


(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!

Trova negozio-Adidas

(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.

Best practice per la progettazione di intestazioni e-mail Inserimento di informazioni importanti nelle intestazioni

(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.

Preheader informativo

(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.

Esempi di design di intestazione e-mail_ Inserimento-logo-e-link-account-nell'intestazioneUna 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.

Intestazione e-mail Icone social media nelle intestazioni e-mail

(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.
Stripo Header GIF nell'intestazione.

(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.

Stripo Header Ferrari

Stripo Header Merry Christmas Design

(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.

Animazioni immagine intestazione email


(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.

Esempi di design di intestazione e-mail Caratteri decorativi

(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.

6 min read

60592 views 5

How to Add and Use Custom Fonts with Stripo

On November 26th, we released a new option — now with Stripo.email, you can add custom fonts to projects in just a few clicks with no HTML skills needed. Why is that important? It’s not a secret that a good copy complements the email design and convinces customers to make a purchase. Make the text copy emotional. And by wrapping it in a font that matches the situation and the email design best, you make it noticeable, good-looking and appealing....

Continua a leggere

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.

Intestazione e-mail Inserimento di dati nelle intestazioni e-mail

(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.

Nikes-Header

(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.

Preferenze di aggiornamento dell'intestazione Stripo

(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;

Esconder elemente

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

  • fatto.

Rendi i menu per le intestazioni delle email completamente reattivi con 1 clic

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.

ID iscrizione intestazione Stripo 1

(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.

Stripo Header Miglior esempio

(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.

Best practice per l'intestazione dell'email per la registrazione all'evento

(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.

Tra i nostri modelli di intestazione e-mail, troverai sicuramente quello che soddisfa le esigenze della tua campagna corrente.
Navigazione

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:

Stripo Header Menu StripoÈ facile e bastano pochi passaggi:

Stripo Header Aggiunta GIF menuQuindi, ecco in dettaglio cosa devi fare:

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

Intestazione Stripo che aggiunge una nuova strutturase 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”;

Struttura

  • imposta la dimensione del mio logo;

Dimensioni

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

  • trascina il blocco del menu nella prima colonna del modello

Blocco menu trascinamento intestazione Stripo

  • 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";

Menu e-mail di intestazione a fumetti

  • 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;

Aspetto itSe 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;

Struttura responsive

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

Imbottiture intestazione Stripo 1

  • 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.
Salvataggio delle intestazioni delle e-mail nella memoria del modulo

Crea la tua intestazione email HTML una sola volta e utilizzala in tutte le campagne future

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!

Crea intestazioni e-mail efficaci per le tue e-mail una volta per riutilizzarle in tutte le tue campagne

 

Дмитрий Головцов 3 settimane fa

Почему в письме вы пишите в анонсе статьи про геймификацию, а сама статья совершенно о другом? Заманить для перехода на сайт? Но вы же должны понимать, что это вызывает негатив, когда ожидания не совпадают с реальностью. Грустно.

Hanna Kuznietsova ha commentato Дмитрий Головцов 3 settimane fa

Дмитрий, Добрый день. Спасибо большое, что обратили наше внимание на это. Мы в рассылку по ошибке вставили неверную ссылку. Приносим свои извинения за это. Статья про геймификацию у нас есть. Ее писал наш СЕО. Вот ссылка: https://stripo.email/blog/gamification-in-email-marketing/ И именно этой статьей мы хотели поделиться в письме. В следующий раз будем тщательнее проверять все ссылки, которыми делимся в письмах.

Potresti essere interessato a

← indietro avanti →
Stripo_Building AMP Emails with Stripo_Featured Image
11 marzo · 21 minuti letti
Diferentes formas de construir emails AMP con Stripo

Aggiornamenti dinamici, contenuti in tempo reale, iper-personalizzazione, un nuovo livello di gamification, possibilità di lasciare valutazioni nei moduli aperti, prenotare riunioni, ecc - tutte queste azioni sono ora possibili direttamente nelle caselle di posta elettronica degli utenti con l'utilizzo di email AMP. C'è bisogno di dire che queste email ravvivano le tue newsletter, danno un tocco di freschezza e novità nelle caselle di posta elettronica degli utenti, e di conseguenza aumentano le conversioni, in alcuni casi di 5 volte? Ma...

Design Modelli How-to AMP
Stripo Notification Emails
01 marzo · 14 minuti letti
​​​​​​​Esempi di Email di Notifica e Linee Guida da seguire

Le email di notifica sono il modo migliore e più semplice per informare i clienti dei cambiamenti che sono avvenuti o che stanno per avvenire. Queste email hanno il più alto tasso di apertura. Ma anche qui abbiamo bisogno di seguire alcune linee guida quando progettiamo le email per non perdere la fiducia degli abbonati. Questo modello di email di notifica è ben strutturato, contiene tutte le caratteristiche necessari Usalo Abbiamo messo insieme i migliori esempi di email di notifica...

Design Marketing How-to
Rimani sempre informato sulle ultime notizie, alle guide, agli articoli e alle tecniche relativi all'email marketing