Email commerciali con HTML e CSS

Link copiato negli appunti

Le email in formato HTML sono uno strumento di comunicazione molto
accattivante. Dopo una breve premessa con alcuni consigli di
carattere generale per newsletter ed email commerciali, vedremo come
sia possibile svilupparle in HTML e CSS per ottenere la massima compatibilità.
Ecco una piccola anticipazione dell'esempio
che accompagna l'articolo.

Email in HTML: otto consigli da seguire

Probabilmente ci vorrebbe un articolo intero su questo tema, e invece
di otto le buone pratiche potrebbero arrivare a cinquanta o più. Pur
non essendo un esperto di email ed email marketing, prima di entrare in dettagli
tecnici e implementativi, ci sono alcune premesse che vorrei fare, per lo più
dettate dal buon senso. Ecco alcuni consigli:

Email pubblicitarie e newsletter non dovrebbero essere mai spedite senza
il consenso del ricevente, che in qualunque momento dovrebbe essere in grado
di cambiare il formato con cui riceve l'email (HTML o testuale) o sospendere
il servizio;
nell'email testuale un link alla versione HTML online è senza dubbio gradito
ed efficace;
le immagini nelle email HTML non vanno allegate nel messaggio, ma messe
on line e linkate. Conviene usare sempre l'attributo alt,
specificare le dimensioni e soprattutto accertarsi che i percorsi alle immagini
sul server siano corretti: così da essere sicuri che vengano visualizzate
all'interno della email;
Javascript andrebbe evitato nelle email con HTML;
il peso del codice di un email HTML dovrebbe attestarsi al massimo sui 10-20Kb; includendo le immagini, al massimo sui 50Kb;
un'email con layout a larghezza fissa dovrebbe essere larga massimo 500-600
pixels. Se non ci sono particolari esigenze di layout o grafiche un layout
liquido è forse da preferire;
per inviare le email è bene affidarsi a un software specifico o una soluzione
lato server con PHP o simili;
prima dell'invio effettivo conviene testare l'email sul maggior numero di
client di posta e webmail possibile.

Alcuni approfondimenti interessanti verranno linkati a fine articolo. Ora
tempo di passare all'argomento centrale dell'articolo.

Email con HTML e CSS

C'è da premettere, realizzando email con HTML e CSS, che per non sacrificare
compatibilità dovremo allontanarci da web standards e buone pratiche di sviluppo
che siamo soliti presentare qui su PRO. Il supporto dei CSS è infatti molto
variabile a seconda del mailreader o della webmail con cui si consulta l'email.
In particolare:

I CSS esterni sono sconsigliati, dato che nella maggior parte il
codice dell'email HTML all'esterno del body
viene tagliato;
per lo stesso motivo di sopra, anche i CSS incorporati sono da evitare. Una possibile soluzione è quella di inserire il blocco style
all'interno del body: in questo caso la compatibilità aumenta leggermente, ma è ancora bassa. Il rischio quindi che l'email venga visualizzata senza CSS, oppure con il CSS della pagina
della webmail in cui viene letta:
la soluzione da preferire è quindi l'uso dei CSS in linea, anche si presenta più ridondante e pesante delle precedenti.

In quanto al markup, ecco alcune buone pratiche di sviluppo:

È bene racchiudere tutta l'email all'interno di un div in
cui si specificheranno attraverso CSS in linea colore di sfondo e tipografia;
immagini senza contenuto effettivo attraverso il tag img,
in particolare spacer gifs andrebbero evitate: vanno bene immagini
contenenti foto, illustrazioni, loghi e immagini per link grafici;
per racchiudere il testo converrebbe usare HTML
semantico, e in particolare titoli h2,
h3, paragrafi e liste. I <br>
sono sconsigliati: lo stesso effetto si può ottenere con i margini impostati
nel CSS;
le tabelle andrebbero usate al minimo: in generale, non più di una
sola per il layout dell'email e solo nel caso in cui l'email necessita di
un layout a due o tre colonne;
in quanto al doctype da usare: il transitional
forse da preferire, e la validazione
del codice HTML è una buona pratica anche per le email;
prima dell'invio, soprattutto se si è fatto abbondante uso dei CSS, è bene
testare l'email su diversi browser, soprattutto anche rimuovendo il doctype
così da visualizzare la pagina in quirk mode per rilevare eventuali differenze di box model. Alcune webmail infatti non hanno pagine con doctype completo, ed, eliminando tutto ciò che è al di fuori del body dell'email, la renderanno quindi in quirk mode;
in quanto al font-size: anche se è una buona pratica usare percentuali ed em, il dimensionamento relativo è purtroppo soggetto alle dimensioni del font della pagina webmail in cui è immersa l'email. Font in pixel sono quindi da preferire, anche se conviene usare font minimo grandi 10 o meglio 12 pixel.

L'esempio

Siamo così pronti a presentare l'esempio dell'articolo.
Si tratta di una semplice pagina HTML con doctype transitional e valida. Vedremo
passo passo come sia costruito il markup e la sua presentazione. La prima cosa
usare un div che contenga tutta l'email:

A questo punto il logo. L'immagine viene racchiusa all'interno di un div:

Mi raccomando: una volta messa on-line l'immagine è importante specificarne l'indirizzo assoluto nell' HTML dell'email.
Ora la parte relativa alle due colonne centrali: per questioni di praticità e di supporto, credo che sia da preferire l'uso di una tabella. Ecco il codice delle due sezioni portanti:

Da notare che in alcuni casi ho omesso i doppi apici per gli attributi degli elementi di pagina: sono facoltativi ai fini della validazione del codice e ometterli fa risparmiare qualche byte. Per il resto, gli altri elementi usati
usano stili CSS in linea molto semplici. Una cosa da notare è come siano specificati una coppia titolo e paragrafo successivo:

<h2 style="font-size:120%;color: #FFBD00;margin-bottom:0">Titolo</h2>
<p style="margin-top:0">Paragrafo</p>

I margini inferiore del titolo e superiore del paragrafo vengono azzerati così da annullare lo spazio che intercorre tra di essi.

Infine il footer, che conterrà le note e le informazioni:

<div style="border:1px solid #CCC;background: #FFEFC3;color: #333;text-align:center;font-size:90%">
<p style="margin:5px">Testo del footer</p>
</div>

Il nostro esempio è così ultimato. Ho preparato anche una variante
fluida: è bastato non specificare la larghezza del div principale.

Conclusioni e approfondimenti

Abbiamo visto in questo articolo alcuni consigli pratici per realizzare email
con HTML e CSS usando un approccio transizionale: il markup utilizzato nei due
esempi certo non è il massimo in quanto a pulizia e semanticità, ma per garantire buona compatibilità a volte è necessario scendere a compromessi. In conclusione di articolo, ecco alcuni approfondimenti interessanti:

Indice lezioni

Email commerciali con HTML e CSS

Email in HTML: otto consigli da seguire

Email con HTML e CSS

L'esempio

Conclusioni e approfondimenti

Ti consigliamo anche

Un countdown animato con HTML e CSS

Animazioni allo scorrimento del mouse con HTML e CSS

Morphing CSS: trasformare forme e immagini

CSS: zoom su immagini al passaggio del mouse