10 min

Aggiornamento: scopri come personalizzare il preheader nelle versioni più recenti della piattaforma MailUp!

Hai mai notato, quando ricevi un’email, che spesso non vengono visualizzati solo il mittente e l’oggetto, ma anche un breve testo introduttivo? Questo, si chiama preheader, o intestazione, ed è più importante di quanto pensi…

Intestazione - su Gmail - corretta

 

Il preheader è la prima riga di contenuto della tua email e viene visualizzata dalla maggior parte dei client di posta elettronica, subito accanto (o subito sotto) l’oggetto.

Data la sua collocazione d’élite, questa ha una grande responsabilità nella scelta di apertura delle email da parte del tuo destinatario e dovrebbe configurarsi come una sintesi seducente e accattivante dei contenuti interni dell’email che invii: in questo modo potrai anticiparli e invogliare i destinatari a dare un seguito alla loro curiosità.

Intestazione - su mobile

 

Di norma, però, accade che il preheader sia semplicemente la prima riga del testo della tua email e, come spesso succede in caso di DEM o Newsletter, rischia di configurarsi in questo modo:

Intestazione - su Gmail

Un messaggio di questo tipo non è sicuramente quanto vorremmo leggere, se fossimo noi i destinatari! Questo per due motivi:

  1. non fornisce informazioni sul contenuto del messaggio
  2. non invoglia a procedere oltre nella lettura e, anzi, pone già il dubbio che l’email non sarà subito visualizzabile correttamente

Le soluzioni

Nascondere l’intestazione

Per fortuna, il buon vecchio codice HTML ci viene in soccorso e ci consente di aggiungere un preheader al messaggio, nascondendola poi al momento dell’apertura. Dopo numerosi test, e diverse varianti del codice, crediamo di aver trovato la quadratura del cerchio.

Di seguito il codice da inserire all’interno dell’HTML della tua email:

<div style=”display: none !important; mso-hide:all;”>Scrivi qui il testo dell’intestazione!</div>

Fissare a 0 le dimensioni del testo

Sempre utilizzando l’HTML è possibile settare a 0 le dimensioni del testo del preheader, attraverso questa stringa di codice:

<font style=”font-size: 0px;”>Scrivi qui il testo dell’intestazione!</font>

In questo caso, questa seconda soluzione permette di imporre al testo una dimensione nulla (a differenza del primo che lo obbliga a non avere visualizzazione).

E se modificassi solo il colore del testo?

Un’altra azione che puoi intraprendere è quella di modificare il colore del testo rendendolo uguale a quello dello sfondo. Ma ricorda: l’impostazione del testo come trasparente o semi-trasparente può crearti problemi con i filtri antispam (ad esempio Spam Assassin ha una regola specifica per “font a basso contrasto”) e, cosa di non poco conto, non è una considerata una best practice di Web design.

MICROSOFT OUTLOOK

La seconda parte del codice riportato più sopra (mso-hide:all) serve specificatamente per Microsoft Outlook  e ti permette di nascondere il testo dell’intestazione in caso di visualizzazione con questo client di posta elettronica. Il problema sorge nel momento in cui alcuni editor HTML decidono di “ripulire” i codici HTML-non standard (come questo TAG), rimuovendoli autonomamente.

Una soluzione può essere quella di spostare il codice alla sezione HEAD della pagina, creando una classe CSS  e utilizzandola nel corpo (BODY) del messaggio.

Intestazione - HTML

In questo modo, nella sezione HEAD della pagina avrai:

<style>
.preHeaderHide {display: none !important; mso-hide:all !important;}
</style>

E poi nel BODY del messaggio :

<div class=”preHeaderHide” style=”display: none !important;”> Scrivi qui il testo dell’intestazione!</div>

Questo codice richiede alla classe CSS di “prendersi cura” di MS Outlook  e include il CSS inline per Gmail e altri client di posta che lo richiedono.

NB. Dai test effettuati, abbiamo rilevato i seguenti dati in merito alle lunghezze massime per una corretta visualizzazione dell’intestazione:

  • Android Gmail App: 56 caratteri
  • iPhone Gmail App: 83 caratteri
  • Web client Gmail: 97 caratteri

Se dovessi avere problemi con questi soluzioni, scrivilo nei commenti e continua a seguirci per nuovi dettagli e aggiornamenti!

Ti è piaciuto questo articolo? Ne abbiamo molti altri in serbo per te.

Iscriviti ora per rimanere sempre aggiornato sulle novità di email e SMS marketing.

Leggi anche

Email & Mobile: la guida definitiva al design responsive, in un nuovo ebook

Abbiamo fatto ordine tra i diversi aspetti del mobile responsive, per restituirti il contenuto più esaustivo possibile con le tecniche, gli strumenti e le buone ...

Continua a leggere

6 idee per scrivere oggetti irresistibili

Nello scorrere la tua bacheca dei social media preferito o un sito web, qual è l’elemento che più di tutti fa venire voglia di cliccare ...

Continua a leggere

Verso Natale: le ricette vincenti di Email e Messaging

Da qui al 25 dicembre e oltre, ecco le strategie per dare slancio alle vendite di fine anno, sfruttando i canali più immediati di Digital ...

Continua a leggere

Black Friday 2018: Email e Messaging per impennare le vendite

A due settimane dal venerdì di fuoco, abbiamo messo nero su bianco le strategie imprescindibili per scatenare la caccia all’affare, grazie a Messaging Apps e ...

Continua a leggere

4 super campagne di Email Marketing da cui trarre insegnamento

Abbiamo studiato le campagne email di quattro big (BuzzFeed, JetBlue, Dropbox e Rip Curl) per comprendere qual è l'elemento che ne determina il successo. Pronti ...

Continua a leggere

Dolcetto o scherzetto? 9 idee per le newsletter di Halloween

Halloween si avvicina e la casella inbox è già piena di newsletter a tema. Qui trovi 9 idee per dare un irresistibile tocco dark alle ...

Continua a leggere