Linee guida per sviluppare un template HTML per mail.

Realizzare il template di una newsletter può sembrare a prima vista qualcosa di più semplice rispetto allo sviluppo di un tamplate di un intero sito web, ed in effetti è così, a patto che si rispettino diverse regole e concetti completamente differenti rispetto a quelli con cui si approccia il design di un sito web.

Mai come per questi tipi di template il concetto “Less is more” o volendo “Fai le cose semplici” può essere più adatto.

Quali sono i client più popolari?

Dal momento che stai per disegnare un template che andrà visualizzato da un client mail, non serve più pensare alla compatibilità con i web browser, ovvio no?
Quelli più utilizzati sono Outlook Express, Gmail, Hotmail, Yahoo, AOL, Thunderbird, Apple Iphone/Ipad, guarda il grafico relativo a Giugno 2011.

Il primo passo da fare quindi è aprire un account su oguno di questi provider per poter testare la corretta visualizzazione del template, oppure, soluzione meno complicata, usare applicazioni sviluppate appositamente per il test sui diversi client come quella messa a disposizione da Campaign monitor o Preview my email.

Niente div ma tabelle si

Hai presente una delle regole principali che non deve essere seguita mai e poi mai per realizzare un sito web, quella che dice evita l’uso di tabelle per strutturare il layout? ecco, scordatela. Mi prendi in giro? No.

Una delle poche cose che potrà dare stabilità all’aspetto del tuo template sui diversi client sarà usare le tabelle, quindi i tag table, tr e td, questo perchè proprietà CSS come float, display, position, non vengono riconosciute con conseguenze distruttive sulla strttura.
Sotto una tabella riassuntiva degli elementi HTML supportati praticamente da tutti i clients:

Cerca di definire l’aspetto della tabella utilizzando gli attributi degli elementi HTML piuttosto che usare regole CSS e imposta la larghezza specificando la dimensione direttamente in ogni cella oltre che nell’elemento table, per definire il margine interno delle celle puoi usare l’attributo cellspadding, sotto un esempio di struttura a tabelle:

<table cellpadding="0" cellspacing="0" border="0" bgcolor="#000000" width="600" align="center">
            <tr>
                <td width="100" valign="top">Contenuto</td>
                <td width="300">Contenuto</td>
                <td width="200">Contenuto</td>
            </tr>
        </table>

Decidere la largehzza

Quanto progetti un template HTML per mail è molto difficile poter prevedere quali saranno le dimensioni in cui verrà visualizzato, ma una buona regola è stare tra i 600px e 650px per la larghezza massima.

Grafico realizzato da Responsys

Potresti anche usare una dimensione fluida per risolvere il problema della larghezza, esempio:

<table border="1" width="100%">
  <tr>
    <th>Voce</th>
    <th>Voce</th>
  </tr>
  <tr>
    <td width="200">Contenuto</td>
    <td width="200">Contenuto</td>
  </tr>
</table>

Per consultare dati più aggiornati ti segnalo il grafico realizzato da campaign monitor relativo a Giugno 2011.

Attenzione alle regole CSS che usi

I client mail sono un pò restii ad aggiornarsi e ad accogliere nuove regole e metodi di formattazione, ti consiglio di stare molto attento alle regole CSS che intendi usare, la cosa migliore è usare regole CSS inline tramite l’attributo style,per esempio:

<p style="color:red;">... Testo ...</p>

Per vedere quali regole CSS sono supportate la migliore risorsa da conusultare è la tabella alle proprietà supportate dai client mail realizzata dal sito Campaign monitor.

Accorgimenti per le immagini

Molti client di default non mostrano le immagini inserite nel template creando un brutto effetto visivo, per fare in modo che queste non vengano completamente ignorate usa l’attributo alt descrivendo testualmente il contenuto dell’immagine ed incoraggiare il lettore ad accettare la loro visualizzazione.

<img src="immagine.jpg" alt="Descrizione dell'immagine" />

Altra cosa importante è specificare sempre le dimensioni per evitare che vengano impostate dal client stesso.

<img src="immagine.jpg" width="200" height="200" />

Per allineare immagini o elementi puoi usare l’attributo align invece che la proprietà float che, come detto inizialmente, raramente è riconosciuta:

<img src="immagine.jpg" width="200" height="200" align="left"/>

Accorgimenti importanti

Dai la possiblilità di vedere la tua mail in un altro server oppure in un altro formato, nel caso qualche client abbia dei problemi a visualizzare il template, meglio prevenire.

Dai sempre la possiblità di disiscriversi dalla neslwtter tramite un link in fondo alla pagina.

Ricordati di non lasciare spazi bianchi nel tuo codice HTML tra i tag riguardanti la tabella, questo ti risparmierà bug inaspettati.

Evita il più possibile la scrittura di proprietà e valori CSS usando la tecnica shorthand, piuttosto spreca qualche secondo in più e scrivi per ogni proprietà la dichiarazione completa.

Guide e risorse pratiche

Quelle elencate in questa piccola e mi auguro utile guida sono solamente regole standard per un solido template, ma sappi che poi ogni client ha sue particolarità e bug, per scoprirli e affrontarli ti consiglio di consultare la tabella realizzata sul sito Emailology inoltre ti consiglio partire da questi 30 template per newletter gratuiti, da cui prendere spunto e da utilizzare come base per lo sviluppo.

Condividi questo articolo:

• Tweet

Info sull' autore:

Nato a Bologna, mi occupo della realizzazione grafica e dello sviluppo front-end di siti web e sono il fondatore di questo blog. Se vuoi segnalare qualche problema o hai qualche richiesta particolare invia una mail tramite il modulo contatti.
Leggi gli altri articoli di Francesco