ottimizzazione Posts

Ho raddoppiato gli iscritti alla newsletter

Ebbene si, sono riuscito a raddoppiare gli iscritti alla mia newsletter in due settimane. Forse a tanti di voi questo interesserà relativamente, ma è interessante sapere come questo sia successo.

Chi mi segue da un po’ di tempo ed è attento agli elementi grafici di questo blog ha potuto notare che, da circa due settimane, il box di iscrizione alla newsletter ha cambiato posizione e aspetto grafico.

Il box precedente era questo:

E appariva nella colonna laterale di destra come ultimo elemento grafico della pagina come si può vedere da questa immagine.

Questa sistemazione però lo rendeva poco visibile e accessibile allora ho deciso di dargli maggiore rilevanza sostituendolo con quello attuale:


E sistemandolo in alto, come primo elemento grafico del blog nella colonna di destra, aggiungendo alcune semplici caratteristiche della newsletter (gratuità, mensilità e contenuto).

Questa semplice modifica mi ha portato a raddoppiare il numero degli iscritti che fino al giorno dell’aggiornamento del blog si erano registrati per ricevere la newsletter mensile.

I test su questo elemento così importante non sono finiti, ne ho già programmati altri due che presto metterò in linea….e ovviamente vi terrò informati sui risultati ;)

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: Il Codice HTML

La correttezza del codice HTML nelle e-mail assume un’importanza fondamentale perché influisce in positivo o in negativo sull’esito della campagna in termini di tassi di risposta e tassi di consegna.
Una e-mail bene formattata e leggibile è sicuramente più invitante per il destinatario che, probabilmente, sarà più portato a compiere almeno un’azione (click). D’altra parte, errori di formattazione del messaggio possono influire anche sui tassi di consegna in quanto sono maggiormente suscettibili di essere bloccati dai filtri antispam.

Detto questo passo ad analizzare alcuni aspetti che sono da tenere in considerazione nella realizzazione di una e-mail in html:

  1. Scrivere il codice esattamente come se fosse una pagina web, con tutti gli header e avendo cura di chiudere tutti tag che vengono aperti;
  2. Se si hanno le competenze per farlo, è opportuno editare il codice a mano con un editor testuale. Gli editor WYSIWYG (What You See Is What You Get) hanno il difetto di “inquinare” il codice con tag inutili che appesantiscono l’e-mail. Lo stesso vale per ambienti di sviluppo come Dreamweaver, Frontpage o Homesite;
  3. Se possibile utilizzare solo ed esclusivamente i caratteri contenuti nel set ASCII. Caratteri particolari o speciali influiscono spesso nella valutazione del punteggio dei filtri antispam;
  4. Evitare se possibile l’utilizzo di CSS in qualsiasi forma, ma di questo parleremo nell’apposita sezione;
  5. Le tabelle per le email non sono superate, anzi, rappresentano l’unico modo per impostare correttamente il layout. Evitare tuttavia le tabelle nidificate che spesso non vengono interpretate correttamente dai client di posta;
  6. La dimensione del messaggio deve avere larghezza fissa compresa tra i 500 e i 650 px. Io consiglio di optare per una dimensione standard di 600px che ben si adatta ai client e alle webmail;
  7. Prestare attenzione alle immagini e ai colori di background che spesso non vengono visualizzati correttamente;
  8. Evitare di inserire nelle e-mail script, flash e form, iframe che vengono bloccati dai client;
  9. La mappatura delle immagini è di regola supportata;
  10. Inviando messaggi multipart è sempre opportuno non lasciare la parte text vuota, perché i filtri antispam effettuano controlli sulla percentuale delle due parti e marchiano come spam i messaggi con prevalenza della parte HTML;
  11. Le immagini embedded aiutano a mantenere una corretta impaginazione del messaggio, ma spesso non vengono visualizzate correttamente e influiscono sul peso complessivo del messaggio. Occorre quindi valutare attentamente il loro impiego;
  12. Non inserire testi e contenuti importanti per il messaggio nelle immagini. Queste infatti vengono sempre bloccate dai principali client di posta che ne impediscono la visualizzazione al destinatario;
  13. Evitare di inserire attributi nel tag body. In particolare, l’attributo background non sempre viene visualizzato correttamente, influendo in modo decisivo sull’aspetto grafico del messaggio.
  14. Quando si inserisce un link in una e-mail è sempre consigliabile mettere nel codice l’attributo target ed assegnargli il valore _blank. Questo è utile soprattutto per chi legge la posta tramite la webmail. Facendo aprire il link in una nuova finestra si evitano spiacevoli situazioni di siti che si aprono nei frame della webmail.

Una volta completata la redazione del messaggio in html è consigliabile validarlo per renderlo compatibile agli standard W3C. Questo consente di diminuire i rischi dovuti al filtraggio da parte degli antispam e garantisce una corretta visualizzazione del messaggio.

Lo sviluppo del codice html per le e-mail richiede molta più attenzione di quanto non ne richieda lo sviluppo del codice per una pagina web. Basti pensare che una pagina web può essere testata su tre browser (Explorer, Firefox e Mozzilla) che coprono la quasi totalità del mercato. Per le email la situazione è ben diversa, basti pensare ai vari client di posta (Outlook, Outlook Express, Lotus Notes, Aol) e alle numerose webmail. Ognuno di questi strumenti interpreta il codice diversamente e richiede attenzione in fase di sviluppo per rendere l’e-mail compatibile.
E’ opportuno quindi crearsi almeno un account di posta per ognuno dei principali ISP (Yahoo, Hotmail, AOL, Gmail) e verificare come il messaggio verrà visualizzato. Lo stesso si dovrà fare con i client, almeno con quelli più diffusi.

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.