Questa è la traduzione dell'articolo Rock Solid HTML Emails di David Greiner pubblicato originariamente su 24 Ways il 13 dicembre 2009.
Prima o poi, nel corso della vostra carriera, vi verrà chiesto da qualche cliente di progettare un e-mail in HTML. Prima di affrettarvi a spiegare che la gente ormai usa solo i social network, tenete in mente che quando una campagna viene concepita e realizzata correttamente, l'e-mail è ancora uno dei mezzi più efficaci per promuovere l'attività vostra e del cliente online. Infatti, un recente sondaggio ha mostrato che ogni dollaro speso in e-mail marketing quest'anno ha generato un ritorno di più di $40. È una cifra superiore a quella di qualunque altro canale di marketing, inclusi quelli oggi ritenuti di moda.
Sono tanti gli ingredienti che contribuiscono ad una buona campagna di e-mail marketing. Le gestione dei permessi, la rilevanza, la puntualità e un contenuto interessante sono tutti importanti, ma la sfida più grande per un designer rimane ancora quella di progettare un e-mail che viene visualizzata al meglio nei principali programmi di posta elettronica.
Uguale, ma differente
Prima di scendere nei dettagli, è necessario soffermarsi su alcune questioni di base di cui quelli che si apprestano per la prima volta a progettare e-mail in HTML devono essere consapevoli. Realizzare un e-mail non è come sviluppare per il web. Mentre i browser web continuano la loro marcia in direzione degli standard, molti programmi di posta elettronica sono rimasti fermi. Alcuni hanno addirittura fatto dei passi indietro. Nel 2007, Microsoft ha sostituito su Outlook il motore di rendering di Internet Explorer con quello di Word. Sì, parlo proprio del programma di scrittura! Aggiungete a ciò i problemi di applicazioni web per l'e-mail come Gmail e Hotmail, mettete uno spruzzo di Lotus Notes e capirete facilmente quanto sia differente la partita dell'e-mail rispetto a quella del web.
Nonostante, comunque, si tratti di una sfida, non è detto che non si possa fare. Nella mia esperienza ho imparato che è cruciale concentrarsi su tre fattori chiave.
Prima di tutto, bisogna fare il possibile per mantenere tutto semplice. Più complesso è il design della nostra e-mail, più sarà probabile incappare in problemi su qualcuno dei più diffusi client di posta elettronica che non hanno un buon supporto degli standard.
In secondo luogo, dovrete rispolverare le vostre conoscenze nella strutturazione di codice che risalgono ad una decina di anni fa. Ciò significa che spesso vi ritroverete ad annidare tabelle, a mettere parti di CSS nel codice HTML e a seguire le altre linee guida che illustrerò di seguito.
Infine, dovrete testare il vostro design regolarmente. Se un template viene visualizzato bene su Hotmail ora, non significa che lo sarà la settimana prossima.
Impostare un minimo comun denominatore
Per non impazzire, è una buona idea decidere esattamente quali applicazioni intendete supportare realizzando una e-mail in HTML. Se è utile ricorrere a ricerche globali, considerate che i programmi di posta che i vostri sottoscrittori usano possono variare significativamente da caso a caso. Se avete tempo, c'è un buon numero di strumenti che possono dirvi in maniera specifica quali programmi vengono usati dai vostri sottoscrittori. Credetemi, se i test mostrano che almeno uno di loro usa Lotus Notes, evitatevi la frustrazione e ignoratelo.
Sapere per quali applicazioni state progettando il design non solo semplifica il processo, può anche farvi risparmiare molto tempo nella fase dei test. Per lo scopo di questo articolo, condividerò alcune tecniche che danno i migliori risultati su tutti i programmi più popolari, inclusi Gmail, Lotus Notes 6 e Outlook 2007. Ricordate comunque che la perfezione al pixel quando si lavora per questo tipo di applicazioni è praticamente un'utopia.
Iniziamo.
Usate le tabelle per il layout
Dal momento che applicazioni come Gmail e Outlook 2007 hanno uno scarso supporto per i float, i margini e il padding, dovrete usare le tabelle per creare il layout delle vostre e-mail. Mentre le tabelle annidate sono ampiamente supportate, non lo è un trattamento consistente della larghezza, dei margini e del padding all'interno delle celle delle tabelle. Per ottenere i risultati migliori, tenetene conto quando create la struttura delle tabelle.
Impostate la larghezza sulle celle non sulla tabella
Quando combinate larghezza sulla tabella, larghezza sulle celle, padding sulle celle e padding CSS in un'e-mail, il risultato finale varia notevolmente in ciascuno dei programmi. Il modo migliore per impostare la larghezza della vostra tabella consiste nel definire una larghezza per ciascuna cella, non per la tabella:
<table cellspacing="0" cellpadding="10" border="0">
<tr>
<td width="80"></td>
<td width="280"></td>
</tr>
</table>Non presupponete mai che se non specificate una larghezza per una cella l'applicazione lo farà per conto suo. Non lo farà. Evitate anche di definire la larghezza in percentuale. Programmi come Outlook 2007 non la rispetta, specie nelle tabelle annidate. Usate invece i pixel come unità di misura. Se volete aggiungere del padding ad una cella, usate l'attributo cellpadding o un padding con i CSS per ciascuna cella, ma non combinate mai le due cose.
Annidamento
L'annidamento delle tabelle è molto più affidabile che impostare un margine sinistro o destro (o un padding) per le celle della tabella. Se potete ottenere lo stesso effetto annidando la tabella, ciò vi darà i migliori risultati nei client più problematici.
Usate una tabella come contenitore per i colori di sfondo
Molti programmi di e-mail ignorano i colori di sfondo specificati con i CSS o sul tag body. Per aggirare il problema, inserite tutta la struttura dell'e-mail in una tabella con larghezza al 100% e date ad essa un colore di sfondo:
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td bgcolor="#000000">
Your email code goes here.
</td>
</tr>
</table>Potete usare lo stesso approccio per le immagini di sfondo. Ricordate soltanto che alcuni programmi non le supportano: fornite sempre, dunque, un colore di sfondo solido come alternativa.
Evitate spazi bianchi non necessari nelle celle della tabella
Quando è possibile evitate spazi bianchi tra i tag td della tabella. Alcune applicazioni (come Yahho! Mail e Hotmail) possono aggiungere del padding sopra o sotto il contenuto della cella in certe situazioni. La conseguenza è che il design globale potrebbe essere rovinato senza una ragione apparente.
CSS e formattazione generale
Mentre alcuni designer fanno di tutto per evitare i CSS nella realizzazione di un template per e-mail e sfruttano solo il tag font, la verità è che molte proprietà CSS sono ben supportate dalla maggior parte delle applicazioni di posta. Potete trovare una lista del supporto CSS sui principali programmi sul sito di Campaign Monitor, avrete un'idea più chiara di quali proprietà potete usare tranquillamente e di quali invece dovreste evitare.
Usate sempre CSS inline
Gmail è il caso più evidente rispetto a questo problema. Eliminando i CSS dalla head e dal body di un'e-mail, non ci resta che definire gli stili nel corpo del markup. La buona notizia è che tutto ciò può essere facilmente automatizzato. Servizi gratuiti come Premailer spostano tutto il codice CSS nel markup con un semplice click. Il mio consiglio è di compiere questo passo alla fine del progetto per poter sfruttare tutti i vantaggi dei fogli di stile esterni nel corso dei lavori.
Evitate le proprietà abbreviate per i font e i codici esadecimali
Un certo numero di applicazioni non supporta la definizione abbreviata per la proprietà font. per esempio, non impostate mai gli stili per il testo in questo modo:
p {
font:bold 1em/1.2em georgia,times,serif;
}Invece, dichiarate le proprietà individualmente, così:
p {
font-weight: bold;
font-size: 1em;
line-height: 1.2em;
font-family: georgia,times,serif;
}dal momento che siamo in tema di font, recentemente ho testato ogni possibile variazione di @font-face nei maggiori programmi di e-mail. I risultati non sono incoraggianti: nel futuro prossimo dovremo continuare a usare i font cosiddetti safe nelle nostre e-mail.
Quando si definisce la proprietà color in un CSS, alcuni programmi non supportano valori abbreviati in codoce esadecimale come color: #f60. Usate sempre, quindi, la forma lunga: color: #ff6600.
Paragrafi
Proprio come la spaziatura tra le celle di una tabella, la spaziatura dei paragrafi può essere problematica al fine di ottenere una resa consistente. Ho visto molti designer usare il tag <br /> o dei div con un margine per risolvere situazioni complicate. Di recente però, attraverso alcuni test, ho verificato che il supporto per i paragrafi è sufficientemente affidabile nella maggior parte dei casi (c'è stato un tempo in cui Yahoo! Mail non li supportava affatto).
Il migliore approccio consiste nel definire un margine nel corpo del markup con i CSS per ciascun paragrafo, così:
p {
margin: 0 0 1.6em 0;
}Ribadisco: fate tutto in un CSS esterno durante il progetto, poi usate Premailer per spostare la regola su ciascun paragrafo.
Se parte del design richiede attenzione all'altezza o una perfezione al pixel, vi raccomando di evitare del tutto i paragrafi e di impostare la formattazione del testo inline a livello delle singole celle. Potreste aver bisogno di usare tabelle annidate o il cellpadding per ottenere i risultati desiderati. Ecco un esempio:
<td width="200" style="font-weight:bold; font-size:1em; line-height:1.2em; font-family:georgia,'times',serif;">your height sensitive text</td>Link
Alcuni programmi sovrascrivono i colori dei link con quelli loro di default. Potete evitarlo con due mosse. Prima di tutto impostate un colore per ciascun link, così:
<a href="http://somesite.com/" style="color:#ff00ff">this is a link</a>Poi aggiungete uno span all'interno del tag a:
<a href="http://somesite.com/" style="color:#ff00ff"><span style="color:#ff00ff">this is a link</span></a>Per alcuni ciò sembrerà assurdo, ma se il colore di un link è importante nel contesto del design, allora uno span superfluo è il modo migliore per ottenere una consistenza solida sui vari programmi.
Termina qui la prima parte. Nella seconda ci occuperemo di immagini, video e e-mail mobile.
Immagini nelle e-mail HTML
La cosa più importante da ricordare sulle immagini nelle e-mail è che esse non saranno visibili di default per molti destinatari del messaggio. Se iniziate a lavorare sul design partendo da questo assunto, ciò vi costringe sin dall'inizio a tenere le cose semplici e a far sì che non vi siano contenuti importanti eliminati per via del blocco delle immagini.
Tenendo presente questo fattore, ecco alcuni consigli da ricordare quando si usano immagini nelle e-mail in HTML.
Evitate le immagini spaziatrici
Se la combinazione di immagini spaziatrici e tabelle annidate era popolare nel web design una decina di anni fa, il blocco delle immagini in molte applicazioni di e-mail fà sì che questa tecnica sia oggi del tutto inaffidabile. La maggior parte dei programmi sostituiscono le immagini con un segnaposto vuoto delle stesse dimensioni, altri eliminano del tutto l'immagine. dal momento che il blocco delle immagini è il comportamento di default più diffuso, ciò può portare ad una pessima impressione su chi riceve il messaggio. Dunque, usate larghezze fisse sulle celle della tabella per mantenere la formattazione a posto con o senza immagini.
Inserite sempre le dimensioni delle immagini
Se dimenticate di definire le dimensioni per ciascuna immagine, un certo numero di applicazioni inventerà dimensioni per proprio conto quando le immagini sono bloccate e rovineranno il layout. Inoltre, assicuratevi che le immagini abbiano le dimensioni corrette prima di aggiungerle alla vostra e-mail. Alcuni programmi ignoreranno le dimensioni specificate nel codice e si baseranno sulle reali dimensioni della vostra immagine.
Evitate le immagini PNG
Lotus Notes 6 e 7 non supportano le immagini PNG a 8 e 24 bit. Usate dunque solo GIF e JPEG per tutte le immagini, anche se ciò si dovesse tradurre in un aumento del peso del messaggio.
Fornite colori alternativi per le immagini di sfondo
Outlook 2007 non supporta le immagini di sfondo (a meno di non usare questo trucchetto per far funzionare le immagini di sfondo a tutta pagina). Se volete usare un'immagine di sfondo nel vostro design, fornite sempre un colore di sfondo alternativo. Ciò risolve sia il problema del blocco delle immagini, sia quello di Outlook 2007.
Non dimenticate il testo alternativo
La mancanza di supporto per gli standard significa che i programmi di posta hanno di fatto distrutto ogni possibilità di usare un markup semantico e di mirare all'accessibilità nelle e-mail in HTML.
Nonostante tutto, però, fornire un testo alternativo per le immagini tramite l'attributo alt è importante nella prospettiva di un possibile blocco delle immagini. Anche con immagini soppresse per default, i programmi mostreranno al loro posto il testo alternativo. Ricordate soltanto che alcune applicazioni come Outlook 2007, Hotmail e Apple Mail non supportano del tutto il testo alternativo quando le immagini sono bloccate.
Usate l'hack del display per Hotmail
Per motivi inesplicabili, Windows Live Hotmail aggiunge alcuni pixel di padding addizionale sotto le immagini. Una soluzione consiste nell'impostare la proprietà così:
img {display:block;}Questa regola rimuove il padding in Hotmail e non causa problemi seri nelle altre applicazioni.
Non usate i float
Sia Outlook 2007, sia le vecchie versioni di Lotus Notes non offrono supporto per la proprietà float. Al suo posto usate l'attributo align del tag img per floattare le immagini nelle vostre e-mail in HTML:
<img src="image.jpg" align="right">Se notate strani comportamenti in Yahoo! Mail, basta aggiungere align="top" alle immagini per risolvere il problema.
Video nella e-mail HTML
Senza supporto per Javascript o per il tag object, il video nelle e-mail è stato limitato di fatto all'inserimento di qualche GIF animata. Tuttavia, alcune recenti ricerche che ho fatto a proposito del tag video di HTML5 nelle e-mail mi hanno portato a trarre conclusioni promettenti.
Il video HTML5, infatti, sembra funzionare in molte applicazioni di e-mail già ora. Parlo ad esempio di Apple Mail, Entourage 2008, MobileMe e iPhone. Il beneficio reale di questo approccio è che se il video non è supportato è possibile fornire delle alternative affidabili, come una GIF animata o un'immagine cliccabile che linka il video e lo rende raggiungibile con il browser.
Certo, se sia opportuno o meno aggiungere un video in un messaggio di posta è cosa tutta da discutere. Se propendete per il sì, allora leggete questo articolo apparso sul sito di Campaign Monitor.
E-mail mobile
Il panorama della e-mail per i dispositivi mobili era molto confuso fino a tempi molto recenti. Con l'avvento dell'iPhone, di Android e con i grandi miglioramenti di Palm e RIM Blackberry, sta diventando meno importante pensare al mobile come ad una piattaforma del tutto diversa per la posta elettronica.
Ciò detto, ci sono alcuni fattori da tenere in mente quando si crea un template di e-mail che dia risultati decenti sui client mobili dei sottoscrittori.
Non superare i 600px di larghezza
A causa delle schermate di anteprima delle applicazioni di e-mail, questa regola era importante ben prima dell'avvento dei client di posta per il mobile. In realtà, iPhone e Pre hanno un viewport di 320px, il Droid di 480px, i modelli Blackberry all'incirca di 360px. Se si rimane nei limiti dei 600px di larghezza, facciamo sì che il design sia almeno leggibile quando viene scalato alle dimensioni minori degli schermi di questi dispositivi. Questa larghezza dà buoni risultati anche sul desktop e sui pannelli di anteprima delle applicazioni web di posta.
Tenete presente il ridimensionamento automatico del testo
In quella che è quasi sempre una funzionalità molto comoda, i client di e-mail che usano WebKit (iPhone, Pre e Android) possono automaticamente aggiustare la dimensione del testo per migliorare la leggibilità. Se i test mostrano che questa funzionalità arreca danni al design, potete sempre disabilitare il ridimensionamento con la seguente regola CSS:
-webkit-text-size-adjust: none;Non dimenticate i test
Se il supporto per gli standard sui client di e-mail non ha fatto tanti progressi negli ultimi anni, c'è stata una modifica continua (nel bene e nel male) di molte applicazioni. I fornitori di servizi via web come Yahoo!, Hotmail e Gmail sono noti per questo. In innumerevoli occasioni ho visto design assolutamente ben concepiti e funzionanti, essere improvvisamente rovinati senza alcuna spiegazione apparente.
Per questa sola ragione è importante testare e ritestare il design. Credo che un rapido test ogni mese vada bene, specie sulle applicazioni web. La buona notizia è che dopo aver progettato e testato il design in qualche campagna, verificherete che l'ordine prima o poi emerge dal caos. Molti problemi saranno prevedibili e il design prenderà facilmente la forma che desiderate.
Guardare avanti
Progettare una e-mail in HTMl può essere problematico per i nuovi designer, chi ama gli standard potrà mal digerire questa attività, specie considerando la natura dei compromessi con il passato che si devono mettere in atto. Con HTML5 dietro l'angolo stiamo entrando in una fase nuova, incerta. Gli sviluppatori di applicazioni e-mail coglieranno l'occasione per portare finalmente i programmi che creano nel presente? L'obiettivo di un gruppo come l'Email Standard Project è quello di rendere tutto quanto visto in questo articolo obsoleto come i tag blink o marquee. Solo il tempo ci dirà se tutto ciò diventerà realtà.
Sebbene non sia il mezzo di comunicazione più alla moda, i risultati parlano da sé: l'e-mail è, e continuerà ad essere, uno degli strumenti più efficaci e di successo per il marketing. Come designer, avendo le conoscenze giuste per creare buone e-mail in HTML, avrete nel vostro arsenale una buona opportunità non solo per ampliare la gamma dei servizi offerti, ma anche per capire quanto gli standard web siano davvero vitali.
