2 Settembre 2015 - Design & Development
Come creare un template newsletter in 10 semplici step
Sei alle prese con una email in formato HTML e non sai da dove iniziare?
In questa guida imparerai a creare un template responsive, conoscerai i concetti base per la sua realizzazione e scoprirai i limiti tecnici che ne comportano.
Let’s a go!
L’obiettivo è quello di raggiungere efficacemente i nostri contatti, indistintamente dal loro dispositivo di utilizzo. Il nostro nemico? I client email.
Ci sono due tipi di client: web-based e applicazioni native, ma nessuno di loro ci è simpatico. I client email agiscono direttamente sul nostro codice, alterandolo, modificandolo e in parte cancellandolo; questo può avvenire in diversi modi a seconda dei casi.
Andiamo a conoscere gli strumenti che ci permetteranno di sconfiggerli.
1. Design: Keep it simple
Il design di una newsletter dev’essere il più semplice possibile: un design chiaro e lineare attira l’attenzione dell’utente invogliandolo alla lettura, e migliora la vita del programmatore che impiega meno sforzi nello sviluppo (teniamone conto!).
È sconsigliato l’utilizzo di elementi flottanti o che richiedono un posizionamento complesso ed è preferibile invece un layout a griglia con elementi incolonnati.
2. Le dimensioni contano: non superare i 700px di larghezza
Lo spazio che i client email ci mettono a disposizione è davvero poco, ciò significa che se il nostro template è tanto largo da non essere contenuto, l’utente sarà obbligato a scorrere orizzontalmente la pagina.
La larghezza di una newsletter dev’essere compresa tra 600px e 700px, mentre l’altezza varia in base al contenuto: più ne abbiamo più l’utente dovrà scorrere quindi, per rendere la nostra newsletter più efficiente, dobbiamo scegliere bene i testi sintetizzando quanto e quando possibile.
3. Occhio ai meta-tags
Prima di avventurarci nello sviluppo del nostro template, soffermiamoci un attimo sul contenuto della <head>.
<head>
<title>Amazing newsletter</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="address=no, date=no, email=no, telephone=no" />
<style type="text/css"> ... </style> </head>
- title: dà un nome alla tab qualora la nostra email venga visualizzata direttamente nel browser. Solitamente coincide con l’oggetto dell’email;I meta-tags sono nostri amici e il loro scopo è quello di comunicare con il client email indicandogli come interpretare le informazioni contenute nel nostro HTML.
- charset: impostiamo l’UTF-8 come set di caratteri per garantire la corretta visualizzazione del nostro testo;
- viewport: settato in questa maniera, indica al client email di impostare la larghezza della viewport in base all’ampiezza dello schermo del dispositivo (width=device-width); inoltre, in questa impostazione, stiamo decidendo quale sarà il livello di zoom iniziale (initial-scale=1), concedendo comunque all’utente la possibilità di fare zoom-in e zoom-out;
- format-detenction: evitiamo che il client email inserisca tag anchor in indirizzi, date, numeri di telefono ed email, così da non ritrovarci testi non formattati.
4. Immagini: non tralasciare il testo alternativo
Le immagini danno colore alle nostre email e aumentano l’attenzione del lettore. Non sottovalutiamo però che inizialmente i client email bloccano le nostre immagini ed è quindi necessario inserire un testo nell’attributo “alt”: solitamente è una descrizione dell’immagine o il testo in essa contenuto; ha la funzione di segnaposto per dare all’utente un’idea iniziale di ciò che visualizzerà, finché non decide di mostrare il contenuto.
In questa maniera riusciamo anche ad abbassare le probabilità che il client contrassegni l’email come spam.
È importante anche decidere il formato delle immagini e per farlo dobbiamo distinguerne le caratteristiche:
- JPEG: è ottimo per fotografie, illustrazioni e immagini di anteprima. Occupa poco spazio pur mantenendo alta la qualità ma non supporta la trasparenza;
- PNG: è la soluzione migliore per immagini con trasparenze. Viene utilizzato soprattutto per loghi e pulsanti ma può occupare più spazio;
- GIF: viene prevalentemente adoperato per immagini animate. Supporta le trasparenze ed è indicato per immagini con pochi colori ma non garantisce qualità elevate. N.B. Outlook mostrerà soltanto il primo fotogramma della GIF animate.
5. Bisogna avere “carattere”, ma non troppo fuori dal comune…
La scelta del font è significativa per dare personalità alla nostra email, ma dobbiamo limitarci ai fonts di sistema, ovvero quelli che sono comuni a gran parte dei sistemi operativi.
Ecco l’elenco dei fonts utilizzabili:
Sans-serif:
- Arial
- Arial Black
- Tahoma
- Trebuchet MS
- Verdana
Serif:
- Courier
- Courier New
- Georgia
- Times
- Times New Roman
Tip: se abbiamo la necessità di utilizzare il nostro font preferito possiamo creare un’immagine che contenga il nostro testo (ma non dimentichiamo di riempire l’alt!).
6. …e bisogna avere uno “stile”… In linea!
La maggior parte dei client (Gmail per esempio) rimuove tutto il contenuto dei tags <style> e <link>, quindi quasi tutte le nostre regole CSS dovranno essere inserite inline. Ma alcune regole vanno sempre inserite nei nostri template:
...
<style type="text/css">
td {
-ms-text-size-adjust: none;
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
}
</style>
<!--[if gte mso 12]>
<style type="text/css">
td {
mso-line-height-rule: exactly;
}
</style>
<![endif]-->
...
Ok, esaminiamole insieme.
Più avanti scopriremo (scusa per lo spoiler) che faremo abuso di tabelle per il nostro codice, quindi non stupirti se il selettore delle prime regole illustrate è proprio un <td>; con queste tre regole stiamo dicendo ai motori di rendering dei client (vari in base al prefisso) di non adattare la dimensione del testo in base alla larghezza dello schermo, ma di mantenere quelle da noi prestabilite.
Di seguito troviamo un conditional comment, utile strumento che stampa la frazione di codice al suo interno solo se ne viene soddisfatta la condizione. In questo caso, se la versione di Microsoft Outlook — il boss finale dei client email, identificato dal codice “mso” — è superiore o uguale (“gte”) alla versione 9 (Outlook 2007) allora i <td> avranno un line-height pari a quello assegnato da noi.
Abbiamo imparato le regole must-have e adesso possiamo dedicarci a quelle che ci permetteranno di personalizzare la nostra newsletter.
Lo stile delle immagini è degno di nota:
<img alt="Lorem Ipsum"
src="http://placehold.it/700?text=Lorem+Ipsum"
style="border: 0; display: block; max-width: 100%;"
width="600" />
All’interno di questa immagine troviamo: il testo alternativo che coincide con il contenuto; l’attributo “width” pari alla larghezza della nostra griglia (anche se non coincide con quella originaria dell’immagine); tre regole CSS (border: 0, display: block e max-width: 100%).
La prima regola elimina i bordi azzurri generalmente aggiunti dai client alle immagini contenute da anchor; la seconda trasforma la nostra immagine in un elemento “block” (un elemento che prende un’intera riga); l’ultima esclude la possibilità che l’immagine superi la larghezza della nostra griglia.
Hai notato l’assenza dell’attributo “height”?
Lo dovremo omettere così da far calcolare al client la giusta proporzione e l’immagine potrà adattarsi correttamente alle differenti risoluzioni.
7. Tabelle, righe, celle. Ripetiamo: tabelle, righe, celle…
È arrivato il momento di creare il nostro template. La struttura è composta interamente da tabelle che corrispondono ai nostri blocchi, inglobati a loro volta da una tabella contenitore.
Per questa guida abbiamo scelto una struttura larga 600px, composta da 5 blocchi:
- header
- news in evidenza
- news affiancate
- pulsante per una call-to-action
- footer
Ecco il risultato che vogliamo ottenere:
I blocchi sono simili tra loro: ognuno di essi è formato da una tabella larga 600px ed ogni riga ha una sola cella, a differenza del blocco con due news che ne ha due, ognuna delle quali racchiude una tabella larga la metà della nostra struttura.
Diamo uno sguardo al codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Amazing newsletter</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="format-detection" content="telephone=no, address=no, email=no"/>
<style type="text/css">
* {
border: 0;
padding: 0;
}
body {
font-family: Arial, Tahoma, sans-serif;
color: #818181;
}
td {
-ms-text-size-adjust: none;
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
}
</style>
<!--[if gte mso 12]>
<style type="text/css">
td {
mso-line-height-rule: exactly;
}
</style>
<![endif]-->
</head>
<body style="margin: 0; padding: 0;">
<!-- Tabella contenitore 100% -->
<table border="0" cellpadding="0" cellspacing="0"
style="background-color: #F6F6F6;" width="100%">
<tr>
<td align="center" style="padding: 0 15px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="center">
<!-- Header -->
<table align="center" border="0" cellpadding="0" cellspacing="0"
width="600">
<tr>
<td style="padding: 15px 0;">
<a href="#SITE"><img alt="Logo"
src="http://placehold.it/600x100/E0E0E0/898989/jpg&text=Logo"
style="border: 0; display: block; max-width: 100%;"
width="600"></a>
</td>
</tr>
</table>
<!-- /Header -->
<!-- Primo blocco -->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td>
<a href="#NEWS_1"><img alt="News #1"
src="http://placehold.it/600x300/E0E0E0/898989/jpg&text=News+%231"
style="border: 0; display: block; max-width: 100%;"
width="600"></a>
</td>
</tr>
<tr>
<td style="padding-top: 15px; color: #3A383A;
font-family: Georgia, Times, serif; font-size: 42px; font-weight: bold;
line-height: 40px; text-decoration: none; text-transform: uppercase;">
<a href="#NEWS_1" style="color: #3A383A;
font-family: Georgia, Times, serif; font-size: 42px;
font-weight: bold; line-height: 40px; text-decoration: none;
text-transform: uppercase;">Title of News #1</a>
</td>
</tr>
<tr>
<td style="padding-top: 5px; padding-bottom: 15px; color: #3A383A;
font-family: Arial, Tahoma, sans-serif; font-size: 18px; line-height: 27px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
auctor sapien pellentesque erat consequat, et pellentesque erat
suscipit. Fusce urna libero, dignissim vitae tincidunt ut,
scelerisque eget tortor. Praesent malesuada vestibulum nisl eget
porttitor. Vivamus at justo ante. Suspendisse ac pulvinar diam.
</td>
</tr>
<tr>
<td bgcolor="#DEDEDE" height="2"
style="font-size: 2px; line-height: 2px;"> </td>
</tr>
</table>
<!-- /Primo blocco -->
<!-- Secondo blocco -->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td style="padding-top: 15px;">
<table border="0" cellpadding="0" cellspacing="0"
style="text-align: center; text-transform: uppercase;" width="300">
<tr>
<td>
<a href="#NEWS_2"><img alt="News #2"
src="http://placehold.it/600x600/E0E0E0/898989/jpg&text=News+%232"
style="border: 0; display: block; max-width: 100%;"
width="300"/></a>
</td>
</tr>
<tr>
<td style="padding-top: 15px; color: #3A383A;
font-family: Georgia, Times, serif; font-size: 20px;
font-weight: bold; line-height: 22px; text-decoration: none;
text-transform: uppercase;">
<a href="#NEWS_2"
style="color: #3A383A; font-family: Georgia, Times, serif;
font-size: 20px; font-weight: bold; line-height: 22px;
text-decoration: none; text-transform: uppercase;">News #2</a>
</td>
</tr>
</table>
</td>
<td style="padding-top: 15px;">
<table border="0" cellpadding="0" cellspacing="0"
style="text-align: center; text-transform: uppercase;" width="300">
<tr>
<td>
<a href="#NEWS_3"><img alt="News #3"
src="http://placehold.it/600x600/E0E0E0/898989/jpg&text=News+%233"
style="border: 0; display: block; max-width: 100%;"
width="300"/></a>
</td>
</tr>
<tr>
<td style="padding-top: 15px; color: #3A383A;
font-family: Georgia, Times, serif; font-size: 20px;
font-weight: bold; line-height: 22px; text-decoration: none;
text-transform: uppercase;">
<a href="#NEWS_3"
style="color: #3A383A; font-family: Georgia, Times, serif;
font-size: 20px; font-weight: bold; line-height: 22px;
text-decoration: none; text-transform: uppercase;">News #3</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- /Secondo blocco -->
<!-- Terzo blocco -->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td style="padding-top: 40px; padding-bottom: 20px; text-align: center;">
<a href="#CALL_TO_ACTION"
style="background-color: #3A383A; border: 1px solid #C4C4C4;
border-radius: 4px; color: #FAFAFA; display: inline-block;
font-family: sans-serif; font-size: 13px; font-weight: bold;
line-height: 50px; text-align: center; text-decoration: none;
width: 200px; -webkit-text-size-adjust: none; mso-hide: all;">Click me!</a>
</td>
</tr>
</table>
<!-- /Terzo blocco -->
<!-- Footer -->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="center" style="color: #3A383A;
font-family: Arial, Tahoma, sans-serif; font-size: 18px; font-weight: bold;
line-height: 18px; padding-top: 15px;">Lorem ipsum dolor sit amet.
</td>
</tr>
<tr>
<td align="center" style="color: #545154;
font-family: Georgia, serif; font-size: 12px; padding-top: 40px;">
<a href="#UNSUB" style="color: #545154;
font-family: Georgia, serif; font-size: 12px;">Click here for unsubscribe</a>
</td>
</tr>
<tr>
<td align="center" style="color: #545154; font-family: Georgia, serif;
font-size: 12px; padding: 30px 0;">
Lorem ipsum dolor sit amet<br/>
consectetur adipiscing elit<br/>
auctor sapien pellentesque<br/>
erat suscipit.<br/>
</td>
</tr>
</table>
<!-- /Footer -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- /Tabella contenitore 100% -->
</body>
</html>
La prima tabella funge da contenitore, ed è larga il 100% della viewport; contiene un’altra tabella, larga 600px e sarà quest’ultima a contenere tutti gli altri blocchi. Questo serve a centrare il contenuto della nostra newsletter.
Sino ad ora abbiamo creato la base del nostro template che, inviato così, verrebbe senza dubbio fatto a pezzi dai client email.
8. Mobile first
È un dato ormai certo che la maggior parte degli utenti legge le email da smartphone, dobbiamo quindi concentrarci prevalentemente sul risultato che la nostra newsletter avrà sui dispositivi mobile. In questo step renderemo responsive il nostro template con l’ausilio di media-queries e qualche altro trick.
Stay tuned!
Per prima cosa eliminiamo dalle tabelle l’attributo “width” aggiungendo la classe “full-width” e dello stile inline, in questo modo:
<table align="center" border="0" cellpadding="0" cellspacing="0"
class="full-width" style="max-width: 600px;" width="100%">
...
</table>
In questa maniera si estenderanno per tutto lo spazio a disposizione, raggiungendo una larghezza massima di 600px.
Ricordi la classe che abbiamo inserito? È arrivato il momento di dichiarare delle regole CSS:
...
@media screen and (max-width: 629px) {
.full-width {
width: 100% !important;
}
}
...
Quando la viewport è sotto i 630px (abbiamo aggiunto i 15px di padding laterale) le nostre tabelle avranno una “width” pari al 100%.
Ma il nostro template non si potrà adattare correttamente finché non interverremo sul blocco delle due news. Il nostro obiettivo è ottenere un comportamento diverso su smartphone dedicando ad ognuna di esse una propria riga, grazie all’utilizzo di <div> e applicando uno stile che unifica le due celle.
Vediamo adesso com’è cambiato il codice del nostro blocco:
...
<table align="center" border="0" cellpadding="0" cellspacing="0" class="full-width"
style="max-width: 600px;" width="100%">
<tr>
<td style="font-size: 0; text-align: center;">
<div style="display: inline-block;">
<table align="left" border="0" cellpadding="0" cellspacing="0"
class="full-width" width="300">
<tr>
<td style="padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0"
style="text-align: center; text-transform: uppercase;" width="300">
<tr>
<td>
<a href="#NEWS_2"><img ... /></a>
</td>
</tr>
<tr>
<td style="...">
<a href="#NEWS_2" style="...">News #2</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div style="display: inline-block;">
<table align="right" border="0" cellpadding="0" cellspacing="0"
class="full-width" width="300">
<tr>
<td style="padding-top: 20px;">
<table border="0" cellpadding="0" cellspacing="0"
style="text-align: center; text-transform: uppercase;" width="300">
<tr>
<td>
<a href="#NEWS_2"><img ... /></a>
</td>
</tr>
<tr>
<td style="...">
<a href="#NEWS_2" style="...">News #2</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
...
Le porzioni indicate con ‘…’ sono rimaste invariate.
Adesso la nostra newsletter ha il comportamento desiderato su smartphone, ma dobbiamo ancora affrontare Microsoft Outlook.
9. The Final Boss: Microsoft Outlook
Se Internet Explorer è il browser più odiato dai programmatori, Outlook è il più odiato tra i client email.
Quali sono i problemi e come possiamo intervenire?
Outlook interpreta diversamente da come vorremmo elementi HTML e regole CSS.
Ecco le soluzioni ai seguenti problemi:
- le tabelle prendono tutto lo spazio a disposizione perché non è stata indicata una larghezza definita, è stata ignorata la regola “max-width: 600px” e le celle non sono centrate; la tabella da 600px dovrà essere contenuta da una nuova tabella, come segue:
<!--[if (mso)|(IE)]>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td>
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0"
class="full-width" style="max-width: 600px;" width="100%">
...
</table>
<!--[if (mso)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
- le due news affiancate vengono separate in due righe con allineamenti non voluti, offrendo un risultato tutt’altro che gradevole; inserendo tra i “div” una chiusura ed un’apertura di cella (</td><td>) dividiamo in due il “td”, già presente nel blocco, così da avere due celle affiancate.
...
<td style="font-size: 0; text-align: center;">
<div style="display: inline-block;">
<table align="left" border="0" cellpadding="0" cellspacing="0"
class="full-width" width="300">
...
</table>
</div>
<!--[if (mso)|(IE)]>
</td>
<td style="font-size: 0; text-align: center;">
<![endif]-->
<div style="display: inline-block;">
<table align="right" border="0" cellpadding="0" cellspacing="0"
class="full-width" width="300">
...
</table>
</div>
</td>
...
Perfetto! Adesso tutto sembra funzionare e persino Outlook è stato sconfitto.
10. Tips & tricks
In questo punto analizzeremo alcuni strumenti utili.
Anchors:
<!-- Su smartphone fa partire il dialer per la chiamata -->
<a href="tel:+393381234567">Tel. 338 1234567</a>
<!-- Predisponde l'invio di una email -->
<a href="mailto:example@email.com?subject=This is the subject
&body=This is the body">Contact us</a>
<!-- Su smartphone apre l'applicazione Google Maps, se installata -->
<a href="https://www.google.it/maps/@28.2847541,-35.2399784,3z">Where we are</a>
Buttons
Per creare pulsanti personalizzati (ombreggiature, bordi tondi, gradienti, ecc.) funzionanti su tutti i client è consigliato l’utilizzo di buttons.cm, che genera un VML per Outlook ed un anchor stilizzato per gli altri, un po’ come è stato fatto col pulsante “Click me!” del nostro template.
Immagini di sfondo
Non tutti i client email supportano le immagini di sfondo per le celle, quindi, se il nostro obiettivo è garantire la stessa visualizzazione a tutti i client, sarà necessario creare una immagine composta che soddisfi i nostri gusti estetici.
Video
Non è possibile inserire video nelle newsletter. Potremmo terminare qui ma è opportuno suggerire un’alternativa: per simulare la presenza di un video possiamo creare un anchor (che punta alla pagina che ospita il video) che contenga un’immagine (per esempio un fotogramma del video o una copertina) con un bel pulsante “play” in sovrimpressione. In questo modo l’utente, cliccando sul link, aprirà un pagina con il video.
Adesso non hai più nulla da temere: sei pronto per creare la tua newsletter.
Clicca qui per vedere il risultato dei test (effettuati con emailonacid.com).
Immagini da placehold.it
Altre notizie dal blog.
30 Settembre 2022 - Design & Development
UX writing: perché è importante?
Lo UX writing si occupa dell’aspetto linguistico della user experience e contribuisce in modo determinante alla decisione di un utente di procedere all'acquisto di un prodotto, di iscriversi alla newsletter o semplicemente di rimanere sul sito. Copy e microcopy supportano gli obiettivi del sito, ne migliorano la fruizione e contribuiscono ad aumentarne le conversioni.
29 Agosto 2022 - Design & Development
Cosa sono e perché sono importanti i meta tag OG?
Ci capita spesso di condividere sui social network dei contenuti del web. Tutto quello che facciamo è premere il tasto condividi o incollare l’URL della pagina in questione e nel post che generiamo ci appare un’immagine sgranata o delle informazioni inesatte. Per una corretta condivisione bisogna implementare i meta tag OG.
29 Luglio 2022 - Design & Development
Accessibilità siti web e e-commerce: cos'è e perché è importante
A causa dell’isolamento sociale forzato dal Covid-19, un numero sempre maggiore di persone, soprattutto persone con disabilità, è costretta a usufruire di servizi online, scontrandosi spesso con le difficoltà legate al tema dell’accessibilità dei siti web e degli e-commerce.
14 Marzo 2022 - Design & Development
Il nuovo sito corporate di Cantine Settesoli, un progetto tra design e sostenibilità.
Cantine Settesoli ci coinvolge in nuovo stimolante progetto per rinnovare la propria identità digitale e consolidare il proprio posizionamento che punta principalmente a un target B2B.