www.saimexinformatica.com
COME OTTIMIZZARE LA CAMPAGNA EMAIL CON BUON CODICE HTML
GUIDA DI PRIMO SOCCORSO
SULL’USO DEL
EL CODICE HTML NELL’ EMAIL MARKETING
MARKE
Il marketing via email è sicuramente uno dei più potenti ed efficaci strumenti di
promozione. Veloce da implementare, offre risultati immediati
immediati e facilmente
misurabili, oltre ad un elevato grado di segmentazione e personalizzazione e
soprattutto
oprattutto garantisce un alto ritorno dell’investimento
dell
(ROI, Return of investment).
investment)
Ottenere buoni risultati con l’HTML
l HTML nelle email però, è sicuramente una questione
di pratica ed esperienza, bastano pochi errori nell’implementazione
nell implementazione del codice HTML
per rovinare l’intera
intera campagna
campagna ed abbassare notevolmente il ROI.
Questa guida riassume le principali regole da seguire per far sì che la campagna
marketing ottenga i migliori risultati (a livello
l
tecnico).
Il Codice HTML
Crearee buon codice HTML per le email è più complicato che crearlo per pagine web.
web
Per i siti generalmente, i programmatori ottimizzano il codice per un numero
definito di browser, Internet Explorer, Firefox, Safari.
Le email invece
ce possono essere ricevute e quindi mostrate su dozzine di sistemi
differenti,, rendendo molto difficile trovare dei pattern comuni.
Un buon HTML rende
ende le email molto leggibili, attrattive e professionali,
professionali che
ottengono un ROI decisamente più elevato di normali messaggi di solo testo.
Quando invece l’HTML
HTML non è corretto, il risultato è catastrofico, rendendo il
messaggio il più delle
elle volte illeggibile, con layout sballato e in molti casi fa sì che sia
bloccato da sistemi antispam.
Seguono una serie di consigli su “cosa fare” e “cosa non fare” nell’’HTML delle email.
Guida di primo soccorso sull’uso del
el codice HTML nell’email marketing
Pagina 1 di 7
www.saimexinformatica.com
COME OTTIMIZZARE LA CAMPAGNA EMAIL CON BUON CODICE HTML
COSA FARE
Codificare l’HTML
HTML della mail come una singola pagina web, con i tag di base
<html>, <head>, <title> e <body>.
Assicurarsi che ogni tag abbia il suo corrispondente di chiusura! Gli errori più
comuni derivano da un HTML che non contenga i tag </font> di chiusura o
lasci aperti i <td> o <tr>.
<tr>. Questo fa sì che, mentre nei normali browser ci sia
un controllo della sintassi e quindi automaticamente la pagina venga mostrata
mostr
correttamente, nei visualizzatori email invece tutto
tutto il layout ne sia
compromesso.
Testare il codice HTML prima di spedirlo ed assicurarsi (è decisamente
importante farlo!) che sia conforme agli standard W3C.
Codificare possibilmente con strumenti manuali, ad esempio blocco note di
windows, moltii strumenti WYSIWYG infatti generalmente aggiungono codice
e “ottimizzano” quello esistente, producendo spesso risultati indesiderati.
Usare solo caratteri ASCII di base, molti editor e strumenti di word-processing
word
sostituiscono alcuni caratteri con altri non standard, ad esempio le virgolette
virgol
da un lato e dall’altro
altro (al posto di quelle dritte) o gli apostrofi (ce ne sono
due!) e questo potrebbe causare ostacoli nella visualizzazione
visualizzazione dell’email
dell
o
addirittura bloccarne la consegna da parte del server.
L’HTML
HTML della mail dovrebbe essere autosufficiente, cioè non dovrebbe fare
riferimento a file esterni (attenzione, il codice! Non il contenuto).
Se si usa un foglio di stile (CSS) è necessario utilizzare al suo posto il tag
<style> all’interno
interno dei tag <body> (generalmente si mette nell
nell’header, nelle
email invece è importante che sia nel body), molti programmi tendono ad
eliminare la sezione head e i file esterni a cui si fa riferimento.
Utilizzare le tabelle per il layout del contenuto (sui siti generalmente
gener
si
preferisce utilizzare i layer, anche in questo caso la differenza è
fondamentale).
Mantenere la larghezza della mail compresa tra 500-650
650 pixel.
I GIF animati sono ammessi,
ammessi però con molta parsimonia!
Usare
sare le image maps è consentito senza problemi.
Quando si spedisce un messaggio “multi-part” è necessario includere la
versione “solo testo” altrimenti alcuni antispam potrebbero riconoscerlo
come spam.
Guida di primo soccorso sull’uso del
el codice HTML nell’email marketing
Pagina 2 di 7
www.saimexinformatica.com
COME OTTIMIZZARE LA CAMPAGNA EMAIL CON BUON CODICE HTML
COSE DA EVITARE
Mai usare i CSS per posizionare gli elementi, il supporto dei client email in
questo senso è molto scarso
scar e nella maggioranza deii casi il layout risulterebbe
confuso.
Evitare se possibile le tabelle nidificate, alcuni client potrebbero non tradurlo
correttamente.
Assolutamente da evitare l’uso
l uso di Javascript; mentre alcuni client non lo
supportano, altri lo evidenziano proprio come un rischio per la sicurezza.
s
Non usare immagini di fondo, mentre in alcuni casi potreste usarle come
fondo della tabella, tenete
enete presente che in alcuni client
client le immagini di fondo
non vengono mostrate.
Non applicare proprietà al tag <body>. In molti casi questo si traduce in un
maggior punteggio di spam, in altri viene proprio
p
eliminato
liminato il tag.
Non includere le immagini nel messaggio, la dimensione aumenterebbe in
modo inaccettabile,
le, inoltre alcuni antispam non farebbero passare il
messaggio. Utilizzare dei link esterni, richiamando l’immagine
l immagine da una url.
Non usare il tag <embed>.
Non inserire file di flash nel codice html, nemmeno se da link esterni.
(userebbero comunque
omunque il tag embed).
Non includere FORMS da compilare,
compilare, al loro posto inserire un link ad una
pagina web che contiene il form stesso.
Validare il codice HTML ed evitare gli script
La maggioranza delle email in HTML non soddisfa le specifiche del W3C, questo può
dare problemi in fase di spedizione ad esempio su circuiti come AOL, MSN, Hotmail,
ecc… AOL ad esempio ha un filtro che respinge automaticamente le email che non
risultano validabili come standard W3C. Pensate a quanto
quanto questo può influenzare
una campagna di email marketing a livello mondiale!
mondial
Assicurarsi
ssicurarsi inoltre di evitare l’uso di javascript o altri script.
Di solito il codice script serve per automatizzare il documento e renderlo interattivo.
Generalmente questi codici vengono eliminati dalla email e in alcuni casi la mail
ma
viene proprio respinta dall’antispam.
antispam. Al posto di script usare invece dei link ad una
Guida di primo soccorso sull’uso del
el codice HTML nell’email marketing
Pagina 3 di 7
www.saimexinformatica.com
COME OTTIMIZZARE LA CAMPAGNA EMAIL CON BUON CODICE HTML
pagina web che sia realizzata su misura (ad
( esempio una landing page ad hoc per la
campagna) e che sia correttamente visualizzabile dalla maggioranza dei browser.
I FONT
Generalmente bisognerebbe utilizzare solo i font standard, ARIAL e Times New
Roman, nei messaggi email.. ARIAL è un font che è stato creato apposta per aver la
migliore leggibilità sui monitor,
monitor, studi statistici mostrano che gli utenti preferiscono
preferiscon
caratteri come Arial, Verdana o Tahoma quando guardano pagine web o messaggi
email.
In caso utilizziate dei font non standard, sappiate che sul computer di chi visualizza il
messaggio questi font saranno sostituiti
sostitui da caratteri
aratteri diversi, che possono anche
disturbare il layout della email che tanto faticosamente avete creato.
Se proprio dovete usare un font diverso, ad esempio per un marchio o un logo,
potete inserirlo come immagine.
immagine
La grandezza dei font può essere espressa in pixel, punti o un valore
valo in HTML.
Utilizzare font
ont non più piccoli di 10 pixel, 10 punti o grandezza HTML di 2.
I COLORI
In tutto il processo di creazione del messaggio email, anche il colore gioca un ruolo
fondamentale, sia per le immagini che per
pe i font e il layout. Per questo utilizzare i
colori in modo corretto è fondamentale, altrimenti tutto il lavoro di creazione della
dell
campagna potrebbe esserne compromesso.
Ad
d esempio non bisogna mai utilizzare un colore grigio con un altro tipo di grigio
come sfondo,, poiché il tono su tono rende difficile in molti casi la leggibilità del
documento, specialmente in certi client email. Headlines e call-to--action devono
essere ben visibili. In alcuni sistemi i colori molto simili vengono sostituiti con un
colore unico, rendendo di fatto nascosti i testi che dovrebbero
dovrebbero invece essere ben
visibili e con un deciso contrasto.
Uomini e donne reagiscono diversamente ai colori, è quindi importante sapere che
ci sono studi scientifici che dimostrano diversi
diversi gradi di gradimento del testo in base
al colore con cui sono scritti. E’
E importante sapere
apere il target a cui andranno spedite le
email per utilizzare i colori più “amati” dalla categoria selezionata.
Guida di primo soccorso sull’uso del
el codice HTML nell’email marketing
Pagina 4 di 7
www.saimexinformatica.com
COME OTTIMIZZARE LA CAMPAGNA EMAIL CON BUON CODICE HTML
Riporto qui una piccola tabella indicativa dei colori preferiti e di quelli meno favoriti:
Donne
Uomini
Entrambi i generi
Colori Preferiti
Blue, Viola, Verde
Blue, Verde, Nero
La preferenza per il verde
decresce con l’età;
l
La preferenza per il viola
aumenta con l’età.
l
Colori meno favoriti
Arancione,, Marrone, Grigio
Arancione, Marrone, Viola
Con l’avanzare
avanzare dell’età
dell
aumenta il disgusto verso il
colore arancione.
COLORI DI SFONDO
Per migliorare la visibilità del messaggio contenuto nella email, è meglio utilizzare un
fondo bianco o comunque chiaro, contrapponendo
contrapponendo un font di colore scuro e ben
contrastato.
Meglio utilizzare
izzare un colore di fondo in una barra / menu laterale anziché nel fondo
della pagina intera, soprattutto mai utilizzare un colore nel tag BODY, proprio
perché questo
to tag viene rimosso da molti client e in alcuni casi questo potrebbe
dare sia propblemi di lettura,
tura, oltre a causare problemi in caso di risposta al
messaggio (il client di posta potrebbe tenere il colore di fondo scuro con il testo
scuro e causare problemi di leggibilità del testo contenuto).
COLORE DEI FONT
Non usare mai il bianco come colore del carattere. Sebbene possa sembrare
migliore utilizzare un font chiaro con un fondo scuro, per far risaltare il testo, molti
filtri antispam identificano l’’uso
uso del bianco nel testo (#FFFFFF) come un chiaro segno
di spam,, dato che molti spammer utilizzano il bianco come colore per nascondere
del testo nei messaggi email.
email Scegliete con cura, magari con l’aiuto
aiuto della tavola dei
colori, un colore di fondo ben contrastato con il colore del font da utilizzare per
rendere meglio leggibile
ile il vostro messaggio.
IMMAGINI
In molti messaggi email le immagini sono elementi fondamentali, è importante però
che il loro utilizzo sia sobrio e ben progettato:
progetta
Guida di primo soccorso sull’uso del
el codice HTML nell’email marketing
Pagina 5 di 7
www.saimexinformatica.com
COME OTTIMIZZARE LA CAMPAGNA EMAIL CON BUON CODICE HTML
Mai includere le immagini come file nel messaggio, questo
questo comporta solamente un
appesantimento del messaggio stesso e in alcuni casi un blocco della consegna
dovuto ai filtri antispam.
È importante inserire le immagini come risorse esterne, residenti sul vostro server
d’appoggio.
E’ altresì importante utilizzare il tag ALT per specificare cosa mostri
mostr l’immagine. Dato
che in molti casi (ad es. in out look)
look le immagini come
ome tutte le risorse “scaricabili” da
un server, vengono bloccate fino a che l’utente
l
non dà l’assenso
assenso specifico, è
fondamentale far sapere all’’utente cosa ci sia rappresentato nell’immagine.
immagine. Usare il
tag ALT per inserire una breve
brev descrizione dell’immagine.
immagine. Soprattutto se si tratta di
uno sconto o del logo, è importante far capire al destinatario che cosa si vuole
mostrare.
Importante:
In caso di layout complessi è fondamentale l’utilizzo
l utilizzo delle proprietà WIDTH e
HEIGHT, in modo da specificare la grandezza dell’immagine,
dell immagine, altrimenti il layout, se
l’immaginee non viene caricata, viene mostrato in maniera completamente
deformata rispetto a come dovrebbe essere.
Ad es.
<img src=”http://www.companyabc.com/
http://www.companyabc.com/immagine.gif ” width=”75
75” height=”60”
alt=”Titolo Immagine”>
LINKS
Inserire i links nel messaggio email è fondamentale, però è importante farlo
seguendo certe regole, per non incappare in filtri antispam.
Innanzitutto il numero dei link presenti nella email non deve essere eccessivo
rispetto al contenuto testuale non linkato. Qui ilil buon senso aiuta.
E’ necessario inoltre fare attenzione a come si scrive il link, assolutamente da evitare
l’inserimento
inserimento di link con il testo uguale al link stesso:
<a href=”http://www.miosito.com
http://www.miosito.com”>http://www.miosito.com</a>
www.miosito.com</a>
Guida di primo soccorso sull’uso del
el codice HTML nell’email marketing
Pagina 6 di 7
www.saimexinformatica.com
COME OTTIMIZZARE LA CAMPAGNA EMAIL CON BUON CODICE HTML
Perché in molti casi la parte all’interno
all interno della proprietà HREF viene sostituita
automaticamente dai client html e ciò potrebbe sembrare un tentativo di phishing
(un
un testo che in realtà è un link non combacia con il link stesso a cui porterà l’utente
l
che ci clicca sopra).
È quindi preferibile una struttura tipo:
<a href=”http://www.miosito.com
http://www.miosito.com”>Clicca qui per visitare il nostro
ostro sito</a>
Ci sarebbero ancora tante cose da dire, per il momento mi fermo qui.
qui
Spero che troverete interessante questa guida e che vi possa essere d’aiuto
d
per la
gestione delle vostre campagne email.
Un saluto,
Alessandro Salvaggio.
www.alessandrosalvaggio.com
www.saimexinformatica.com
Guida di primo soccorso sull’uso del
el codice HTML nell’email marketing
Pagina 7 di 7
