Hosting Per Te - HelpDesk
Parla con un operatore
|
ago 28 |
Come creare una e-mail mobile responsive
28/08/2019 - 14:42 PM
|
|
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>
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>
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.
<!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>
L'articolo Come creare una e-mail mobile responsive sembra essere il primo su Blog Hosting Per Te. | |
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.
