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
codice dell'email HTML all'esterno del body
viene tagliato;
per lo stesso motivo di sopra, anche i CSS incorporati 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

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

È bene racchiudere tutta l'email all'interno di un div
cui si specificheranno attraverso CSS in linea colore di sfondo e tipografia;
immagini img ,
in particolare spacer gifs
contenenti foto, illustrazioni, loghi e immagini per link grafici;
per racchiudere il testo HTML
semantico h2 ,
h3 , paragrafi e liste. I <br>
sono sconsigliati: lo stesso effetto si può ottenere con i margini impostati
nel CSS;
le tabelle
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 transitional
forse da preferire, e la validazione
del codice HTML
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
in quanto al font-size

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 variante

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

Come creare una fixed sidebar con HTML e CSS

CSS: immagini in bianco e nero che cambiano colore con hover

Creare una lista a schede (tabs) con CSS e HTML

Creare effetti di scrolling parallax con CSS e HTML