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.

Alessandro Binello

Nasco SEO, mi appassiono di email marketing e oggi sono project manager presso Time2marketing. Mi occupo di visibilità online e strategie di email marketing. Su social network e forum mi trovate anche con il mio nick name storico "Trimball". Nel tempo libero amo viaggiare... nel mondo reale ;)

7 Commenti

luca

Chi sono4 anni ago

scusate la profonda ignoranza ma questo scoglio della mail in html non riesco a superarlo. il codice lo creo senza troppi problemi e poi ?!?!? lo copio ed incollo nella mail ?!?! mi invia sempre e solo il codice così come l'ho scritto senza alcuna intermpretazione.. immegino che il mio errore sia di una stupidità infinita ma purtroppo son ceco e non lo vedo vi prego aiutatemi !!!!!!

Rispondi

raffaele

Chi sono5 anni ago

ciao, innanzitutto complimenti per l'intero blog, ricco di spunti interessanti.. io sto provando ad inviar e una mail in html scritta con dreamweaver (perchè non saprei fare altrimenti) anche se sono partito da un template scaricato in rete.. ho inserito diversi link all'interno della mail e mi funzionano bene tutti eccetto uno: quando creo un modello in Thunderbird, in modo da poterlo inviare tutte le volte che ne ho bisogno, inserisco tutto il codice html, così come è in dreamweaver.. ovviamente tutti i link sono scritti :http://www.dominio.com/link.html e, anche in thunderbird funzionano bene.. uno soltanto, e non capisco perchè, nonostante io l'abbia scritto inserendo l'indirizzo completo, viene tranciato al solo nome della pagina (per intenderci "link.html) e, pertanto, quando ci si clicca, non funziona.. ho inserito il target _blank ma nonostante questo, nada de nada... tral'altro si tratta di un link che punta ad una pagina del mio sito dov'è riportata la stessa mail.. l'ho fatto per evitare che un client di posta possa non leggere correttamente e pertanto che la mail non sia leggibile.. ovvio che se quel link non funziona, mi perdo questa possibilità.. non so se sono stato sufficientemente chiaro.. spero comunque tu possa aiutarmi rafa ;)

Rispondi

Alessandro

Chi sono5 anni ago

Ciao Raffaele, posso ipotizzare che sia un problema di codice HTML, ma senza poterlo vedere è difficile capire il problema ed individuare una soluzione. Guardando il codice sorgente del file sei sicuro che il link sia scritto correttamente?

Rispondi

Davide Rosi

Chi sono7 anni ago

Grazie mille per gli utili consigli..

Rispondi

Alessandro Binello

Chi sono10 anni ago

Partiamo dal presupposto che non esistono editor WYSIWYG che scrivano bene il codice.

Detto questo il consiglio è quello di scrivere il codice con un editor di testo in modo da avere il controllo sulla pulizia del codice stesso.

Inviare email con outlook è possibile, ma considera alcuni limiti. In particolare non puoi inviare lo stesso messaggio a troppe persone. Se hai un centinaio di contatti magari ci riesci anche, ma se sono migliaia?

Altro problema è quello dell'utilizzo dei campi cc e bcc della mail: se inserisci troppi destinatari in questi campi rischi di essere classsificato come spammer e la tua email non arriverà a destinazione

Rispondi

Anonymous

Chi sono10 anni ago

Ma una applicazione WYSIWYG che scrive codice bene per email ? Se le mando con Outlook ?

Grazie.

Rispondi

Sly

Chi sono11 anni ago

Ebbene, ho appena scoperto quanto ignorante sono riguardo alle mail.

Rispondi

Lascia il tuo commento

E tu cosa ne pensi? Lascia il tuo commento