Ricevi aggiornamenti
su Messenger
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

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

Riattiva i contatti dormienti del tuo e-commerce: la strategia in 5 step

Ti spieghiamo come recuperare clienti – dunque conversioni e vendite – del tuo store online. Alla scoperta delle strategie di Email Marketing dedicate alla riattivazione ...

Continua a leggere

Nessuno apre le tue email? Inizia a lavorare sul subject

L'Email Marketing resiste con successo da oltre due decenni. In effetti, sembra che l'Email Marketing sia più forte che mai, raggiungendo un ROI medio del ...

Continua a leggere

Cosa rende un’email davvero geniale? 7 fattori

Oggetto, focus, follow-up e altro ancora. Ecco 7 indirizzi operativi per creare email geniali, efficaci e incentrate sul cliente. Ogni volta che qualcosa di nuovo arriva ...

Continua a leggere

Come Iperal ha incrementato del 30% i clic nelle email

Abbiamo chiesto alla realtà della Grande distribuzione di raccontarci come ha raggiunto performance di Email Marketing nettamente superiori alla media di settore. Nel nostro blog spesso ...

Continua a leggere

Ci sono 5 ottimi motivi per inserire video nelle tue newsletter

Il formato video rappresenterà oltre l'80% del traffico web totale entro il 2019: se come motivazione non bastasse, ecco 5 ragioni per integrare il potenziale ...

Continua a leggere