CSS  »  Articoli  »  CSS Template e layout 

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="width:500px;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:

• Why People like HTML Email Marketing Messages
• Optimizing CSS presentation in HTML emails
• CSS support in HTML emails of Hotmail, Yahoo! Mail and Gmail
• Email Design Guidelines for 2006
• HTML email guide
• HTML Email and Using Style
• how to use CSS in HTML emails
• 20 HTML Email Tips: Ignore at Your Own Risk
• Top 10 HTML Email Mistakes

Altri articoli

Altre guide

Altre newsletter