e-mail in html Posts

Outlook 2007 e le e-mail in HTML

Questa settimana con un po’ di difficoltà sono passato da Xp a Vista e da Office 2003 a Office 2007.

Il passo è stato davvero impegnativo anche perchè le logiche di utilizzo sono completamente diverse.

Tralasciando le difficoltà che un utente medio come me può trovare, vorrei postare alcune considerazioni sul nuovo Outlook ed in particolare su come interpreta le e-mail in HTML.

Prima di tutto occorre sottolineare come il nuovo Outlook non utilizzi più il motore di Explorer per visualizzare le email in formato HTML, ma si affidi a…Word.
Questa novità incide in modo notevole sull’aspetto delle e-mail che vengono spedite e che prima venivano visualizzate correttamente, ma che adesso, in alcuni casi, sono illeggibili.

In particolare, da una prima e veloce analisi, è emerso che:

1. I CSS esterni non vengono letti anche abilitando i contenuti esterni
2. Non vengono visualizzate le immagini di sfondo
3. I CSS interni funzionano correttamente
4. L’utilizzo delle tabelle è fondamentale per mantenere il layout invariato

L’impressione è che venga supportato un codice html molto semplice, quasi primitivo.
In ogni caso, creando un codice pulito ed ordinato, basato su tabelle e senza l’utilizzo di CSS si dovrebbe essere in grado di aggirare le problematiche di compatibilità.

Nei prossimi giorni andrò più in profondità con l’analisi e vi farò sapere.

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: 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.