() translation by (you can also view the original English article)
Il modo migliore per comprendere qualsiasi processo è quello di portarlo su da soli, dalle fondamenta. Oggi, stiamo andando a fare proprio questo con l'email design, costruiremo un template di posta elettronica HTML da zero.
Alcune cose
Per cominciare, vale la pena ricordare da dove ho preso alcune delle risorse.
- La belle icone 2D sono di Pierre Borodin su Dribbble
- I caratteri tipografici utilizzati sono Oil Can, Source Sans Pro e Mission Script
- Le icone dei social media vengono da Metrize Icons
Ora, come abbiamo discusso nel precedente tutorial, è necessario iniziare il documento email HTML con un doctype XHTML:
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
3 |
<head>
|
4 |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
5 |
<title>Demystifying Email Design</title> |
6 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
7 |
</head>
|
8 |
</html>
|
Dopodiché, possiamo iniziare a costruire il resto della struttura.
Creazione del body e della tabella principale
In primo luogo, aggiungiamo una struttura generale per la nostra email, iniziando con un tag <body>. Imposteremo a zero il margin e il padding interni al tag body per evitare qualsiasi spazio imprevisto.
Aggiungeremo anche una tabella con una larghezza di 100%. Questo agisce come un tag body vero e proprio per la nostra email, perché lo stile del tag body non è completamente supportato. Se si vuole aggiungere un colore di sfondo per il 'body' della email, bisogna applicare questa proprietà alla tabella principale.
Impostare il cellpadding e il cellspacing a zero per evitare qualsiasi spazio imprevisto nella tabella.
Nota: Stiamo lasciando border = "1" in tutte le tabelle, in modo che possiamo vedere lo scheletro del nostro layout come andiamo avanti. Li rimuoveremo alla fine con una semplice Find & Replace.
1 |
<body style="margin: 0; padding: 0;"> |
2 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
3 |
<tr>
|
4 |
<td>
|
5 |
Hello! |
6 |
</td>
|
7 |
</tr>
|
8 |
</table>
|
9 |
</body>
|
Se esiste un attributo nel codice HTML, utilizzare quello invece del CSS
Ora mettiamo una tabella centrata di 600 pixel di larghezza all'interno della tabella container. 600 pixel è una larghezza massima per le email per essere sicuri che vengano visualizzate correttamente all'interno della maggior parte dei client desktop e webmail con la maggior parte delle risoluzioni dello schermo.
Impostare la larghezza utilizzando HTML anziché CSS, utilizzando l'attributo width. La regola d'oro per lo sviluppo HTML di un'-mail è: se esiste un attributo nel codice HTML, utilizzare quello invece del CSS.
Sostituiremo il nostro piccolo saluto 'Hello!' con questa tabella:
1 |
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;"> |
2 |
<tr>
|
3 |
<td>
|
4 |
Hello! |
5 |
</td>
|
6 |
</tr>
|
7 |
</table>
|
Abbiamo anche aggiunto una proprietà di stile inlinea che imposta la proprietà border-collapse in collapse. Se non lo facciamo, le versioni più recenti di Outlook aggiungeranno un piccolo spazio tra la tabella e il bordo.
Creazione della struttura e dell'header
Nel nostro progetto come possiamo vedere l'email è divisa in tre sezioni, così creeremo una riga per ciascuna.
Quindi duplichiamo la riga singola che abbiamo già fatto in modo da averne tre in totale. Ho cambiato il testo al loro interno affinché possiamo facilmente identificare ogni riga.
1 |
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600"> |
2 |
<tr>
|
3 |
<td>
|
4 |
Row 1 |
5 |
</td>
|
6 |
</tr>
|
7 |
<tr>
|
8 |
<td>
|
9 |
Row 2 |
10 |
</td>
|
11 |
</tr>
|
12 |
<tr>
|
13 |
<td>
|
14 |
Row 3 |
15 |
</td>
|
16 |
</tr>
|
17 |
</table>
|
Ora le andremo a colorare secondo il disegno. Siccome bgcolor è un attributo HTML valido, lo useremo per impostare il colore di sfondo invece di usare il CSS. Ricordate sempre di utilizzare tutti i sei caratteri del codice hex, le abbreviazione di tre caratteri non sempre funzionano.
1 |
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600"> |
2 |
<tr>
|
3 |
<td bgcolor="#70bbd9"> |
4 |
Row 1 |
5 |
</td>
|
6 |
</tr>
|
7 |
<tr>
|
8 |
<td bgcolor="#ffffff"> |
9 |
Row 2 |
10 |
</td>
|
11 |
</tr>
|
12 |
<tr>
|
13 |
<td bgcolor="#ee4c50"> |
14 |
Row 3 |
15 |
</td>
|
16 |
</tr>
|
17 |
</table>
|
Ok, avanti, concentriamoci sulla riga 1. Regoliamo il padding della cella e quindi inseriamo la nostra immagine.
Usare il padding
Quando si utilizza il padding nell'email, è necessario specificare sempre ogni singolo valore (superiore, destra, inferiore e sinistra) in caso contrario si possono avere dei risultati imprevisti. Trovo che è comunque possibile utilizzare la sintassi abbreviata, cioè padding: 10px 10px 8px 5px; ma se hai problemi puoi scriverlo nella forma estesa, cioè padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;.
Se si hanno ancora problemi con il padding (per esempio, se la piattaforma di invio estrae il tuo CSS), non usarlo affatto. Semplicemente utilizzare le celle vuote per creare spazio. Non c'è bisogno di utilizzare GIF spaziatrici, basta assicurarsi di agiungere style = "line-height: 0; font-size: 0; " alla cella, mettere un e dare un'esplicita altezza o larghezza. Ecco un esempio:
1 |
<tr><td style="font-size: 0; line-height: 0;" height="10"> </td></tr> |
Si noti inoltre che si può usare il padding nel tag TD, ma non nei tag P o DIV. Si comportano in modo ancora più imprevedibile.
Quindi, useremo un po' di CSS in linea per aggiungere spaziatura interna alla cella. Poi inseriremo la nostra immagine, aggiungendo il testo dell'alt e aggiungendo style = "display: block;" che risolve un problema comune di alcuni client di posta elettronica riguardo la visualizzazione delle immagini. Centriamo l'immagine aggiungendo align = "center" al tag TD. Aggiungeremo anche un tag alt che è importante per quando la nostra email sta caricando, nella maggior parte dei casi, con la visualizzazione delle immagini abilitata.
Nota: Se il contenuto dell'header è davvero importante per il messaggio, non utilizzare come header solo un'immagine. Ricordate, le immagini vengono bloccate per impostazione predefinita nella maggior parte dei client di posta, così se c'è un aspetto della vostra email che è fondamentale, mai d includerlo come immagine. In questo esempio, tuttavia, il mio header è abbastanza superfluo.
1 |
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;"> |
2 |
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" /> |
3 |
</td>
|
Creazione dell'Area di contenuto
In primo luogo, aggiungeremo un po' di padding alla cella centrale affinché la tabella all'interno abbia un po' di spazio intorno ad essa, secondo il nostro disegno.
Ora aggiungiamo una tabella con tre righe per il nostro contenuto principale — una per il titolo, una per il testo introduttivo e una per la riga con due colonne. Imposteremo la larghezza della tabella come 100%, invece di usare un valore di pixel perché questo ci aiuterà ulteriormente se vogliamo fare la nostra email responsive. Se avete sempre larghezze in pixel su tutto, si può eseguire l'override con media query. Se le larghezze delle tabella nidificate si basano sulle percentuali, quando è regolare la larghezza dell'elemento padre, tutto si adatterà di conseguenza.
1 |
<td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;"> |
2 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
3 |
<tr>
|
4 |
<td>
|
5 |
Row 1 |
6 |
</td>
|
7 |
</tr>
|
8 |
<tr>
|
9 |
<td>
|
10 |
Row 2 |
11 |
</td>
|
12 |
</tr>
|
13 |
<tr>
|
14 |
<td>
|
15 |
Row 3 |
16 |
</td>
|
17 |
</tr>
|
18 |
</table>
|
19 |
</td>
|
Ora possiamo aggiungere i nostri contenuti e mettere un po' di padding nella cella centrale.
1 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
2 |
<tr>
|
3 |
<td>
|
4 |
Lorem ipsum dolor sit amet! |
5 |
</td>
|
6 |
</tr>
|
7 |
<tr>
|
8 |
<td style="padding: 20px 0 30px 0;"> |
9 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. |
10 |
</td>
|
11 |
</tr>
|
12 |
<tr>
|
13 |
<td>
|
14 |
Row 3 |
15 |
</td>
|
16 |
</tr>
|
17 |
</table>
|
Ora ci accingiamo ad aggiungere le nostre due colonne di contenuto alla riga 3. Perché vogliamo un 'margin' tra queste due celle, ma non è supportato, creeremo una tabella con tre colonne con una cella vuota tra le due colonne esterne.
Per quanto mi piaccia usare le percentuali, quando si dispone di contenuto con una dimensione specifica, può essere difficile convertirlo in percentuale (in questo esempio, le colonne sarebbero 48,1%, il che potrebbe diventare fonte di confusione). Per questo motivo, dal momento che le nostre due immagini sono 260px di larghezza, creeremo le colonne anch'esse ampie 260px, con una cella di margine di 20px nel mezzo. (Questo totale da 540px, che è la larghezza 600px della nostra tabella meno la spaziatura interna di 30px su entrambi i lati). Assicuratevi di impostare a zero il font-size e l'altezza della riga e aggiungere un carattere nella cella margine.
Imposteremo anche il valign a "top" per entrambe le celle affinché essi si allineino verticalmente verso l'alto, anche se una colonna ha più testo rispetto alle altre. L'allineamento verticale di default è "middle".
1 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
2 |
<tr>
|
3 |
<td width="260" valign="top"> |
4 |
Column 1 |
5 |
</td>
|
6 |
<td style="font-size: 0; line-height: 0;" width="20"> |
7 |
|
8 |
</td>
|
9 |
<td width="260" valign="top"> |
10 |
Column 2 |
11 |
</td>
|
12 |
</tr>
|
13 |
</table>
|
Ora aggiungiamo le nostre immagini e contenuti a tali colonne. Siccome abbiamo bisogno di più righe, nidifichiamo ancora un'altra tabella perché non possiamo usare ogni tag colspan o rowspan. Aggiungeremo anche un po' di padding tra l'immagine e la copia in ogni colonna.
1 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
2 |
<tr>
|
3 |
<td width="260" valign="top"> |
4 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
5 |
<tr>
|
6 |
<td>
|
7 |
<img src="images/left.gif" alt="" width="100%" height="140" style="display: block;" /> |
8 |
</td>
|
9 |
</tr>
|
10 |
<tr>
|
11 |
<td style="padding: 25px 0 0 0;"> |
12 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. |
13 |
</td>
|
14 |
</tr>
|
15 |
</table>
|
16 |
</td>
|
17 |
<td style="font-size: 0; line-height: 0;" width="20"> |
18 |
|
19 |
</td>
|
20 |
<td width="260" valign="top"> |
21 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
22 |
<tr>
|
23 |
<td>
|
24 |
<img src="images/right.gif" alt="" width="100%" height="140" style="display: block;" /> |
25 |
</td>
|
26 |
</tr>
|
27 |
<tr>
|
28 |
<td style="padding: 25px 0 0 0;"> |
29 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. |
30 |
</td>
|
31 |
</tr>
|
32 |
</table>
|
33 |
</td>
|
34 |
</tr>
|
35 |
</table>
|
Qui abbiamo creato la larghezza delle immagini utilizzando HTML al 100% della larghezza della colonna. Questo, è ancora una volta, un modo per fare questa email responsive, dobbiamo solo usare le media query per modificare la larghezza dell'elemento padre. Avremo modo di eseguire l'override dell'altezza in pixel perché utilizzando lo style = "height: auto" non funzionerà in tutti i client (tipo Outlook). Quindi la imposteremo utilizzando i pixel. Questo significa che avremmo dovuto impostare height: auto! important su quelle immagini usando media query per eseguire l'override del valore in pixel, ma dobbiamo farlo con una sola classe. Siccome abbiamo impostato la larghezza in percentuale, non dobbiamo sovrascriverla. Meno cose abbiamo da sovrascrivere, meglio.
Il Footer
Aggiungeremo ora il padding al footer.
1 |
<td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;"> |
2 |
Row 3 |
3 |
</td>
|
All'interno di quella cella, abbiamo nidificato un'altra tabella per ottenere due colonne.
1 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
2 |
<tr>
|
3 |
<td>
|
4 |
Column 1 |
5 |
</td>
|
6 |
<td>
|
7 |
Column 2 |
8 |
</td>
|
9 |
</tr>
|
10 |
</table>
|
Creeremo un'altro piccola tabella per la nostre icone social. Imposteremo alla relativa cella padre align = "right". Assicurarsi di impostare border = "0" su queste immagini (per evitare un bordo blu) e non dimenticate display: block.
1 |
<td align="right"> |
2 |
<table border="0" cellpadding="0" cellspacing="0"> |
3 |
<tr>
|
4 |
<td>
|
5 |
<a href="http://www.twitter.com/"> |
6 |
<img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" /> |
7 |
</a>
|
8 |
</td>
|
9 |
<td style="font-size: 0; line-height: 0;" width="20"> </td> |
10 |
<td>
|
11 |
<a href="http://www.twitter.com/"> |
12 |
<img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" /> |
13 |
</a>
|
14 |
</td>
|
15 |
</tr>
|
16 |
</table>
|
17 |
</td>
|
Ora possiamo aggiungere il nostro testo e aggiungere una larghezza alle nostre celle, giusto per essere sicuri, anche se c'è un sacco di spazio vuoto tra di loro. Imposteremo questa cella al 75% e l'altra al 25%.
1 |
<td width="75%"> |
2 |
® Someone, somewhere 2013<br/> |
3 |
Unsubscribe to this newsletter instantly |
4 |
</td>
|
Ecco fatto! Il nostro layout è completo.
Validazione
Passiamo il codice al validatore W3C per assicurarci che non ci siano errori. Se tutto è stato eseguito correttamente, ci dirà che è passato.
Poi andremo per eseguire un test attraverso Litmus per assicurarci che la struttura della nostra email funzioni alla grande. Ecco una sintesi del mio test:
Cambiare lo stile al testo
La nostra prima riga è il titolo. Useremo il tag <b> per creare il testo in grassetto, perché, come già sappiamo, se esiste in HTML, usiamo quello anziché il CSS.
1 |
<td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;"> |
2 |
<b>Lorem ipsum dolor sit amet!</b> |
3 |
</td>
|
Aggiungeremo anche questo stile in linea per tutte le altre celle di testo:
1 |
style="color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;" |
Poi abbiamo bisogno di cambiare lo stile al testo del footer e sistemare il link per la cancellazione. Cambiamo lo stile del testo del link di disiscrizione utilizzando il codice HTML del tag <font> e il CSS . Questo raddoppio è il modo migliore per garantire che il vostro link non compaia mai nel colore predefinito blu.
1 |
<td style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;"> |
2 |
® Someone, somewhere 2013<br/> |
3 |
<a href="#" style="color: #ffffff;"><font color="#ffffff">Unsubscribe</font></a> to this newsletter instantly |
4 |
</td>
|
Ed eccola! Ogni cosa al suo posto. E tempo di togliere i bordi per farla apparire più carina. Sostituire ogni codice border= "1" con border = "0".
A questo punto, sembra un po' triste mentre galleggia nello spazio bianco, così andiamo alla nostra tebella larga 600px e aggiungiamo:
1 |
style="border: 1px solid #cccccc;" |
Ora non sembra piu' galleggiante. Come tocco finale, ho intenzione di aggiungere 30px di padding nella parte inferiore della cella, per impedire che la nostra email termini in maniera anomala nella parte inferiore in alcuni client webmail (come Apple Mail) e 10px padding nella parte superiore, affinché la nostra intestazione blu abbia un po' di spazio per respirare.
1 |
<td style="padding: 20px 0 30px 0;"> |
E questo è tutto! Siamo pronti per una prova finale.
Questo è tutto!
Se avete usato qualsiasi commento nel codice, cancellarlo. Alcuni client di posta elettronica possono incepparsi sui commenti, quindi è più saggio di non avere alcun codice inutile nel nostro file.
Ora è un buon momento per fare un test finale, e poi, siamo pronti per inviare la nostra email HTML!
Per portare ciò che hai imparato al livello successivo, guarda il prossimo tutorial:
