Il 50% delle email vengono aperte e lette tramite dispositivi mobili. Questo è ormai un fatto acclarato che non può essere ignorato. È quindi arrivato il momento di rendere le tue e-mail mobile responsive. In questo articolo spiegheremo quali sono i principi base da seguire per creare e-mail HTML responsive utilizzando i CSS Media Queries.
Quanto segue non richiede particolari competenze informatiche ma una minima infarinatura di html e CSS è comunque necessaria per capire la logica alla base della creazione di una e-mail responsiva e soprattutto per poter adattare l’esempio riportato alla fine di questo articolo alle tue esigenze.
La struttura base di ogni e-mail HTML è caratterizzata da una dichiarazione doctype, un head ed un body. Nell’head dovranno essere definiti il set caratteri e la larghezza (width) del dispositivo.
Se vuoi rendere responsiva l’e-mail dovrai utilizzare un meta viewport che comunicherà al client di posta di visualizzare la mail con la larghezza massima possibile in funzione del dispositivo in uso. Di seguito una dichiarazione con tutti i tag necessari:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>
</head>
<body>
<p>
Hello world
</p>
</body>
</html>
Struttura base
La struttura base è caratterizzata da due contenitori posizionati uno affianco all’altro ed inseriti all’interno di un paio di tabelle. Nella e-mail, ogni contenitore, per far sì che sia visualizzabile in maniera corretta in tutti i clienti di posta, deve essere inserito all’interno di una tabella. Iniziare con una Tabella di background, poi inserire un wrapper ed infine una tabella per i contenuti.
Occorre utilizzare due elementi “td”. Come si comporteranno questi due elementi quando visualizzati su uno schermo di piccole dimensioni (i.e. smartphone) lo stabiliranno i media queries.
<table width=”100%”>
<tr>
<td class=”wrapper” width=”600″ align=”center”>
<table cellpadding=”0″ cellspacing=”0″>
<tr>
<td class=”column” width=”300″>
<table>
<tr>
<td align=”left”>
<h2>Left column</h2>
</td>
</tr>
</table>
</td>
<td class=”column” width=”300″>
<table>
<tr>
<td align=”left”>
<h2>Right column</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
CSS Media Queries
I media Queries utilizzano una regola @media per determinare se includere o meno un blocco di proprietà CSS. I media sono caratterizzati da tre elementi: Il media type, una condizione e gli stili da applicare. La regola “@media only screen and {max-width: 600px}” significa che “se la mail viene visualizzata su uno schermo con dimensioni inferiori a 600 px occorre utilizzare le seguenti regole CSS” in caso contrario verranno applicate le impostazioni CSS inline.
I Media Queries vengono specificati nella sezione <head> del documento e funzionano solo se implementate all’interno dell’HTML; Questo significa che non è possibile utilizzare le media queries negli stili inline. Le regole applicabili sono diverse, ma per il nostro esempio utilizzeremo solo la proprietà max-width
<style rel=”stylesheet” type=”text/css”>
@media only screen and (max-width: 600px) {
.wrapper table {
width: 100% !important;
}
.wrapper .column {
// fa sì che la colonna abbia la dimensione massima possibile sui dispositivi dotati di schermi con dimensioni ridotte e consente l’incolonnamento degli elementi
width: 100% !important;
display: block !important;
}
}
</style>
Importante testare le e-mail create su vari client di posta per accertarsi la massima compatibilità e divulgazione della comunicazione inoltrata. A tal fine consigliamo Litmus o Email on Acid.
Template email responsiva
<!DOCTYPE html><html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<meta name=”viewport” content=”width=device-width,
initial-scale=1.0″>
<title>Esempio di mail responsiva su due colonne</title>
<style>
/* css reset */
body,table,thead,tbody,tr,td,img {
padding: 0;
margin: 0;
border: none;
border-spacing: 0px;
border-collapse: collapse;
vertical-align: top;
}
/* Aggiungere il padding per schermi di piccole dimensioni */
.wrapper {
padding-left: 10px;
padding-right: 10px;
}
h1,h2,h3,h4,h5,h6,p {
margin: 0;
padding: 0;
padding-bottom: 20px;
line-height: 1.6;
font-family: ‘Helvetica’, ‘Arial’, sans-serif;
}
p,a,li {
font-family: ‘Helvetica’, ‘Arial’, sans-serif;
}
img {
width: 100%;
display: block;
}
@media only screen and (max-width: 620px) {
.wrapper .section {
width: 100%;
}
.wrapper .column {
width: 100%;
display: block;
}
}
</style>
</head>
<body>
<table width=”100%”>
<tbody>
<tr>
<td class=”wrapper” width=”600″ align=”center”>
<!– Immagine Header –>
<table class=”section header” width=”600″ cellspacing=”0″
cellpadding=”0″>
<tbody>
<tr>
<td class=”column”>
<table>
<tbody>
<tr>
<td align=”left”> <img
src=”//picsum.photos/id/101/600/100″
alt=”picsum” width=”600″>
<h2>Header</h2>
<p style=”text-align:justify;”>Lorem ipsum
dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
<p style=”text-align:justify;”>Ut enim ad
minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquipex ea
commodo consequat</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!– Due colonne –>
<table class=”section” cellspacing=”0″ cellpadding=”0″>
<tbody>
<tr>
<td class=”column” width=”290″ valign=”top”>
<table>
<tbody>
<tr>
<td align=”left”> <img
src=”//picsum.photos/300/100″
alt=”picsum” width=”300″>
<h2>Left column</h2>
<p style=”text-align:justify;”>Lorem ipsum
dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua..</p>
</td>
</tr>
</tbody>
</table>
</td>
<td class=”column” width=”20″ valign=”top”>
<table>
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
<td class=”column” width=”290″ valign=”top”>
<table>
<tbody>
<tr>
<td align=”left”> <img
src=”//picsum.photos/id/903/300/100″
alt=”picsum” width=”300″>
<h2>Right column</h2>
<p style=”text-align:justify;”>Excepteur
sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim
id est laborum. Ut enim ad minim veniam.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
