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

Comprare mailing list: tutte le conseguenze di questa tattica

Se hai iniziato da poco a fare Email Marketing o è da un po’ che ci provi ma ancora non hai ingranato, potresti star valutando ...

Continua a leggere

Migliora la deliverability con l’autenticazione email

Come abbiamo già visto, la deliverability è strettamente legata al concetto di reputazione. Oggi parliamo di autenticazione delle email, che possiamo considerare il lato più ...

Continua a leggere

E-commerce: l’ebook che ti aiuta a vendere online con email e SMS

Scopri come vendere online con email e SMS partendo dalla convergenza dei dati sul tuo e-commerce e utilizzando le informazioni sui clienti per creare flussi ...

Continua a leggere

L’evoluzione della personalizzazione nelle email: il caso Iperal

Perché si parla così tanto di omnicanalità e customer centric method? Continuiamo a leggere articoli focalizzati su omnichannel, single customer view e personalization con evidenze ...

Continua a leggere

Il ruolo del mittente in una strategia di Email Marketing

Il 48,16% di tutte le email inviate nel mondo è contrassegnato come posta spazzatura dai filtri antispam dei provider. Evita che i tuoi messaggi subiscano ...

Continua a leggere

Come la reputazione del dominio del mittente influisce sulla deliverability

Un’email commerciale su cinque non raggiunge la posta in arrivo del destinatario (Return Path). Una tra le principali cause è la reputazione del mittente. Vediamo ...

Continua a leggere