Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Email commerciali con HTML e CSS

Usare i fogli di stile per migliorare l'aspetto di newsletter e email commerciali
Usare i fogli di stile per migliorare l'aspetto di newsletter e email commerciali
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:

<div style=";margin:0 auto;font: 12px/1.4 Verdana,Arial,sans-serif;background:#FFF;color: #444">
<!--il contenuto qui -->
</div>

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

<div style="background: url(logobk.png) repeat-x">
  <img src="logo.png" border=0 style="display:block" width=500 height=80 alt="logo">
</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:

<table border=0 cellspacing=0 cellpadding=5 style="margin:0;font-size:12px">
<tbody><tr>
<td style="border-left:1px solid #CCC" valign=top>
  <!--contenuto colonna di sinistra -->
</td>
<td width=170 style="background: #EFEFEF;border-left:1px solid #CCC;border-right:1px solid #CCC" valign=top>
  <!--contenuto colonna di destra -->
</td>
</tr></tbody>
</table>

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:


Ti consigliamo anche