grafica Posts

Come la grafica influisce sul successo di una newsletter

In questo post vorrei analizzare un dato davvero interessante emerso in una delle ultime newsletter inviate da un mio cliente che opera nell’ambito del condizionamento e della refrigerazione industriale.

Questo cliente è molto attivo nell’ambito dell’e-mail marketing e già da due anni invia ogni mese una sorta di flyer promozionale ad aziende di tutto il mondo.

Con l’edizione di novembre abbiamo proposto al responsabile marketing di cambiare l’approccio della newsletter e di passare da un formato stile volantino ad una e-mail più articolata, con testo, presentazione di prodotti, scheda dell’azienda e una barra di navigazione con le principali aree del sito.

Questo è quanto veniva inviato prima del restyling e questa invece è l’ultima newsletter inviata (per motivi di riservatezza ho nascosto nomi e riferimenti dell’azienda).

La revisione della grafica ha portato a risultati davvero inaspettati. Rispetto alla media dei tre mesi precedenti il clickthrough è aumentato del 52,87%. Il cliente mi ha anche detto di aver notato un notevole incremento di richieste dal sito rispetto ai mesi precedenti, ma purtroppo non me lo ha saputo quantificare (e non ha un sistema di statistiche in grado di dirmelo) :(

E’ importante sottolineare che questa newsletter è stata inviata sempre con lo stesso oggetto e agli stessi indirizzi di quelle precedenti. Infatti il tasso di apertura è rimasto pressoché invariato (+0,31%). L’incremento del clickthrough è quindi da imputare esclusivamente alla nuova impostazione del messaggio.

L’aspetto emotivo conta molto in ogni ambito della comunicazione e a maggior ragione nelle comunicazioni via e-mail. Ogni giorno i nostri clienti ricevono tonnellate di e-mail, riuscire a distinguersi non è facile, ma se ci si riesce il risultato è garantito.

Nella gestione di strategie di e-mail marketing è utile testare sempre formati, grafiche e soluzioni diverse, fino a che non si riesce ad ottenere il miglior risultato possibile.

Guida alla creazione di e-mail in HTML: font, colori e css

Le impostazioni di colori e font e l’utilizzo dei css sono elementi di fondamentale importanza nell’impostazione grafica di una newsletter in html.

Per quanto concerne i font bisogna utilizzare i set standard installati di default da tutti i sistemi operativi. In linea di massima è sempre consigliabile utilizzare i font Arial, Time new Roman, Verdana e Tahoma. Se ci sono necessità particolari legate a questioni di immagine e loghi aziendali che richiedono l’utilizzo di caratteri non standard conviene utilizzare delle immagini, tenendo sempre presente che queste spesso non vengono visualizzate.

Le dimensioni dei font possono essere espresse in pixel, punti o dimensioni html. La mia esperienza mi ha insegnato che conviene utilizzare sempre le dimensioni html che vengono supportate da tutti i client e da tutte le web mail. Questo impedisce di impostare la grafica nel migliore dei modi, ma garantisce la perfetta visualizzazione da parte dell’utente. Per quanto riguarda le dimensioni è consigliabile non scendere mai sotto i 10 punti e i 10 pixel e sotto il size 2 di html.

Anche i colori giocano un ruolo importante. In particolare occorre prestare attenzione all’utilizzo di colori di background. Conviene sempre utilizzare dei colori di sfondo chiari che facilitino la lettura del messaggio, abbinandoli a colori dei font scuri. Procedendo in questo modo si evita anche un altro spiacevole inconveniente che si verifica con le web mail: queste tendono ad eliminare i colori di sfondo. In questa situazione, se si usassero dei colori di sfondo scuri abbinati a colori dei font chiari, in caso di eliminazione del background, il testo chiaro rimarrebbe su sfondo bianco risultando illeggibile. Lo stesso problema si può verificare anche con Outlook inoltrando l’e-mail ricevuta.

Per quanto riguarda i colori dei font, come già detto, è consigliabile utilizzare dei font scuri. Assolutamente da evitare il testo bianco, anche su sfondi scuri. Alcuni filtri antispam interpretano il testo bianco come un tentativo di nascondere del contenuto al destinatario del messaggio e marchiano il messaggio come spam.

I fogli di stile rappresentano un vero rompicapo per chi vuole creare una e-mail in html. Le principali webmail tendono ad eliminarli, mentre i client sembrano essere più permissivi. Se si scegli di utilizzare i fogli di stile conviene sempre utilizzarli in linea ed inserirli non nell’head come avviene per le pagine html ma all’interno del tag body. La scelta degli stili in linea dipende dal fatto che se vengono utilizzati stili esterni questi vengono bloccati come le immagini sia dai client che dalle web mail. La scelta di inserirli nel tag body dipende invece dal fatto che i server di posta tendono a tagliare gli header e tutto il loro contenuto.

La tabella di seguito riassume la visualizzazione degli stili da parte delll principali webmail:

Gmail Hotmail Yahoo Libero Outlook
Stili in linea x v v x v
Stili in linea applicati al tag v v v x v
Stili Esterni x x x v v
Font html v v v v v

Come emerge dalla tabella comparativa il modo miglior per non perdere la formattazione dei testi è quella di utilizzare i font html. In alternativa è possibile studiare il modo per integrare degli stili in linea applicati al tag e degli stili esterni.

Se la tabella non è chiara ho fatto un semplice esempio di newsletter inviata alle varie caselle di posta ed eseguito degli screenshot del codice, della visualizzazione corretta e di come viene visualizzata nelle varie webmail.

L’importante è testare al meglio il codice prima di ogni invio per trovare la soluzione più soddisfacente possibile.

Guida alla creazione di e-mail in HTML

OK, avete ragione sono stato un po’ latitante in questi ultimi giorni, ma mi sto organizzando per proporvi nuove iniziative sperando possano essere utili e interessanti.

La prima di queste è una guida alla creazione di e-mail in HTML basata sulle best practice comunemente suggerite dagli esperti di settore e sulle mie esperienze personali.

L’e-mail marketing rappresenta oggi lo strumento di marketing più potente ed efficace in quanto offre immediati e misurabili risultati, elevate possibilità di segmentazione e personalizzazione e consente di raggiungere elevati ritorni sugli investimenti. Tuttavia per raggiungere buoni risultati occorre acquisire esperienza, perchè piccoli e banali errori nella redazione dell’e-mail in HTML possono compromettere gli esiti delle campagne.

L’idea della guida nasce proprio per fornire una traccia su come compilare al meglio una e-mail in HTML che sia efficace in termini di marketing. La guida sarà articolata in vari capitoli sviluppati come segue:

  1. Codice HTML;
  2. Font e colori e fogli di stile;
  3. Immagini e problematiche connesse al blocco dei contenuti;
  4. Link;
  5. Dimensioni del layout e del messaggio;
  6. Contenuti e Copywriting;
  7. Formati e versioni;
  8. Accorgimenti e utilità.

Mano a mano che scriverò i capitoli della guida procederò ad aggiornare questo post che rimarrà come traccia e indice.

Nel frattempo se avete domande specifiche sulla corretta formattazione dei messaggi potete postarle nei commenti di questo intervento oppure inviarmele per posta elettronica, così potrò inserire le risposte nei capitoli corrispondenti.

Sfruttare il riquadro di anteprima: due esempi pratici

Colgo lo spunto datomi in un commento per postare due esempi pratici di layout di email da analizzare.

In particolare voglio porre l’attenzione sull’importanza, già evidenziata in questo post, della disposizione dei contenuti all’interno del messaggio per sfruttare il riquadro di anteprima del client di posta.

Caso 1 : lastminute.com

Le newsletter di lastminute.com puntano molto sull’aspetto grafico e propongono ad ogni uscita layout davvero accattivanti. Questa scelta comporta l’utilizzo di molte immagini all’interno del messaggio che possono venire bloccate dai client di posta dei destinatari. L’effetto al ricevimento dell’email è il seguente:

Il destinatario, in questa situazione, non è in grado di vedere nulla del contenuto dell’email e potrebbe essere incentivato a chiuderla senza leggerla, contribuendo ad abbassare i tassi di click sull’e-mail.

Caso 2 : expedia.com

La newsletter di expedia è invece caratterizzata da una grafica molto essenziale, quasi sempre uguale. All’inizio dell’email c’è sempre un cappello introduttivo che sintetizza i contenuti del messaggio. Il risultato di questa scelta stilistica è il seguente:


Come è evidente, il destinatario, anche con le immagini disabilitate riesce comunque a capire cosa gli viene proposto e se il testo del capello è efficace può invogliare il destinatario a proseguire nella lettura, aumentando i tassi di risposta.

In conclusione

Nel valutare la scelta del layout delle vostre e-mail tenete sempre in considerazione cosa vedrà il destinatario. Scegliete un’impostazione grafica che vi permetta di inserire il più in alto possibile i contenuti dei vostri messaggi e non optate per delle intestazioni grafiche troppo grandi. Il testo che andrete ad inserirte in testa all’email dovrà essere sintetico ma molto efficace, indicando gli argomenti trattati nel messaggio.

Disclaimer: Non ho rapporti commerciali o di affiliazione con nessuna delle aziende citate. I marchi sono di esclusiva proprietà delle aziende stesse. Le email sono state utilizzate solo a titolo di esempio e di stimolo alla discussione senza nessuna intenzione di danneggiare o diffamare le aziende citate. Per ogni reclamo potete contattarmi al mio indirzzo di posta elettronica.

E-mail e stili CSS

Un interessante articolo scritto da Alessandro Fulciniti per html.it spiega come utilizzare gli stili nella realizzazione di e-mail in html.

Lo stesso autore segnala un articolo in inglese in cui vengono pubblicate delle tabelle di compatibilità (file pdf) degli stili con le principali web mail e con i più utilizzati client di posta.

I consigli e le tecniche consigliate sono molto interessanti e dell’utilizzo degli stili in linea ne avevo già parlato anch’io qualche tempo fa.

Nella mia esperienza ho avuto modo di constatare che l’unico modo per rendere il più possibile compatibile un’e-mail con client e web mail è quello di utilizzare i tag html.

Se da una parte questa soluzione non permette molti virtuosismi grafici, rendendo molto rigida la scelta dei caratteri, soprattutto per quanto riguarda le dimensioni, dall’altra garantisce che il messaggio non subisca grosse variazioni nella formattazione.