Specifiche per la creazione di email html

Guida per la creazione di messaggi compatibili, efficaci e ad alta deliverability

Queste che seguono sono regole non tassative, nel senso che alcune possono non essere rispettate. Nell'insieme costituiscono una buona prassi per assicurare messaggi efficaci, compatibili con la maggiorparte dei client e ad alta deliverability (tasso di recapito nella inbox, e non nella Posta Indesiderata / Spam Folder).

1. Oggetto del messaggio (subject)
2. Corpo del messaggio
3. Suggerimenti generali
4. Suggerimenti per l'impaginazione e l'HTML

Versione documento: v012
Revisione: Nazzareno Gorni
Aggiornato al: 07 Luglio 2011

Introduzione Questo documento nasce dall'analisi e dell'esperienza dei tecnici MailUp, che negli ultimi 9 anni hanno visto uscire dai server di invio diversi miliardi di email, inviate dai Clienti MailUp. I filtri antispam più evoluti stanno incentrando sempre di più i loro criteri nella valutazione della reputazione del server di invio, e sempre meno sull'analisi dei contenuti (che è a maggior rischio di errore / falsi positivi). A questi alcuni aggiungono l'analisi dell'engagement. Due motivi in più per scegliere MailUp per inviare i propri messaggi email. Nonostante questo, anche il modo con cui il messaggio è scritto, compreso il suo contenuto, può essere determinante per riuscire ad arrivare nella Inbox, evitando di finire nella Posta Indesiderata / Junk Folder .

Premessa: (0,48 punti) Cosa significa? In alcuni casi viene evidenziato il numero di punti collezionati se vengono violate le regole. Ogni elemento (detti token) preso a se stante non è particolarmente critico, però fa perdere qualche punto, possiamo pensare per capire meglio ai punti della patente. Quando la somma dei punti di un messaggio raggiunge una soglia critica (tipicamente 5.0), il messaggio viene bollato come spam e viene bloccato oppure recapitato nella casella Posta Indesiderata / Spam Folder. I filtri antispam spesso ragionano con criteri basati sulla lingua anglosassone, quindi attenzione a parole apparentemente innocenti (come "date"), che in inglese assumono un significato diverso. Se negativo significa che sono elementi che sono favorevoli, in quando riducono il punteggio totale!

A) Oggetto del messaggio (subject)

Insieme al nome del mittente, l'oggetto è fondamentale per assicurare elevati tassi di apertura e quindi di click.

1. Il subject è bene sia di massimo quattro parole (evitando, se è possibile, di inserire accenti o apostrofi che potrebbero non essere visualizzati correttamente dal destinatario della campagna). Si raccomanda inoltre di non superare i 35 caratteri, spazi inclusi; questo migliora i tassi di apertura. Possibilmente non generici, tipo "Newsletter di Giugno".
2. E' consigliabile indicare sempre il nome della società/sponsor. Questa procedura, infatti, consente di fare "branding" dando così visibilità alla marca. In alternativa il brand può essere spesso inserito nel nome del mittente (es. Fiat by Virgilio);
3. Si suggerisce, inoltre, di ideare un subject che in qualche modo invogli il destinatario ad aprire l'e-mail. Dovrà, tuttavia, essere assolutamente veritiero e non contrastare con quanto indicato all'interno della mail; pena scarsi open rate sui successivi invii.
4. Non utilizzare caratteri accentati, ma sostituirli con gli apostrofi (es. non "à" ma a'), evitare caratteri speciali come ; & < >; assicurarsi in alternativa di aver impostato il corretto set di caratteri (charset).
5. Non usare caratteri tutti in maiuscolo; (0,48 punti)
6. Non usare punti esclamativi ripetuti.
7. Non usare un oggetto vuoto (0,34 punti)
8. Non mettere FREE in lettere maiuscole (0,43 punti)
9. Non iniziare con una quantità di dollari (es. $100.00) (1,10 punti), o con "Free" (0,30 punti), o con "Hello" (1,58 punti)
10. Non mettere GUARANTEED (0,62 punti)
11. Non iniziare con lo username (cioè la parte che viene prima della @ nell'indirizzo del destinatario) (2,86 punti), mentre usare il nome o il cognome dell'utente può premiare nei casi di caselle affollate (es. "Nazzareno, ")
12. Non mettere tanti spazi bianchi (2,64)
13. Evitare se possibile punti esclamativi o interrogativi (solo 0,10)
14. Usare la parola "list" (-0,22 punti)
15. Usare la parola "news" (-0,62 punti)
16. Usare la parola "in review" (-1,00 punti)
17. Usare indicatori di frequenza (numeri, mese... in inglese) (-0,48 punti)
18. Usare una data (in inglese) (-1,60 punti)

B) Corpo del messaggio

1. Il file contenente il messaggio deve essere in formato HTML (senza JavaScript, ActiveX e CSS, e preferibilmente senza Flash); se proprio indispensabile l'uso dei CSS, cercare di definire gli stili "inline" all'interno del codice, e comunque rispettare le limitazioni imposte da Outlook 2007 sulla gestione delle email e la deliverability;
2. Il peso del file non deve essere superiore a 50kb (max 60kb), comprese le eventuali immagini in formato gif/jpeg. Le immagini molto grandi andrebbero divise in due o più parti e poi composte usando una tabella;
3. Assicurarsi che tutti i link/action funzionino all'interno dell'e-mail;
4. Si consiglia, inoltre, di utilizzare un formato non superiore ai 600 pixels di larghezza, ideale se 560pixel, in modo da consentire all'utente la visualizzazione del messaggio nella prima schermata visibile (no scrolling orizzontale, comunque non oltre i 640 pixel di larghezza);
   
5. Considerare che su un celluare / smartphone come il Blackberry o i Nokia, le email vengono inizialmente scaricate solo nella loro primissima parte (da 3 a 6 righe) e vengono tradotte automaticamente in formato testo, con eventualmente l'allegato html. Nelle primissime righe quindi devo già mettere le informazioni rilevanti, in grado di stimolare l'interesse all'apertura completa del messaggio.
6. In alcuni casi è consigliabile indicare il numero telefonico e/o l'email del customer service;


7. Non usare background diverso dal bianco;
8. Non usare immagini come sfondo, ne' di pagina ne' di tabella, o limitarle a sezioni non determinanti per la comprensione del messaggio (alcuni client non le visualizzano);
9. Non posizionare le immagini utilizzando coordinate (X-Y);
10. Non includere attributi "low source";
11. Non includere attributi di "roll-over";
12. Non usare comandi di "area shape";
13. Non scrivere testo di colore bianco;
14. Non includere popup.
15. I link tevono avere il tag _blank per aprire in una pagina esterna; senza si rischia di aprire il proprio sito all'interno di un frame di un sistema webmail.
16. Inserire un numero di link preferibilmente inferiore a 10;
17. Le immagini dovrebbero avere un nome rappresentativo, non generico tipo 1.gif, 2.gif;
18. Non utilizzare il tag
    in particolare con posizionamento assoluto;


19. La sintassi HTML del messaggio deve essere rispettata e valicata (v. il validatore html W3C);
20. Gli attributi dei link (es. class, name) devono essere posti alla fine, dopo href="...";
21. Le scritte font e size devono avere un valore assoluto (es. size=2, non size=+1); allo stesso modo non può esserci color=red;
22. Non usare font di dimensione eccessiva (es. 4);
23. Nel caso la landing page sia in flash, è importante sia disponibile anche una versione in HTML;


24. Evitare l'uso di simboli speciali come < > & €, oltre che simboli speciali come i tre punti di sospensione di word;
25. Evitare link numerici (http://81.88.224.244/default.asp);
26. Evitare link su domini .info e .biz; anche il mittente è bene che non sia di questo tipo;
27. Evitare una percentuale molto alta di immagini rispetto al testo (un po' di testo deve esserci sempre);
28. Evitare, dove possibile, il link mailto:;
29. Evitare il testo spaziato (s p e c i a l e)
30. Inserire una firma, senza righe vuote (-0,30 punti)
31. Inserire una firma, con righe vuote (-2,09 punti)
32. Inserire una firma molto lunga (-3,13 con righe vuote, -0,30 senza)
33. Inserire qualcosa che sembri un messaggio quotato (-0,83)
34. Non asserire che la legge sullo spam viene rispettata, esempio citando articoli di legge come "House Bill 4176" o "H.R. 3113". Solo gli spammer lo scrivono generalmente (da 1 a 3,48 punti di penalizzazione).
35. Mettere sempre un testo alternativo (ALT) sotto le immagini significative (es. loghi, titoli, banner);
36. Il pulsante che invita all'azione non deve essere grafico, ma testuale;
37. Il file html deve contenere un'intestazione completa di doctype declaration;
38. Il title deve essere diverso da quello di default proposto dai comuni editor html (quindi diverso da 'Untitled' o 'New page');
39. Le parti testuali non devono essere tutte collegate a link;
40. Non mettere come testo l'url del link. Ad esempio, evitare link del tipo www.mailup.it. Il filtro anti-phishing di Thunderbird infatti potrebbe segnalare come sospetto questo link, nel caso l'indirizzo sottostante non sia esattamente quello oppure se, nel caso il link venga tracciato con MailUp, il Cliente non abbia un host personalizzato (es. newsletter.company.it invece che "company.mailupnet.it"). Al suo posto, usare un testo: Sito MailUp.
41. Controllare che tutti i link siano corretti (ad esempio utilizzando il controllore di link W3C: http://validator.w3.org/checklink )
42. Utilizzare solo tag di markup XHTML come p, b, em, li, ul, img, etc...
43. Nel caso di invio di immagini embedded (incorporate nel messaggio - MHTML), si suggerisce di evitare percorsi o nomi delle immagini che contengono spazi. Questi vengono tradotti in %20 e a volte non sono poi correttamente visualizzate nei client di posta, come Thunderbird v2.0. Se l'immagine è di tipo gif, cercare di evitare nomi più lunghi di 8 caratteri (2.4).
44. Ci sono diversi tag che possono risultare superflui e rimossi automaticamente dal server ricevente, sopratutto i client web, tra questi: <META>, <HEAD></HEAD> <BASE> <LINK> <SCRIPT></SCRIPT><TITLE></TITLE> <APPLET></APPLET><FRAMESET rows="*,*"><frame src="../../sito Mailup"><frame src="../../sito Mailup"></FRAMESET><noframes></noframes> <FRAME> <IFRAME></IFRAME>
45. Togliere la toolbar che appare sulle immagini superiori di 200 x 200 pixel, inserendo nel tag img questa istruzione galleryimg="no". Non è una cosa critica, ma rende la lettura su client Internet Explorer più fluida.
46. Usare se possibile indirizzi brevi, si eviterà il rischio che vengano troncati. Il limite di solito è di 75 caratteri per riga, nei client testuali. Ci sono anche servizi che consentono di accorciare l'URL come Snipurl e Tinyurl. Attenzione però perché questi sistemi di URL shortner possono essere abusati da spammer, quindi possono avere una reputazione tale da causare il blocco del messaggio.
47. Se fondamentale l'uso dei CSS (fogli di stile), inserirli inline nel codice, es: <td style="font-family: Verdana, Arial, Helvetica... Per le tabelle in particolare, per essere sicuri che non vengano interpretate con il CSS del sito del sistema ricevente, inserire sempre uno stile in ogni cella. I link ad esempio possono contenere tutti l'attributo "text-decoration: underline", in modo che risulti chiaro sempre che si tratta di link.
48. Attenzione perchè Gmail e Yahoo possono assegnare un loro stile predefinito ad alcuni testi, anche se non sono link, collegandoli automaticamente. Ad esempio mario@esempio.com, www.esempio.it, prova.esempio.com si trasformeranno automaticamente in link, con uno stile di default del portale.
49. Usare il title="Prova Prova Prova" sia nei tag delle immagini, sia nel tag dei link. Questo mostrerà un tooltip al passaggio del Mouse.
50. Preferire il tag <BR> al tag <P>. Quest'ultimo infatti in diversi sistemi genera uno spazio eccessivo, e in altri è addirittura rimosso.
51. Spaziare le tabelle: è preferibile usare uno spacer (immagine trasparente di un pixel) invece che uno spazio come questo <td width="50"></td>. La preferenza è legata alla visualizzazione, non ai filtri antispam.
52. Il background dovrebbe essere bianco, se diverso andrebbe impostato in alternativa come sfondo di tabella 100%x100% e non come body.
53. Tenere il codice pulito, senza tag ridondati. Un possibile servizio di puliza, gratuito, è http://infohound.net/tidy/
54. Evitare di inserire URL con più di 5 caratteri esadecimali consecutivi (es. example.com/34def8/page.html)
55. Evitare di inserire parole critiche, che possono penalizzare il punteggio (vedi elenco spam words)

C) Suggerimenti generali

1. Poiché a inizio lettura l'attenzione dell'utente è massima è preferibile che le prime 3/5 righe siano tali da catturarne la sua attenzione, incentivandolo così ad approfondire la lettura o a compiere un'azione, come cliccare sul link; sui sistemi di posta, inoltre, tipicamente i primi 300 pixel vengono visualizzati nell'anteprima del messaggio.
2. Le righe successive potranno invece avere una funzione maggiormente ausiliaria. Costituiscono la seconda chance dello sponsor e danno informazioni aggiuntive sul prodotto/servizio che si desidera comunicare.
3. Non usare Word per scrivere il proprio messaggio. Se inevitabile, incollare il codice con l'apposita funzione (Copia e Incolla da Word, eliminando i tag superflui e non standard). Ci sono diversi altri editor HTML, che sono valide alternative a Word:
   1. Macromedia Dreamweaver (editor visuale / 30 giorni gratuiti)
   2. PSPad (editor generico / gratis)
   3. Intype (editor di codice / gratis)
   4. NVU (editor visuale / gratis)
   5. Codetch (editor visuale, estensione di Firefox / gratis)
4. Provare sempre un invio, possibilmente su più sistemi sia web based (Hotmail, Gmail...) sia client software (recenti e non: http://browsers.evolt.org/?ie/)
5. Impostare il record SPF, in modo da autenticare il mittente difronte ai server che ricevono. Leggi le istruzioni per impostare l'autenticazione SPF. Alcuni sistemi antispam infatti, se il mittente non è autenticato, aggiungono **SPAM** all'oggetto dell'email prima del recapito.
6. Il pulsante di azione (acquista, iscriviti, visita...) deve essere disponibile anche in formato non immagine e ben visibile.

D) Suggerimenti generali per l'impaginazione e l'HTML

1. Le immagini devono essere nel formato jpg o gif (può essere anche una gif animata). Si sconsiglia di inserire immagini con una mappa di link. Tipicamente se si tratta di loghi, schermate, schemi è consigliabile usare le GIF (che pur avendo solo 256 colori, offrono in questo caso una resa nettamente migliore e un peso minore. Se invece si tratta di foto (paesaggi, persone…) contenenti sfumature, tipicamente la resa migliore si ha utilizzando il JPG, magari con un fattore di compressione un po' elevato (sopra il 30). Il JPG infatti, oltre ad avere 16 milioni di colori, ha una compressione migliore in caso di sfumature;
2. Le gif animate non vengono visualizzate come animate su Outlook 2007: viene visualizzato solo il primo frame. Tenerne conto nella realizzazione dell'animazione.
3. Nel caso di utilizzo di mappe di link (quando ad esempio su una sola immagine si vuole posizionare diversi link in aree diverse, cosa possibile facilmente all'interno dell'editor MailUp), è importante che il codice MAP sia all'interno dei tag . MailUp li posiziona automaticamente all'interno. Attenzione però a Hotmail, che non supporta più i link map: cliccando non avverrà nulla.
4. I fogli di stile vanno limitati il più possibile. Nel caso si intenda usarli, rispettare il requisiti imposti da Outlook 2007
   Si consiglia inoltre di inserire lo stile sia come CSS interno (compreso tra i tag style nella head) sia come file esterno (caricato su un server e poi linkato all'interno del file, il CSS esterno dovrà essere linkato all'interno del body, non nella head); questo però non garantisce la massima compatibilità, perchè spesso i sistemi di webmail rimuovono sia tutto il contenuto all'interno di sia eventuali css esterni. Il metodo più sicuro - ma più macchinoso - è inserire i CSS inline, ad esempio: <td style="font-size: 11px; background: #1c2815 none; line-height: 18px; font-family: Georgia, Times, serif; color: #fff; text-align: center;">
   oppure
   <p class="intro" style="font-size: 18px; padding: 0 36px 9px;"> <li style="margin: 18px;"><a href="http://www.mailup.it/" style="font-weight: bold; background-color: transparent; color: #900;">
5. Nel caso che un testo abbia come sfondo, evitare di scriverlo in bianco, o dello stesso colore dello sfondo del "body". Questo sia per evitare problemi di filtri antispam, sia perché, se l'immagine di sfondo non viene visualizzata, il testo risulterebbe illeggibile;
6. Evitare le lettere accentate (come è, à, ò, ì), e preferire la vocale non accentata seguita da apostrofo (quindi e', a', o', i'), oppure con gli specifici codici html (es. à). Fare attenzione ai caratteri di Microsoft Word (es. le virgolette, i puntini sospensivi, i trattini e gli apostrofi di Word sono da sostituire con i corrispettivi simboli digitati da tastiera).
7. E' sempre consigliabile eseguire dei test con diversi indirizzi, in modo da poterli controllare con diversi programmi di posta e con diversi webmail. Oppure servirsi del sistema Email Analysis.
8. Le aree in alto a sinistra sono quelle che mediamente catturano maggiore attenzione. Maggiori dettagli: http://www.poynterextra.org/eyetrack2004/main.htm
9. Diversi client supportano in modo differente l'HTML: un ottima analisi sulle differenze è disponibile qui: http://www.email-standards.org/clients/
10. Prevedere sempre una buona dose di contenuto in formato testuale: un messaggio composto da sole immagini avrà sia tassi di recapito sia tassi di click inferiori.
11. Per evitare impreviste spaziature tra immagini vicine su Gmail e Hotmail è consigliato aggiungere uno dei seguenti tag:
    - style="display:block" all'immagine
    - aggiungi align="left" all'immagine
    - aggiungi align="right" all'immagine
    - aggiungi style="float:left" all'immagine
    - aggiungi style="float:right" all'immagine
    - Inserire l'immagine in un blocco con uno stile: style="line-height:10px" o uguale all'altezza dell'immagine
    - Inserire l'immagine in un blocco con uno stile: style="font-size:2px" (o inferiore)
    Questi accorgimenti permettono di risolvere il problema con immagini di qualunque dimensione (sia superiori che inferiori ai 16pixel)
    

Altre informazioni riguardanti la deliverability dei messaggi email
sono disponibili in questo documento: I_Filtri_Antispam_v001.pdf