eMail Design: html ottimizzato per vari client

Prima di iniziare lo sviluppo in html di un email design c'è da tenere in considerazione che le fondamenta di questo lavoro saranno:

• uso delle table;
• uso degli stili css inline;
• test e testate sul muro!

Sembrerebbe tutto semplicemente un ritorno alle origini, un "come facevano gli antichi", ma non è così.

Ogni Client di posta elettronica, che sia su desktop o web, ha i suoi modi di interpretare il codice.

Divideremo questo articolo in 2 parti:

• la lettura di alcuni articoli / dati / statistiche di chi ha fatto di tutto questo un mestiere a sè;
• la seconda è la mia esperienza personale con piccoli suggerimenti che spero vi tornino utili.

L'articolo al link seguente traccia le linee guida e consiglia cosa fare o non fare nello sviluppo del codice; merita quindi una lettura approfondita.

Dalla stessa fonte ricaviamo questi dati statistici sull'utilizzo dei Client:

A questo link trovate un'utilissima tabella di riepilogo che indica cosa i Client più utilizzati renderizzano o meno.

Salta subito all'occhio che il Client di Apple è il più flessibile, permettendo un'esperienza migliore dell'utente rispetto ad altri Client, Mobile o meno. Segue Yahoo, poi Gmail desktop e mobile, Outlook 2000/2003 e il nuovissimo Outlook web.

Premio speciale per Word, ops! Outlook 2010, che utilizza come motore di render il suo famoso editor testuale.

Sulla base di queste informazioni, sta a voi decidere quali client favorire rispetto ad altri, considerando ovviamente il target che avrà la mail.

Nei mie sviluppi in html ho dovuto sempre far in modo che la visualizzazione delle mail fosse uguale sui maggiori Client, senza metterne in secondo piano nessuno.

Ecco le cose che tengo sempre in mente:

FONT

1. Tutto quel che riguarda i font è consigliabile, anche se ripetitivo, inserirlo in ogni <TD> (per ottimizzare la newsletter su Gmail): font-family; font-size; font-weight; line-height; color; 
2. Lo stile inline FONT-FAMILY non vuole nessun apice per i font contenenti spazi all'interno. Esempio: usare Lucida Grande, Arial, etc.. e non 'Lucida Grande'...

PARAGRAFI

1. LINE-HEIGHT è preferibile inserirlo inline anche nel tag <P> e non solo nel <TD> padre. Si consiglia di impostarlo sempre (su Outlook web client sovrascriverà il valore di default).
2. MARGIN e PADDING sia TOP che BOTTOM vengono visti diversamente da Outlook web client e Outlook locale.

Il web client legge solo i PADDING, in locale vengono letti invece solo i MARGIN, quindi si è obbligati ad avere dei valori di default.

Per avere una "media visiva" di margin e padding:

• si consiglia di usare 1/3 di MARGIN-TOP e 2/3 di PADDING-TOP;
• si consiglia di usare 4/5 di MARGIN-BOTTOM e 1/5 di PADDING-BOTTOM;

... menta e ghiaccio tritato.

Questi sono consigli molto indicativi, non incentrate quindi la grafica e lo sviluppo su dettagli al pixelquando si avranno molti paragrafi con margin e padding nella newsletter.

Bisogna impostare un layout fluido in altezza e gradevole anche con piccole differenze (sembrerà banale, ma non tutti seguono questa basilare regola! )

ALTEZZA E DISTANZE PRECISE (o almeno accettabili)

Quando avete del contenuto in un <TD> e dovete distanziarlo di un valore ben preciso dai bordi della cella che lo contiene, basta ricorrere al CELLPADDING, simply!

Quando però per altre esigenze di layout non potete usare il CELLPADDING allora la strada da seguire è un'altra.

E' inutile cambiare i valori di MARGIN e PADDING del contenuto (siano <P>, <IMG> o <SPAN>) come detto in precedenza.

Io creo semplicemente una cella delle dimensioni esatte per usarla al posto del CELLPADDING, con il vantaggio che posso avere valori diversi per il top bottom left e right:

• si portano al minimo le distanze della cella nella quale c'è il contenuto (es. se ho un testo di 36px, la cella dovrà essere alta 36px), impostando il FONT-SIZE e il LINE-HEIGHT a 36px;
• per creare le distanze dal bordo superiore e inferiore creiamo due <TD> con uno spazio &nbsp;all'interno ed impostare anche qui sia FONT-SIZE che LINE-HEIGHT con i valori che si desiderano per l'altezza.

STYLE o INLINE

Si consiglia di non usare, se non per particolari workaround o client, <style type="text/css">.

Gmail non lo legge né se inserito nell'HEAD né se inserito in BODY.

Usare sempre gli stili inline e, solo come supporto per alcuni Client, l'espressione sopra riportata.

Se ci mettete un biscotto nell'html, quel biscotto avrà la sua interlinea. <biscuit>al burro</biscuit>

Abbondate quindi di LINE-HEIGHT inline. Inseriteli sia nel <TD>, sia nel <P>, sia nello <SPAN> del contenuto ed in <A>, per sovrascrivere tutti i valori di Outlook.

Impostando quindi anche un'interlinea per il <br/> vi eviterete grandi grattacapi.