{"id":472,"date":"2014-07-29T14:59:54","date_gmt":"2014-07-29T12:59:54","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/email-puo-essere-responsive\/"},"modified":"2014-07-29T14:59:54","modified_gmt":"2014-07-29T12:59:54","slug":"email-puo-essere-responsive","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/email-puo-essere-responsive\/","title":{"rendered":"L&#8217;email pu\u00f2 essere responsive?"},"content":{"rendered":"<div class=\"paragrafo\">\n<p><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/07\/n95fionda.png\" border=\"0\" align=\"left\" \/>Che le si ami o le si odi, non si pu\u00f2 negare la popolarit\u00e0 delle email HTML. Inoltre, come il web prima di lei, la inbox \u00e8 ufficialmente diventata mobile, con <a href=\"https:\/\/litmus.com\/blog\/email-client-market-share-where-people-opened-in-2013\">pi\u00f9 del 50% delle email aperte<\/a> su device mobile.<\/p>\n<p>Eppure, l&#8217;email design \u00e8 una pratica scandalosamente datata. Vi ricordate com&#8217;era scrivere codice prima che gli standard web diventassero\u2026 Standard? Benvenuti nell&#8217;inferno attuale dell&#8217;email design.<\/p>\n<p>Comunque sia, programmare un&#8217;email non deve essere una lezione di frustrazione. Sebbene gli email designer debbano ancora creare i layout usando le tabelle e assegnargli stili con attributi HTML e &#8211; gasp! &#8211; gli stili inline, un certo numero di intrepidi designer sta cercando di applicare le moderne e pionieristiche tecniche per il web all&#8217;arcaica pratica dell&#8217;email design.<\/p>\n<p>Costruita sui principi del <a href=\"articoli\/17-numero-7-8-giugno-2010\/71-web-design-reattivo\">responsive web design<\/a> codificati per primo da Ethan Marcotte, un rivoluzione nell&#8217;email design sta dando vita ad un&#8217;esperienza che si avvicina rapidamente a quella del web moderno. Gli iscritti non devono pi\u00f9 essere soggetti a terribili esperienze di lettura, a target frustranti su device touch e a testo microscopico.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Il valore dell&#8217;email HTML<\/h2>\n<p>Che le amiate o meno, le email HTML sono un tool vitale per quasi tutte le aziende. Quando si tratta di marketing, l&#8217;email ha costantemente <a href=\"http:\/\/www.wired.com\/business\/2013\/07\/email-crushing-twitter-facebook\/\">prestazioni migliori<\/a> di altri canali quali Facebook e Twitter. Cosa ancora pi\u00f9 importante, l&#8217;email permette di interagire con un <a href=\"http:\/\/blog.getvero.com\/email-marketing-statistics\/\">pubblico potenzialmente enorme<\/a> in <a href=\"http:\/\/blog.mailchimp.com\/paul-jarvis-likes-trading-stories-with-people\/\">maniera sempre pi\u00f9 personale<\/a>.<\/p>\n<p>Potreste non essere coinvolti direttamente nell&#8217;email marketing, ma ci sono buone probabilit\u00e0 che, come web designer o developer, usiate le email per comunicare regolarmente con gli utenti. Potrebbe essere per mandare una fattura, per aggiornare gli utenti su una nuova feature di un prodotto o per informarli dell&#8217;ultimo blog post che avete pubblicato. Qualunque sia la ragione, l&#8217;email \u00e8 un mezzo importante e spesso trascurato.<\/p>\n<p>Molti developer scelgono di mandare ai clienti delle semplici email di testo. Sebbene queste abbiano molti benefici (sono semplici da creare, si leggono ovunque, si scaricano rapidamente, etc.), l&#8217;email HTML ha un certo numero di vantaggi:<\/p>\n<ul>\n<li><strong>Hyperlinks<\/strong>. Potete inserire dei link alle landing pages da un&#8217;email HTML per creare traffico ed engagement.<\/li>\n<li><strong>Design<\/strong>. Un&#8217;email HTML ben progettata vi permette di rafforzare il vostro brand, anche nella inbox.<\/li>\n<li><strong>Gerarchia<\/strong>. Potete creare una gerarchia all&#8217;interno delle email HTML e richiamare l&#8217;attenzione pi\u00f9 facilmente al testo importante o a link vitali.<\/li>\n<li><strong>Tracking<\/strong>. L&#8217;email HTML vi permette di tenere traccia delle aperture e dell&#8217;engagement: dati di valore che possono essere usati per migliorare i vostri sforzi sul marketing.<\/li>\n<\/ul>\n<p>Se non date all&#8217;email la stessa attenzione che dedicate alla vostra app &#8220;pixel perfect&#8221;, state in effetti perdendo 1) un&#8217;opportunit\u00e0 di branding di valore, 2) la possibilit\u00e0 di tracciare le aperture e le interazioni nelle vostre email e 3) l&#8217;opportunit\u00e0 di fornire un&#8217;incredibile esperienza utente al di fuori della vostra applicazione.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>L&#8217;email HTML fa schifo<\/h2>\n<p>Il design e lo sviluppo di email HTML si \u00e8 posizionato tradizionalmente tra le peggiori esperienze per ogni web designer. \u00c8 come salire su una macchina del tempo e scenderne nel diabolico mondo dei layout a tabelle, degli stili inline, del markup non semantico e degli hack specifici per i client degli anni &#8217;90.<\/p>\n<p>Ecco un semplice campionario dei motivi per cui l&#8217;email HTML pu\u00f2 essere un fastidio:<\/p>\n<ul>\n<li><strong>Nessuno standard<\/strong>. Ovvio, usiamo HTML e CSS, ma non come sul Web: non c&#8217;\u00e8 alcun vero standard tra i client email, per cui si arriva a un codice fuori controllo.<\/li>\n<li><strong>Client email<\/strong>. I client email, come Outlook e Gmail, rendono tutti HTML e CSS in maniera differente, spesso scandalosamente differente. Il che ci porta a\u2026<\/li>\n<li><strong>Molti hack<\/strong>. Anche le campagne di email ben progettate devono fare affidamento a hack &#8220;client specific&#8221; per far funzionare le cose.<\/li>\n<li><strong>Niente JavaScript<\/strong>. Il linguaggio preferito del web non trova posto nelle email, dal momento che i client email lo eliminano (giustamente) per motivi di sicurezza. Addio interattivit\u00e0!<\/li>\n<li><strong>Stili inline<\/strong>. Vorrei separare la struttura dalla presentazione. Sfortunatamente, la maggior parte dei client email vi obbliga a fare affidamento sugli stili e sugli attributi inline per qualunque cosa nell&#8217;email.<\/li>\n<\/ul>\n<p>Sebbene molto probabilmente la situazione non cambier\u00e0 presto, c&#8217;\u00e8 un movimento nella community dell&#8217;email design (s\u00ec, ne esiste <em>davvero<\/em> una) per alleviare la sofferenza normalmente associata allo sviluppo di campagne email. Un certo numero di aziende e di persone stanno migliorando gli strumenti e i metodi dell&#8217;email design e stanno condividendo la propria conoscenza pi\u00f9 di quanto fosse mai stato fatto finora.<\/p>\n<p>L&#8217;azienda per cui lavoro, <a href=\"http:\/\/litmus.com\">Litmus<\/a>, \u00e8 una di queste. Creiamo strumenti per rendere quanto pi\u00f9 indolore possibile il testing e il tracking delle campagne email e siamo tutti d&#8217;accordo sul diffondere le informazioni riguardanti l&#8217;email marketing in generale e l&#8217;email design nello specifico. Abbiamo anche dato vita ad una <a href=\"http:\/\/litmus.com\/email-community\">community<\/a> dedicata per mettere in contatto gli email marketer, permettendogli di condividere la propria conoscenza, di rifinire le tecniche ed apprendere sia da noi sia vicendevolmente.<\/p>\n<p>Sebbene in questo articolo io faccia riferimento ad alcuni strumenti e risorse di Litmus, c&#8217;\u00e8 una serie di altre aziende e persone che lavorano duramente al miglioramento dell&#8217;email design. In particolare, sia <a href=\"http:\/\/mailchimp.com\">MailChimp<\/a> sia <a href=\"http:\/\/campaignmonitor.com\">Campaign Monitor<\/a> hanno dei blog e delle guide eccellenti. Inoltre, persone come <a href=\"https:\/\/twitter.com\/stylecampaign\">Anna Yeaman<\/a>, <a href=\"https:\/\/twitter.com\/moonstrips\">Nicole Merlin<\/a>, <a href=\"https:\/\/twitter.com\/flcarneiro\">Fabio Carneiro<\/a>, <a href=\"https:\/\/twitter.com\/iamelliot\">Elliot Ross<\/a> e <a href=\"https:\/\/twitter.com\/briangraves\">Brian Graves<\/a> sono tutte impegnate nel far diventare un vero mestiere l&#8217;email design.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>La inbox in cambiamento<\/h2>\n<p>Proprio come il resto del web, anche la inbox sta diventando mobile. Nel 2013, <a href=\"https:\/\/litmus.com\/blog\/email-client-market-share-where-people-opened-in-2013\">il 51% degli utenti ha aperto le email su un device mobile<\/a>. Tale numero \u00e8 probabilmente destinato ad aumentare, specialmente considerando che un <a href=\"http:\/\/blogs.hbr.org\/2013\/05\/the-rise-of-the-mobile-only-us\/\">numero crescente di persone<\/a> fa affidamento sul proprio dispositivo mobile per accedere ad internet, sia per abitudine sia per necessit\u00e0.<\/p>\n<p>La buona notizia \u00e8 che i web designer possono adattare le proprie skill esistenti ed applicarle alle campagne email, creando una bellissima user experience su un canale che \u00e8 vitale per molti utenti ma ignorato da molti designer.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Come funziona l&#8217;email HTML<\/h2>\n<p>Parlando in generale, progettare un&#8217;email HTML \u00e8 esattamente come creare una pagina web, fingendo che il web design non abbia alcune conoscenza successiva a <a href=\"http:\/\/en.wikipedia.org\/wiki\/Designing_with_Web_Standards\"><cite>Designing with Web Standards<\/cite><\/a>. Le email HTML si basano su tre cose: tabelle, attributi HTML e CSS inline. Nell&#8217;apprendere come si creano le email HTML, tenete a mente che, a causa dei rendering engines dei client email, ci troviamo a lavorare con un sottoinsieme molto limitato di HTML e CSS. Campaign Monitor mantiene un <a href=\"http:\/\/www.campaignmonitor.com\/css\/\">eccellente grafico<\/a> di quali parti di CSS sono supportate tra i maggiori client email.<\/p>\n<p>Scorriamo brevemente le basi dell&#8217;email HTML prima di cercare di capire come rendere le email responsive. Come esempio, ho adattato il template che usiamo per la nostra newsletter in Litmus. Grazie sia a Litmus sia al nostro meraviglioso designer, <a href=\"http:\/\/dribbble.com\/KEVINgotbounce\">Kevin Mandeville<\/a>, i lettori di <cite>A List Apart<\/cite> possono apprendere e creare basandosi sullo stesso codice che usiamo per la maggior parte delle nostre campagne, Al momento \u00e8 ospitato sull&#8217;account Github di<a href=\"https:\/\/github.com\/alistapart\/salted\"><cite>A List Apart<\/cite>. Per vedere come si comporta su i vari cliente, potete controllare tutti i <\/a><a href=\"https:\/\/litmus.com\/pub\/d5586ad\/screenshots\">test di Litmus<\/a>.<\/p>\n<h3>Tabelle<\/h3>\n<p>La maggior parte dei web designer usano tag come <code>div<\/code>, <code>header<\/code>, <code>section<\/code>, <code>article<\/code>, <code>nav<\/code> e <code>footer<\/code> per creare la struttura delle pagine web. Sfortunatamente, gli email designer non possono concedersi il lusso di usare degli elementi semantici. Al contrario, *si devono* usare le tabelle HTML per realizzare il layout delle campagne email. Questa tabelle saranno annidate\u2026 Molto annidate.<\/p>\n<p>Gli stili di base delle tabelle useranno ampiamente gli attributi che la maggior parte delle persone non ha usato per molto tempo: <code>width<\/code>, <code>height<\/code>, <code>bgcolor<\/code>, <code>align<\/code>, <code>cellpadding<\/code>, <code>cellspacing<\/code> e <code>border<\/code>. Insieme agli stili inline come <code>padding<\/code>, <code>width<\/code> e <code>max-width<\/code>, i designer possono creare dei layout email robusti.<\/p>\n<p>Ecco un esempio di come appare un email con un codice tabella ben scritto:<\/p>\n<pre><code>&lt;table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\"&gt;\n\t&lt;tr&gt;\n\t\t&lt;td bgcolor=\"#333333\"&gt;\n\t\t\t&lt;div align=\"center\" style=\"padding: 0px 15px 0px 15px;\"&gt;\n\t\t\t\t&lt;table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"500\" class=\"wrapper\"&gt;\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t\t&lt;td&gt;\u2026Content\u2026&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\t\t\t\t&lt;\/table&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/td&gt;\n\t&lt;\/tr&gt;\n&lt;\/table&gt;<\/code><\/pre>\n<p>Potete vedere come annidiamo le tabelle ed usiamo gli attributi <code>border<\/code>, <code>cellpadding<\/code> e <code>cellspacing<\/code> per essere sicuri che non ci siano degli spazi non necessari nel design. Viene applicato un <code>bgcolor<\/code> a livello delle celle della tabella, che \u00e8 un metodo pi\u00f9 affidabile di <code>background<\/code> o <code>background-color<\/code> (sebbene <code>background-color<\/code> abbia una sua collocazione).<\/p>\n<p>Una cosa interessante da notare \u00e8 che <code>div<\/code> \u00e8 usato per centrare la tabella annidata e mettere un padding attorno al contenuto. Sebbene le tabelle dovrebbero creare il grosso della struttura, \u00e8 utile uno sporadico uso di <code>div<\/code> per allineare blocchi di contenuto, fornire un padding e impostare alcuni stili di base. Tuttavia, non li si dovrebbe usare come struttura principale di un&#8217;email dal momento che la maggior parte dei client ha dei problemi almeno con alcuni aspetti del box model, rendendoli inaffidabili per il layout delle email.<\/p>\n<h3>Immagini<\/h3>\n<p>L&#8217;uso delle immagini nelle email \u00e8 molto simile al loro utilizzo sul web, con un avvertimento: una serie di client email disabilita le immagini di default, lasciando che gli iscritti guardino un disordine confuso e non funzionante.<\/p>\n<div class=\"illustration full left\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/07\/can-email-be-responsive-1.png\" border=\"0\" \/><\/p>\n<p>Un&#8217;email con le immagini disabilitate<\/p>\n<\/div>\n<p>Anche se non c&#8217;\u00e8 un modo per abilitare automaticamente le immagini, possiamo migliorare la situazione usando un testo alternativo per dare un po&#8217; di contesto alle immagini mancanti. Inoltre, possiamo usare gli stili inline sull&#8217;elemento <code>img<\/code> per dare uno stile a quel testo alternativo e mantenere una minima rassomiglianza con il design.<\/p>\n<pre><code>&lt;img src=\"img\/fluid-images.jpg\" width=\"240\" height=\"130\" style=\"display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px;\" alt=\"Fluid images\" border=\"0\" class=\"img-max\"&gt;<\/code><\/pre>\n<p>Usando il codice di cui sopra, la nostra immagine mancante adesso ha un po&#8217; pi\u00f9 di senso:<\/p>\n<div class=\"illustration full left\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/07\/can-email-be-responsive-2.png\" border=\"0\" \/><\/p>\n<p>Il testo alternativo funziona<\/p>\n<\/div>\n<h3>Call to Action<\/h3>\n<p>Uno dei vantaggi principali delle email HTML \u00e8 la possibilit\u00e0 di includere dei link cliccabili. Oltre ad includere semplicemente dei link nel testo, le email HTML ci permettono di usare dei grandi e bellissimi pulsanti per sedurre gli iscritti.<\/p>\n<p>Molti email marketer usano usano immagini cliccabili come pulsanti. Tuttavia, usando dei <a href=\"http:\/\/buttons.cm\">pulsanti a prova di bomba<\/a>, i designer possono realizzare dei pulsanti via codice che vengano resi in maniera consistente tra i vari client, anche con le immagini disabilitate.<\/p>\n<p>La tabella qui sotto \u00e8 un esempio di pulsanti tutti in HTML, che usa i border per far s\u00ec che l&#8217;interso pulsante sia cliccabile, non solo il testo:<\/p>\n<pre><code>&lt;table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" class=\"responsive-table\"&gt;\n\t&lt;tr&gt;\n\t\t&lt;td align=\"center\"&gt;&lt;a href=\"http:\/\/alistapart.com\" target=\"_blank\" style=\"font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #666666; text-decoration: none; background-color: #5D9CEC; border-top: 15px solid #5D9CEC; border-bottom: 15px solid #5D9CEC; border-left: 25px solid #5D9CEC; border-right: 25px solid #5D9CEC; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;\" class=\"mobile-button\"&gt;Learn More \u2192&lt;\/a&gt;&lt;\/td&gt;\n\t&lt;\/tr&gt;\n&lt;\/table&gt;<\/code><\/pre>\n<div class=\"illustration full left\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/07\/can-email-be-responsive-3.png\" border=\"0\" \/><\/p>\n<p>I pulsanti a prova di bomba hanno un bel aspetto con le immagini disabilitate<\/p>\n<\/div>\n<p>Una volta create le basi, \u00e8 il momento di vedere come si fa effettivamente funzionare bene un&#8217;email su un range di device di varie dimensioni.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Come funziona l&#8217;email responsive<\/h2>\n<p>Proprio come con i siti web responsive, ci sono tre componenti principali di un&#8217;email responsive: <strong>immagini flessibili<\/strong>, <strong>layout flessibili<\/strong> e <strong>media queries<\/strong>.<\/p>\n<p>L&#8217;unica differenza tra il web e l&#8217;email \u00e8 il modo in cui vengono implementate queste tre tecniche.<\/p>\n<p>Nell&#8217;email design, abbiamo un sottoinsieme limitato di HTML e CSS a nostra disposizione. Non possiamo fare affidamento su propriet\u00e0 e valori comunemente usati dai designer per i siti responsive sul web: margin, float e ema non funzionano in molti client email. Quindi dobbiamo pensare a delle soluzioni alternative.<\/p>\n<h3>Immagini flessibili<\/h3>\n<p>Le immagini fluide non sono molto complesse. Sebbene usino la propriet\u00e0 <code>width<\/code> impostata al 100%, alcuni client hanno dei problemi a rendere le immagini alla dimensione desiderata a meno che la width e la height non siano definite usando i corrispondenti attributi HTML. Pertanto, dobbiamo crearle a specifiche dimensioni e ridurle in seguito.<\/p>\n<p>Il primo passo \u00e8 essere sicuri che le immagini siano codificate in maniera robusta. Diamo un&#8217;occhiata alla nostra immagine della schermata dell&#8217;email di prima.<\/p>\n<pre><code>&lt;img src=\"responsive-email.jpg\" width=\"500\" height=\"200\" border=\"0\" alt=\"Can an email really be responsive?\" style=\"display: block; padding: 0; color: #666666; text-decoration: none; font-family: Helvetica, arial, sans-serif; font-size: 16px;\" class=\"img-max\"&gt;<\/code><\/pre>\n<p>Notate la propriet\u00e0 <code>display<\/code> che vi \u00e8 inclusa? \u00c8 solo un esempio dei molti hack richiesti per gestire gli impertinenti client email, cos\u00ec come lo \u00e8 l&#8217;attributo <code>border<\/code>. La maggior parte dei client di webmail aggiunge dello spazio attorno alle immagini nel tentativo di sistemare i problemi legati alla line-height che posssono insorgere. Rendere le immagini block-level eliminer\u00e0 quello spazio e salver\u00e0 il vostro design.<\/p>\n<p>Ora, quando vogliamo rendere le nostre immagini fluide, possiamo farlo in una media query nella head della nostra email:<\/p>\n<pre><code>img[class=\"img-max\u201d] {\n\twidth:100% !important; \n\theight: auto !important;\n}<\/code><\/pre>\n<p>Non tutte le immagini devono essere fluide. Elementi quali i loghi e le icone social rimarranno tipicamente della stessa dimensione indipendentemente dalla dimensione del device, che \u00e8 il motivo per cui andiamo a richiamare le immagini flessibili usando una class.<\/p>\n<p>Dal momento che sovrascriveremo sempre gli stili inline e gli attributi HTML, la dichiarazione <code>important<\/code> \u00e8 usata per essere sicuri che i nostri stili responsive abbiano la precedenza quando il documento viene reso.<\/p>\n<p>Vediamo qualcosa di un po&#8217; pi\u00f9 difficile.<\/p>\n<h3>Layout flessibili<\/h3>\n<p>La maggior parte dei web designer ha familiarit\u00e0 con la creazione di design responsive utilizzando <a href=\"http:\/\/alistapart.com\/article\/semanticsinhtml5\">elementi semantici<\/a> le cui dimensioni sono espresse con <a href=\"http:\/\/alistapart.com\/article\/fluidgrids\">unit\u00e0 relative<\/a> come percentuali, em e rem. Anche se possiamo ancora usare le percentuali per i layout flessibili nelle email, non verranno usate inline nelle tabelle e sono soggette ad alcune limitazioni.<\/p>\n<p>Quasi tutte le nostre tabelle useranno le percentuali per le proprie larghezze. Un&#8217;eccezione \u00e8 la tabella container con dimensioni specifiche in pixel per vincolare la larghezza generale del design dell&#8217;email per impedire che sia troppo grande nei client che non gestiscono bene le percentuali, ossia tipicamente la maggior parte delle versioni di Microsoft Outlook.<\/p>\n<p>Cominciamo dalla tabella container:<\/p>\n<pre><code>&lt;table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"500\" class=\"wrapper\"&gt;\n\t&lt;tr&gt;\n\t\t&lt;td&gt;\u2026Content\u2026&lt;\/td&gt;\n\t&lt;\/tr&gt;\n&lt;\/table&gt;<\/code><\/pre>\n<p>Usiamo l&#8217;attributo <code>width<\/code> per forzare la tabella ad una larghezza di 500 pixel.<\/p>\n<p>Questo container avr\u00e0 al suo interno tutte le altre tabelle annidate dell&#8217;email. Dal momento che tutto sar\u00e0 vincolato a quei 500 pixel di larghezza, possiamo tranquillamente usare le percentuali per le dimensioni delle altre tabelle.<\/p>\n<p>Ma a che cosa servono le tabelle flessibili se l&#8217;email \u00e8 <em>sempre<\/em> larga 500 pixel? Date ancora un&#8217;occhiata alla tabella container. Notate che ho aggiunto una class <code>wrapper<\/code>. Useremo questo selettore per rendere le nostre email davvero responsive usando le media query (cos&#8217;altro se no?).<\/p>\n<h3>Media query nelle email<\/h3>\n<p>Le media queries nelle email funzionano proprio come nel web design. Includendole nella head dell&#8217;email si possono avere come obiettivo degli specifici attributi di device ed aggiustare i propri stili di conseguenza.<\/p>\n<p>Tenendo le cose semplici, avremo come obiettivo le viewport con una <code>max-width<\/code> di 525 pixel e inferiori. Poi, con obiettivo quella tabella &#8220;wrapper&#8221;, possiamo sovrascrivere quegli attributi HTML e stili inline per far si che la tabella sia della larghezza totale dello schermo sui device mobile.<\/p>\n<pre><code>@media screen and (max-width:525px) {\n\ttable[class=\u201cwrapper\u201d] {\n\t\twidth:100% !important;\n\t}\n}<\/code><\/pre>\n<p>Possiamo anche avere come obiettivo qualsiasi tabella annidata per fare la stessa cosa: impilare efficacemente le sezioni di contenuto per una esperienza mobile migliorata. Non \u00e8 una cattiva idea far aumentare anche la dimensione dei testo e dei pulsanti su mobile.<\/p>\n<pre><code>@media screen and (max-width:525px) {\n\tbody, table, td, a {\n\t\tfont-size:16px !important;\n\t}\t\n\ttable[id=\u201cresponsive-table\u201d] {\n\t\twidth:100% !important;\n\t}\n}<\/code><\/pre>\n<p>Il principale svantaggio dell&#8217;utilizzo delle media query \u00e8 che non sono supportate ovunque. Mentre i client email basati su WebKit, come iOS Mail e l&#8217;app per l&#8217;email di default di Android funzionano bene, i dispositivi Blackberry pi\u00f9 vecchi, il Windows Phone 8 e l&#8217;app di Gmail su tutte le piattaforme ignorano le media query.<\/p>\n<p>Fortunatamente, iOS e Android <a href=\"http:\/\/emailclientmarketshare.com\">costituiscono la maggioranza<\/a> del pubblico dell&#8217;email mobile, cos\u00ec potete essere praticamente sicuri che la maggior parte degli iscritti vedr\u00e0 la vostra email responsive cos\u00ec come l&#8217;avete pensata.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Esplorate l&#8217;email design<\/h2>\n<p>Le tecniche descritte prima sono solo l&#8217;inizio. Degli intrepidi designer di email stanno esplorando l&#8217;uso di web font, di SVG e delle animazioni CSS3 nell&#8217;email. Sicuramente, l&#8217;email design \u00e8 difficile e le cose non funzionano regolarmente, ma questo non dovrebbe precludervi l&#8217;esplorazione di tecniche avanzate per capire cosa funziona per voi e per il vostro pubblico.<\/p>\n<p>La mia unica raccomandazione \u00e8 di testare moltissimo ogni email che create. I client email sono molto peggio dei browser in termini di resa e supporto di HTML e CSS. Testare sia su device sia usando un servizio di anteprima dell&#8217;email, che sia <a href=\"http:\/\/litmus.com\">Litmus<\/a>, <a href=\"http:\/\/emailonacid.com\">Email on Acid<\/a>, il vostro <a href=\"http:\/\/stylecampaign.com\/blog\/2012\/09\/mobile-email-testing-rig\/\">device lab<\/a> o qualcosa d&#8217;altro ancora, \u00e8 di aiuto per identificare i problemi e vi permette di trovare i problemi prima di mandarla a un milione di iscritti.<\/p>\n<p>Oltre a testare il vostro codice e la resa, tracciate tutte le email e testate che <a href=\"http:\/\/mailchimp.com\/resources\/guides\/how-to-create-an-email-marketing-plan\/html\/\">tipo di contenuto<\/a>, copy, design e <a href=\"http:\/\/www.campaignmonitor.com\/guides\/planning\/qanda\/\">frequenza di invio<\/a> va meglio per il vostro pubblico.<\/p>\n<p>Soprattutto, non ignorate l&#8217;email design. \u00c8 necessariamente malefico, ma diventa sempre meglio. <a href=\"https:\/\/litmus.com\/community\">Si sta finalmente formando una community<\/a> attorno all&#8217;email design e le tecniche vengono costantemente rifinite e perfezionate. Il responsive email design \u00e8 una di queste. Se vi interessa davvero il vostro prodotto e la vostra presenza sul web, dovete usare la stessa passione e perizia che mettete nell&#8217;interfaccia della vostra app e trasferirla ad uno dei medium pi\u00f9 diffusi e di valore che ci siano in giro.<\/p>\n<p>Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Che le si ami o le si odi, non si pu\u00f2 certo negare la popolarit\u00e0 delle email HTML. Inoltre, come il web prima di lei, la inbox \u00e8 ufficialmente diventata mobile, con oltre il 50% delle email aperte sui device mobile. Tuttavia, il design delle email \u00e8 una pratica scandalosamente datata. (Vi ricordate com&#8217;era scrivere codice prima che i web standard diventassero\u2026 standard?). Ma la programmazione di email non emdeve\/em essere una lezione di frustrazione. Sebbene i designer di email debbano ancora creare i layout usando le tabelle e assegnargli stili tramite attributi HTML e (o mamma!) stili inline, un certo numero di intrepidi designer sta prendendo le moderne tecniche pionieristiche per il web e le sta applicando all&#8217;arcaica pratica dell&#8217;email design. Jason Rodriguez ci mostra come applicare i principi del responsive web design al regno, frustrante ma essenziale, dell&#8217;email design. <\/p>\n","protected":false},"author":818,"featured_media":7000736,"comment_status":"open","ping_status":"open","template":"","categories":[272,113,274],"tags":[],"coauthors":[424],"class_list":["post-472","article","type-article","status-publish","has-post-thumbnail","hentry","category-layout-and-grids","category-numero-95-29-luglio-2014","category-responsive-design"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/472","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=472"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000736"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=472"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=472"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=472"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}