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 maggior parte dei client e ad alta deliverability (tasso di recapito nella inbox, e non nella Posta Indesiderata / Spam Folder).

1. Oggetto del messaggio (subject)
2. HTML
3. Suggerimenti generali

Versione documento: v013
Revisione: Nazzareno Gorni
Aggiornato al: 20 Gennaio 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) HTML

1. Il file contenente il messaggio deve essere in formato HTML (senza JavaScript, ActiveX, 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. Le immagini molto grandi andrebbero divise in due o più parti e poi composte usando una tabella
3. Indispensabile per aumento compatibilità, la presenza nel tag TD del valign="top" per garantire il giusto allineamento.
4. Si consiglia, inoltre, di utilizzare un formato non superiore ai 640 pixels di larghezza, ideale se 600pixel, in modo da consentire all'utente la visualizzazione del messaggio nella prima schermata visibile (no scrolling orizzontale, comunque non oltre i 660 pixel di larghezza);
   
5. Non usare background diverso dal bianco, se possibile. In ogni caso non usare mai testo bianco.
6. 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); se necessario, inserirle tenendo però conto che su alcuni clienti (come Outlook) non verranno visualizzate: in questo caso l'immagine di background non si vedrà e al suo posto ci sarà una tinta unita.
   Vedi esempio: <td style="background:url(file:Blue.gif) #06C repeat" >


7. Se necessario mettere un colore di background andrebbe impostato non solo come BODY, ma anche come sfondo di tabella dimensionata con un valore fisso di larghezza (es. 700pixel, di circa 100 pixel superiore alla larghezza del contenuto)
8. Non posizionare le immagini utilizzando coordinate (X-Y);
9. Non includere attributi "low source";
10. Non includere attributi di "roll-over";
11. Non usare comandi di "area shape";
12. Non scrivere testo di colore bianco
13. Non includere popup.
14. 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;
15. Inserire un numero di link preferibilmente inferiore a 10;
16. Le immagini dovrebbero avere un nome rappresentativo, non generico tipo 1.gif, 2.gif;
17. Non utilizzare il tag <DIV> con posizionamento assoluto o per definire layout con più colonne, poiché la posizione e la larghezza potrebbero non essere mantenute (es. con Outlook 2007/2010 e Lotus Notes 6/7);


18. La sintassi HTML del messaggio deve essere rispettata e validata (v. il validatore html W3C);
19. Gli attributi dei link (es. class, name) devono essere posti alla fine, dopo href="..." e utilizzati sapendo che non tutti i client li supporteranno;
20. Le scritte font e size devono avere un valore assoluto (es. size=2, non size=+1) oppure lo style con il numero di pixel (non em), ad esempio: style="font-size: 12px". Un riguardo ai numeri inferiori a 9px perché alcuni font non sono a volte visualizzati correttamente;
21. Non usare font di dimensione eccessiva (es. 4) vedi sopra;
22. Nel caso la landing page sia in flash, è importante sia disponibile anche una versione in HTML, prima di tutto perché tutti i dispositivi APPLE non supportano Flash;


23. Evitare se possibile l'uso di simboli speciali come < > & €, oltre che simboli speciali come i tre punti di sospensione di word poiché potrebbero non essere visualizzati correttamente su client che non supportano tutte le codifiche. Usare possibilmente il codice equivalente HTML (vedi tabella ascii);
24. Evitare link numerici (http://81.88.224.244/default.asp);
25. Evitare link su domini .info e .biz; anche il mittente è bene che non sia di questo tipo;
26. Evitare una percentuale molto alta di immagini rispetto al testo (un po' di testo deve esserci sempre);
27. Evitare, dove possibile, il link mailto:;
28. Evitare il testo spaziato (s p e c i a l e);
29. Inserire una firma, senza righe vuote (-0,30 punti);
30. Inserire una firma, con righe vuote (-2,09 punti);
31. Inserire una firma molto lunga (-3,13 con righe vuote, -0,30 senza);
32. Inserire qualcosa che sembri un messaggio quotato (-0,83);
33. 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);
34. Il file html deve contenere un'intestazione completa di doctype declaration;
35. Il title deve essere diverso da quello di default proposto dai comuni editor html (quindi diverso da 'Untitled' o 'New page');
36. Evitare di inserire URL con più di 5 caratteri esadecimali consecutivi (es. example.com/34def8/page.html);
37. Mettere sempre un testo alternativo (ALT) sotto le immagini significative (es. loghi, titoli, banner);
38. Le parti testuali non devono necessariamente essere tutte collegate a link;
39. 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. Inoltre Gmail lo riconosce in automatico come link e lo visualizza con il classico blu sottolineato, ignorando lo stile;
40. Controllare che tutti i link siano corretti (ad esempio utilizzando il controllore di link W3C: http://validator.w3.org/checklink )
41. Utilizzare solo tag di markup XHTML come p, b, em, li, ul, img, etc...
42. 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).
43. 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>
44. 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.
45. 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.
46. Preferire il tag <br> al tag <p>. Quest'ultimo infatti in diversi sistemi genera uno spazio eccessivo, e in altri è addirittura rimosso. In più il br prende lo stile in base alla posizione in cui viene inserito nel codice senza altre specifiche (ad esempio in un tag font, prende la stessa dim della altezza riga, ecc)
47. 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. Attenzione perché su Internet Explorer il tag " " viene trasformato in " " e quindi la spaziatura può non essere mantenuta su alcuni client. Utilizzare l'editor MailUp per le tabelle senza contenuto è consigliato usare Firefox.
48. Tenere il codice pulito, senza tag ridondati. Un possibile servizio di pulizia, gratuito, è http://infohound.net/tidy/.
49. Per evitare impreviste spaziature tra immagini vicine su Gmail e Hotmail è consigliato aggiungere il tag "style="display:block" all'immagine.
50. I fogli di stile vanno limitati o comunque inseriti sia nella parte "head" nella personalizzazione intestazioni HTML sia all'interno del , perchè spesso i sistemi di webmail rimuovono sia tutto il contenuto all'interno di <HEAD> sia eventuali css esterni. Nel caso si intenda usarli, rispettare i requisiti imposti da Outlook 2007. 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
    <a href="http://www.mailup.it/" style="font-weight: bold; background-color: #990000; color: #900;">
    Ci sono tool online come ad esempio questo per la conversione automatica.
    Da notare per quanto riguarda i colori inseriti nell'esempio: non si fa distinzione di tra #990000 e #900. Bisogna invece stare attenti a non utilizzare il colore nella forma testuale: color: red; accettato dai browser, ma non interpretato sempre correttamente dai client di posta;
51. Nel caso che un testo abbia uno 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 o il colore di sfondo non viene interpretato correttamente, il testo risulterebbe illeggibile;

C) Suggerimenti generali

1. Poiché a inizio lettura l'attenzione dell'utente è massima è preferibile che le prime 3/5 righe siano tali da catturarne l'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.
7. Le immagini devono essere nel formato jpg o gif (può essere anche una gif animata, con avvertenze). PNG si può usare solo se quota di client Lotus Notes v6 e v7 è molto ridotta, poiché non supportano quel formato.
8. 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. Per il formato jpg, si può usare un fattore di compressione un po' elevato (ad esempio 30) in modo da avere immagini non più pesanti di 40KB. Il JPG infatti, oltre ad avere 16 milioni di colori, ha una compressione migliore in caso di sfumature. Se in PNG, basta utilizzare l'esportazione in png-24.
9. Le gif animate vengono visualizzate come animate solo su Outlook 2003, mentre dall'introduzione di Outlook 2007 e successivi, viene visualizzato solo il primo frame. Tenerne conto nella realizzazione dell'animazione, curando l'aspetto del primo frame.
10. 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. à = à).
    C'è comunque da sottolineare che la console, a livello di impostazione lista ci permettere di scegliere il tipo di codifica da utilizzare. Nel caso di UTF-8, questa tipologia di problemi viene gestita in maniera corretta direttamente dall'invio fatto con MailUp. Per un test affidabile di visualizzazione è necessario inviare il messaggio e non visualizzare l'anteprima da console.
    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).
11. Poiché diversi client di posta interpretano e visualizzano lo stesso codice HTML in modo diverso, è 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.
12. Le aree in alto a sinistra sono quelle che mediamente catturano maggiore attenzione. Maggiori dettagli.
13. Prevedere sempre una buona dose di contenuto in formato testuale: un messaggio composto da sole immagini avrà sia tassi di recapito nella inbox (non in spam), sia tassi di click inferiori.