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

4 modi per segmentare i destinatari e inviare email performanti

Un'email uguale per tutti inviata settimanalmente non ti darà risultati 40 volte migliori rispetto ai social media. Vediamo allora 4 diversi modi per segmentare gli ...

Continua a leggere

Email Marketing d’agosto: 6 consigli strategici e 4 trend di Email Design

Tempo di vacanze, da godersi non prima di aver impostato alcune attività: dall’automazione dei flussi alle frequenze, fino ai migliori layout da intonare alla bella ...

Continua a leggere

Come fare Email Marketing nel 2019: i must per una strategia avanzata

Il canale email conoscerà un’ulteriore espansione nei prossimi anni. Restando al di qua di scenari avveniristici, vediamo le attività imprescindibili per fare Email Marketing nell’anno ...

Continua a leggere

Segmentazione + Personalizzazione + Automation: tutto quello che puoi fare con i Filtri

Dopo averteli presentati, vediamo le attività che possono essere condotte con i nuovi filtri di MailUp, per portare la tua strategia di Email Marketing a ...

Continua a leggere

Personalizzare le email: i 2 tool fondamentali

Immagina di inviare email che si compongono automaticamente con i contenuti più in linea per ciascun destinatario. Puoi farlo: scopriamo due funzioni di personalizzazione con ...

Continua a leggere

Come ha fatto Walmart Argentina ad arricchire l’esperienza d’acquisto?

Abbiamo chiesto alla multinazionale di raccontarci come, grazie all’integrazione tra MailUp e VTEX, ha raggiunto un livello di comunicazione ultra-personalizzata per ciascuna fase del rapporto ...

Continua a leggere