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).
Versione documento: v009
Revisione: Nazzareno Gorni
Aggiornato al: 18 Dicembre 2009
Introduzione
Questo documento nasce dall'analisi e dell'esperienza dei tecnici MailUp, che negli ultimi 7 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). Un motivo 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.
(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)
- 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".
- 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);
- 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.
- 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).
- Non usare caratteri tutti in maiuscolo; (0,48 punti)
- Non usare punti esclamativi ripetuti.
- Non usare un oggetto vuoto (0,34 punti)
- Non mettere FREE in lettere maiuscole (0,43 punti)
- 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)
- Non mettere GUARANTEED (0,62 punti)
- Non iniziare con lo username (cioè la parte che viene prima della @ nell'indirizzo del destinatario) (2,86 punti)
- Non mettere tanti spazi bianchi (2,64)
- Evitare se possibile punti esclamativi o interrogativi (solo 0,10)
- Usare la parola "list" (-0,22 punti)
- Usare la parola "news" (-0,62 punti)
- Usare la parola "in review" (-1,00 punti)
- Usare indicatori di frequenza (numeri, mese... in inglese) (-0,48 punti)
- Usare una data (in inglese) (-1,60 punti)
B) Corpo del messaggio
- 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 all'interno del codice, e comunque rispettare le limitazioni imposte da Outlook 2007 sulla gestione delle email e la deliverability:
- 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;
- Assicurarsi che tutti i link/action funzionino all'interno dell'e-mail;
- Si consiglia, inoltre, di utilizzare un formato non superiore ai 600x600 pixels, ideale se 560pixel, in modo da consentire all'utente la visualizzazione del messaggio nella prima schermata visibile (no scrolling orizzontale, comunque non oltre i 680 pixel di larghezza);
- 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.
- In alcuni casi è consigliabile indicare il numero telefonico e/o l'email del customer service;
- Non usare background diverso dal bianco;
- 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);
- Non posizionare le immagini utilizzando coordinate (X-Y);
- Non includere attributi "low source";
- Non includere attributi di "roll-over";
- Non usare comandi di "area shape";
- Non scrivere testo di colore bianco;
- Non includere popup. 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.
- Inserire un numero di link preferibilmente inferiore a 10;
- Il peso del messaggio non dovrebbe superare i 40KB. Le immagini dovrebbero avere un nome rappresentativo, non generico tipo 1.gif, 2.gif;
- Non utilizzare il tag <DIV> in particolare con posizionamento assoluto;
- E' vietato l'uso del brand NWEB o MAILUP, se non esplicitamente autorizzato;
- La sintassi HTML del messaggio deve essere rispettata e valicata (v. il validatore html W3C);
- Gli attributi dei link (es. class, name) devono essere posti alla fine, dopo href=".";
- Le scritte font e size devono avere un valore assoluto (es. size=2, non size=+1); allo stesso modo non può esserci color=red.
- Non usare font di dimensione eccessiva (es. 4)
- Nel caso la landing page sia in flash, è importante sia disponibile anche una versione in
HTML;
- Evitare l'uso di simboli speciali come < > & €, oltre che simboli speciali come i tre punti di sospensione di word.
- Evitare link numerici (http://81.88.224.244/default.asp);
- Evitare link su domini .info e .biz; anche il mittente è bene che non sia di questo tipo.
- Evitare una percentuale molto alta di immagini rispetto al testo (un po' di testo deve esserci sempre);
- Evitare, dove possibile, il link mailto:;
- Evitare il testo spaziato (s p e c i a l e);
- Inserire una firma, senza righe vuote (-0,30 punti)
- Inserire una firma, con righe vuote (-2,09 punti)
- Inserire una firma molto lunga (-3,13 con righe vuote, -0,30 senza)
- Inserire parole come "E-Mail Disclaimer" (-0,70)
- Inserire qualcosa che sembri un messaggio quotato (-0,83)
- 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).
- Mettere sempre un testo alternativo (ALT) sotto le immagini significative (es. loghi, titoli, banner);
- Il pulsante che invita all'azione non deve essere grafico, ma testuale;
- Il file html deve contenere un'intestazione completa di doctype declaration;
- Il title deve essere diverso da quello di default proposto dai comuni editor html (quindi diverso da 'Untitled' o 'New page');
- Le parti testuali non devono essere tutte collegate a link;
- 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.
- Controllare che tutti i link siano corretti (ad esempio utilizzando il controllore di link W3C: http://validator.w3.org/checklink )
- Utilizzare solo tag di markup XHTML come p, strong, em, li, ul, img, etc...
- 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.
- Ci sono diversi tag che possono risultare superflui e rimossi automaticamente dal server ricevente, sopratutto i client web, tra questi: <DOCTYPE> , <HTML></HTML> , <BODY></BODY> , <META> , <HEAD></HEAD> <BASE> <LINK> <SCRIPT></SCRIPT><TITLE></TITLE> <APPLET></APPLET><FRAMESET></FRAMESET> <FRAME> <IFRAME></IFRAME> <!-- comments -->
- 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.
- 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
- 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.
- 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.
- Usare il title="Prova Prova Prova" sia nei tag delle immagini, sia nel tag dei link. Questo mostrerà un tooltip al passaggio del Mouse.
- Preferire il tag <BR> al tag <P>. Quest'ultimo infatti in diversi sistemi genera uno spazio eccessivo, e in altri è addirittura rimosso.
- 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.
- Il background dovrebbe essere bianco, se diverso andrebbe impostato in alternativa come sfondo di tabella 100%x100% e non come body.
- Tenere il codice pulito, senza tag ridondati. Un possibile servizio di puliza, gratuito, è http://infohound.net/tidy/
- Altre parole critiche, con relativa penalizzazione in termini di punteggio (antispam hits):
Reverses aging |
3.37 |
'Hidden' assets |
3.28 |
stop snoring |
3.26 |
Free investment |
3.19 |
Dig up dirt on friends |
3.12 |
Stock disclaimer statement |
3.04 |
Multi level marketing |
3.01 |
Compare rates |
2.83 |
Cable converter |
2.75 |
Claims you can be removed from the list |
2.70 |
Removes wrinkles |
2.69 |
Compete for your business |
2.57 |
free installation |
2.51 |
Free grant money |
2.50 |
Auto email removal |
2.36 |
Collect child support |
2.33 |
Free leads |
2.29 |
Amazing stuff |
2.26 |
Tells you it's an ad |
2.21 |
Cash bonus |
2.20 |
Promise you ...! |
2.15 |
Claims to be in accordance with some spam law |
2.11 |
Search engine listings |
2.09 |
free preview |
2.07 |
Credit bureaus |
2.03 |
No investment |
2.01 |
Serious cash |
2.00 |
C) Suggerimenti generali
- 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.
- 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.
- Considerare che nei client di posta su cellulare, spesso le prime 2/3 righe vengono scaricate automaticamente, mentre le successive solo dietro autorizzazione del cliente.
- 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:
- Macromedia Dreamweaver (editor visuale / 30 giorni gratuiti)
- PSPad (editor generico / gratis)
- Intype (editor di codice / gratis)
- NVU (editor visuale / gratis)
- Codetch (editor visuale, estensione di Firefox / gratis)
- Provare sempre un invio, possibilmente su più sistemi sia web based (Hotmail, Gmail...) sia client software (recenti e non: http://browsers.evolt.org/?ie/)
- 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.
D) Suggerimenti generali per l'impaginazione e l'HTML
- Il contenuto del messaggio va inserito all'interno di una tabella a larghezza fissa, preferibilmente senza superare i 600 pixel. Oltre il rischio è che in alcuni sistemi appaia la barra di scorrimento orizzontale;
-
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;
- Le gif animate non vengono visualizzate come animate su Outlook 2007: viene visualizzato solo il primo frame. Tenerne conto nella realizzazione dell'animazione.
- 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 <BODY>. MailUp li posiziona automaticamente all'interno.
- I fogli di stile vanno limitati il più possibile. Nel caso si intenda usarli, rispettare il requisiti imposti da Outlook 2007, disponibili in questa pagina:
http://www.mailup.it/Newsletter/07/News_Outlook-2007.asp
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 <HEAD> 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;">
- 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;
-
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).
- 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.
- Le aree in alto a sinistra sono quelle che mediamente catturano maggiore attenzione. Maggiori dettagli: http://www.poynterextra.org/eyetrack2004/main.htm
- Diversi client supportano in modo differente l'HTML: un ottima analisi sulle differenze è disponibile qui: http://www.email-standards.org/clients/
NWEB offre servizi specifici per verificare che il proprio messaggio non venga erroneamente bloccato dai filtri antispam:
1) un servizio specifico consulenziale: www.mailcheckup.it
2) un modulo opzionale di MailUp: "SPAM CHECK": acquistalo online
3) Email Analysis: un servizio speciale che consente di verificare il proprio messaggio su tutti i principali client di posta web, software e mobile, nelle varie modalità (anteprima orizzontale, verticale, immagini abilitate e disabilitate). Cliccare in Email Checkup all'interno di EMAIL/ELENCO per accedervi. Email Analysis consente anche di verificare che il messaggio attraversi i 10 più diffusi sistemi antispam usati sia a livello client che a livello di server di posta degli ISP.
4) Attivare un servizio di monitoraggio, che rileva l'arrivo del messaggio sui principali sistemi di posta evidenziano se arriva nella inbox o nella cartella spam, e indicando quali siano gli elementi da correggere per migliorare la deliverability.
5) La certificazione Return Path Certification, la più prestigiosa whitelist internazionale che garantisce il non blocco da parte dei principali sistemi antispam utilizzati da aziende e provider: http://www.returnpath.net/commercialsender/certification/
Altre informazioni riguardanti la deliverability dei messaggi email
sono disponibili in questo documento: I_Filtri_Antispam_v001.pdf
|
Per informazioni 02 71040485
