Come disegnare template per e-mail?
Uno dei mezzi più usati per l’informazione è ovviamente l’e-mail e penso tante volte vi saranno capitati clienti che avevano bisogno di template per le loro newsletter. Ma realizzare un template che sia perfetto e soprattutto accessibile a tutti i browser e gestori di e-mail come gMail, Outlook (tutte le versioni!!), Lotus, ecc… è veramente un’impresa titanica se non si ha la giusta esperienza.
Oggi quindi ho deciso di condividere con voi il modo migliore per la realizzazione di un template accessibile a tutto.
Per prima cosa sappiamo che utilizzeremo un solo file HTML, non potremo utilizzare tutti gli stili che ci offre CSS e dobbiamo anche tornare indietro di qualche anno perchè non useremo le DIV, ma le tabelle!
Alcuni gestori non supportano le div, altri non permettono di attribuire uno stile ad una div, altri ancora non leggono tanti parametri e così dovendo pensare a tutto questo l’unica cosa da fare è un bel minestrone, armarci di pazienza e specificare tutto il possibile.
Qui di seguito adesso creerò un piccolissimo template con tutte le specifiche che dovrete sempre usare e tenere a mente:
Per prima cosa nel tag <head> possiamo creare un po’ di css, come ad esempio:
a
{
color: red;
text-decoration: underline;
}
a:hover
{
text-decoration: none;
}
h1
{
font-size: 16px;
font-weight: bold;
}
h2
{
font-size: 14px;
font-weight: bold;
}
p
{
font-size: 12px;
font-weight: normal;
line-height: 140%;
}Possiamo anche attribuire colori alle font e creare qualche piccola classe se vogliamo per dei tag particolari riguardanti <em>, <h1>, ecc…
Adesso il body della mail, la parte molto più rognosa, ci renderemo conto che quando avremo email complesse sarà noioso realizzarle, ma renderà il nostro cliente felice di avere un prodotto perfetto:
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin:0;padding:0;width:100%">
<tbody>
<tr style="height:100%">
<td width="100%" style="text-align:center; margin:0; padding:0">
<div style="margin:0; padding:0; width:100%;">
</div>
</td>
</tr>
</tbody>
</table>Questa è la tabella principale che conterrà la successiva tabella e la posizionerà al centro, non prendetemi per un matto, come vedete bisogna dichiarare tutto!!!
In parole povere quello da fare è:
Genrare la prima tabella come sopra, specificando width ed height, sempre! border, cellspacing e cellpadding a 0, sempre! Creare il tag <tbody>, attribuire a <tr> lo style per l’altezza, e attribuire alle <td> width, height e poi lo style width ed height! Ogni volta che andremo a creare una nuova tabella all’interno di una <td> ricordiamoci sempre di creare una <div> che la contenga con style: margin, padding a 0, width ed height (quando height non è precisoo deve essere dinamico, ometterlo).
La tabella che conterrà il template sarà fatta in questo modo:
<table border="0" cellpadding="0" cellspacing="0" width="600" style="margin:0;padding:0;width:600px">
<tbody>
<tr style="height:50px">
<td width="20" height="50" style="width:20; height:50px"></td>
<td width="560" style="text-align:center; margin:0; padding:0; width:560; height:50px"></td>
<td width="20" height="50" style="width:20; height:50px"></td>
</tr>
</tbody>
</table>Come noterete è simile alla prima ma ho aggiunto altre 2 colonne, quelle sono il “padding” per i nostri testi o immagini, ovviamente potete cambiare il colore di sfondo di ogni tabella o colonna usando nello style: background-color.
Da qui in avanti se il vostro body conterrà più colonne non dovrete alterare questo schema, bensì creare all’interno del <td> centrale una <div> e quindi un’altra tabella e quindi sfruttare tutte le <tr> e le <td> che volete per creare il vostro template!
Suddividete sempre in <tr> differenti ogni blocco (header, body, footer, ecc…).
Ogni volta che inserirete delle immagine ricordatevi di lasciarla all’interno delle <td> senza andare a capo!!!
<td><img src…. /></td> in questo modo.
Altri consigli che vi posso dare sono:
Alterate il tag <body> con dello stile: font-color, background-color, line-height, ecc…
Per realizzare poi un lavoro completo attribuite un testo che dica: Se non riuscite a visualizzare la e-mail in modo corretto, visualizzatela tramite html. Linkandola esternamente al browser.
Dovrei aver detto tutto, ma chiunque incontri dei problemi sono qui ad aiutarvi.
