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

Come creare il flusso di onboarding per il canale email: dall’iscrizione al benvenuto

Ti guidiamo, passo passo, alla creazione di form, pagine e email con cui gestire l’iscrizione di nuovi destinatari al tuo database, dandogli il benvenuto e ...

Continua a leggere

Vuoi profilare bene? Impara a raccogliere i dati

Da dove partire per profilare le email? Dalla raccolta di informazioni utili sui destinatari. Vediamo allora le possibilità a disposizione delle aziende: profilazione unica, progressiva, ...

Continua a leggere

Zero bounce, 100% recapito. Utopia? No, realtà

Hard bounce. Filtri antispam. Delivery rate. Deliverability. Alzi la mano chi, occupandosi di Email Marketing, non si è mai trovato a fronteggiare queste tematiche in ...

Continua a leggere

Visualizzazione delle email tra i client di posta: sfide e soluzioni

Come brand che sfrutta l'Email Marketing, devi assicurarti che le email vengano visualizzate dai destinatari esattamente come lo hai immaginato. La maggior parte delle email ...

Continua a leggere

6 consigli per dare il boost alle strategie del 2019

Dalla sperimentazione di nuovi canali alle triggering headline, fino alle email interattive. I nostri suggerimenti per iniziare l’anno con il piede giusto, rinfrescando la propria strategia ...

Continua a leggere

5 modi per far crescere la tua mailing list

Non basta chiedere alle persone di iscriversi. Inoltre la tua mailing list perde fisiologicamente il 25-30% dei contatti ogni anno. Serve offrire valore, informazione, utilità ...

Continua a leggere