{"id":682,"date":"2016-12-12T19:34:26","date_gmt":"2016-12-12T18:34:26","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/imminente-rivoluzione-nel-email-design\/"},"modified":"2016-12-12T19:34:26","modified_gmt":"2016-12-12T18:34:26","slug":"imminente-rivoluzione-nel-email-design","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/imminente-rivoluzione-nel-email-design\/","title":{"rendered":"L’imminente rivoluzione nell’email design"},"content":{"rendered":"
\n

L’email, la cugina calunniata del web, \u00e8\tnel mezzo di una rivoluzione, quella che cambier\u00e0 non solo il modo in cui i designer e i developer costruiscono le campagne di email HTML, ma anche il modo in cui gli iscritti interagiranno con tali campagne.<\/p>\n

Nonostante la lentezza dei produttori di client email nell’aggiornare i propri rendering engine, gli email designer stanno sviluppando nuovi modi per portare nella inbox le tecniche comuni del web. Effetti quali animazioni ed interattivit\u00e0 sono sempre pi\u00f9 usati dagli sviluppatori per lanciare campagne che una volta erano impossibili. E, per chiunque venga dal mondo del web, ci sono pi\u00f9 tool, template e framework che mai per rendere quanto pi\u00f9 semplice possibile questa transizione. Per gli sviluppatori di email pi\u00f9 stagionati, questi tool possono ridurre i tempi di produzione dell’email ed aumentare l’affidabilit\u00e0 e l’efficacia delle campagne di email.<\/p>\n

Forse ancora pi\u00f9 importante, il settore stesso dell’email \u00e8 in uno stato di reinvenzione. Per la prima volta, i produttori di email client, tradizionalmente restii ad aggiornare o cambiare i propri rendering engine, stanno ascoltando le preoccupazioni dei professionisti dell’email. Sebbene \u00e8 probabile che i progressi saranno lenti, c’\u00e8 finalmente una speranza perch\u00e9 ci sia un supporto migliore per HTML e CSS nella inbox.<\/p>\n

Sebbene debbano essere ancora gestiti alcuni problemi, non c’\u00e8 mai stato un momento migliore per prendere in seria considerazione l’email. Per un canale che \u00e8 usato da quasi tutte le attivit\u00e0 di business e a cui la maggior parte dei consumatori<\/a> non pu\u00f2 rinunciare, questi cambiamenti segnalano un cambiamento importante in un settore in forte crescita, uno a cui i designer, developer e strategist del web dovrebbero cominciare a prestare attenzione.<\/p>\n

Diamo un’occhiata a come si stanno manifestando questi cambiamenti.<\/p>\n<\/div>\n

\n

Il web arriva nell’email<\/h2>\n

C’\u00e8 il vecchio adagio che dice che l’email design sia fermo nel passato. Per un tempo lunghissimo, gli sviluppatori sono stati costretti a rivedere tecniche di programmazione che risalivano addirittura all’inizio degli anni 2000 se volevano creare una campagna via email. Incastrati in layout basati su tabelle e dovendo far affidamento sugli stili inline, la maggior parte degli sviluppatori si \u00e8 rifiutata di credere che l’email potesse fare qualcosa di pi\u00f9 di sembrare utile e inviare dei contenuto di base agli iscritti.<\/p>\n

Per alcuni sviluppatori di email, per\u00f2, questi vincoli frustranti sono diventate sfide a cui ispirarsi e i catalizzatori di una variet\u00e0 di tecniche che spostano il paradigma.<\/p>\n

Quando ho scritto l’ultima volta a proposito dell’email<\/a> per A List Apart<\/cite>, la maggior parte delle persone stavano appena scoprendo il responsive email design. Pratiche comuni sul web, come l’uso di griglie fluide, di immagini fluide e di media queries, erano ancora nuovissime nel mondo dell’email marketing. Tuttavia, le limitazioni di alcuni client di email hanno forzato i developer a ripensare completamente l’email responsive.<\/p>\n

Fino a poco tempo fa, Gmail si rifiutava di supportare le media queries (e la maggior parte degli stili embedded), lasciando che campagne responsive ben progettate apparissero disastrose nell’app mobile Gmail. Mentre il loro aggiornamento recentemente annunciato<\/a> per supportare le email responsive \u00e8 un enorme passo avanti per la community, gli sforzi pionieristici degli email developer frustrati non dovrebbero passare sotto silenzio.<\/p>\n

Estendendo il lavoro introdotto per primo da Fabio Carneiro<\/a> di MailChimp, persone come Mike Ragan<\/a> e Nicole Merlin<\/a> hanno sviluppato un insieme di tecniche tipicamente chiamate hybrid coding<\/a>. Invece di fare affidamento sulle media queries per far scattare gli stati, le email ibride sono fluide di default, lasciandosi alle spalle i pixel fissi in favore di tabelle basate sulle percentuali. Queste tabelle fluide sono poi vincolate a dimensioni appropriate sul desktop con la propriet\u00e0 CSS max-width<\/code> e con le conditional ghost table per Microsoft Outlook, che non supporta max-width<\/code>. Insieme alle immagini responsive-by-default di Julie Ng<\/a>, l’hybrid coding \u00e8 un modo efficace per gli sviluppatori email per costruire campagne che funzionino bene in quasi tutti i client email pi\u00f9 popolari.<\/p>\n

<<\/span>img alt=\"\"<\/span> src=\"\"<\/span> width=\"600\"<\/span> style=\"display<\/span>:<\/span> block;<\/span> width<\/span>:<\/span> 100%;<\/span> max-width<\/span>:<\/span> 100%;<\/span> min-width<\/span>:<\/span> 100px;<\/span> font-family<\/span>:<\/span> sans-serif;<\/span> color<\/span>:<\/span> #000000;<\/span> font-size<\/span>:<\/span> 24px;<\/span> border=\"0\"<\/span>;<\/span>\" \/><\/span><\/code><\/pre>\n
\u00a0<\/p>\n
Immagini responsive-by-default con attributi HTML e CSS inline.<\/p>\n
\u00a0<\/p>\n
Andando oltre i responsive layout, gli email designer stanno aggiungendo sempre pi\u00f9 animazioni ed interattivit\u00e0 alle loro campagne, creando esperienze pi\u00f9 coinvolgenti per gli iscritti. Le GIF animate sono da molto tempo un cardine dell’email design, ma le animazioni CSS stanno diventando recuperando terreno. Semplici transizioni e abbellimenti stilistici come l’animazione del cuore di Email Weekly (andate verso il basso della pagina<\/a>) o i colori di background di Nest che cambiano sono relativamente semplici da implementare, hanno un graceful fall back quando non sono supportati e danno agli email designer pi\u00f9 opzioni per sorprendere e deliziare il proprio pubblico.<\/p>\n
\"immagine I colori di sfondo di Nest che cambiano con un’animazione guidata dai keyframe. Immagine per gentile concessione di Nest.<\/p>\n
Insieme al checkbox hack e al punched card coding<\/a> di Mark Robbins, le animazioni CSS permettono agli email developer di creare delle esperienze altamente interattive per la inbox. Mentre esempi pi\u00f9 vecchi di interattivit\u00e0 erano riservati a elementi come i carousel dei prodotti, persone come Robbins e il team di Rebelmail<\/a> hanno cominciato a creare esperienze di checkout completamente sviluppate all’interno dell’email.<\/p>\n
\"Immagine Le diverse fasi del checkout interattivo nell’email di Rebelmail. Immagine per gentile concessione di Rebelmail.<\/p>\n
Tuttavia, l’interattivit\u00e0 non deve essere riservata alla visualizzazione dei prodotti del negozio. In Litmus, le animazioni e l’interattivit\u00e0 sono state usate per fornire un tour completo del prodotto all’interno di un’email.<\/p>\n
\"Screenshot Un tour interattivo del prodotto in un’email. Immagine per gentile concessione di Litmus.<\/p>\n
In questo caso, l’interattivit\u00e0 \u00e8 stata usata per dare informazioni sul prodotto, permettendo agli utenti di fare esperienza di un prodotto prima di poterlo avere tra le mani. Sebbene tali effetti informativi siano stati in passato ottenuti con le GIF animate, l’aggiunta di elementi davvero interattivi ha creato un’esperienza che l’ha elevata al di sopra di campagne simili.<\/p>\n
Finalmente, il focus del web sull’accessibilit\u00e0 sta facendo la sua comparsa anche nell’email. Sia i layout table-based sia le inconsistenze nel supporto di elementi semantici nei vari client email hanno contribuito a una quasi totale mancanza di accessibilit\u00e0 nelle campagne di email. I sostenitori stanno adesso dando voce e contribuendo a cambiare il modo in cui gli sviluppatori creano email tenendo a mente l’accessibilit\u00e0.<\/p>\n
L’uso di role=presentation<\/code> sulle tabelle nell’email sta diventando pi\u00f9 diffuso. Includendo role=presentation<\/code> sugli elementi della tabella, gli screen reader riconoscono che quelle tabelle sono usate per il layout invece che per presentare dati e saltano immediatamente al contenuto della campagna.<\/p>\n
Gli sviluppatori stanno anche adottando elementi semantici come gli heading e i paragrafi appropriati per dare valore aggiunto per le persone con problemi seri alla vista. Stando attenti a sovrascrivere i margini di default negli elementi semantici e block-level, i designer possono tranquillamente usare quegli elementi senza preoccuparsi dei layout malfunzionanti. \u00c8 qualcosa che tutti gli email developer dovrebbero fare.<\/p>\n
Insieme al focus dell’email sul testo alternativo, usato ampiamente per combattere gli email client che disabilitano le immagini per ragioni di sicurezza, le tabelle accessibili e gli elementi semantici stanno preparando le fondamenta per campagne di email pi\u00f9 usabili ed accessibili. C’\u00e8 ancora una gran quantit\u00e0 di ricerca ed istruzione necessaria attorno all’accessibilit\u00e0 nell’email, ma il mondo dell’email sta lentamente mettendosi al pari con quello del web.<\/p>\n
Tutte queste tecniche, piuttosto comuni nel web, sono relativamente nuove nel mondo dell’email HTML. Alcune sono state usate su scala limitata ma sono sul punto di diventare mainstream. E, mentre l’animazione e l’interattivit\u00e0 non sono appropriate per tutte le campagne di email, sono aggiunte preziose alla scatola degli attrezzi dell’email. Messe insieme, rappresentano un cambiamento enorme nell’approccio all’email HTML da parte di developer e marketer e stanno cambiando il modo in cui i subscriber pensano all’umile inbox.<\/p>\n<\/div>\n
\n
Strumenti migliori<\/h2>\n
Se c’\u00e8 qualcosa che pu\u00f2 essere considerato come una costante sul web, \u00e8 che i web designer e developer amano creare tool e framework per migliorare (in teoria) i propri workflow e l’affidabilit\u00e0 del proprio codice. Proprio come l’accessibilit\u00e0 e l’interattivit\u00e0, questo focus sui tool e sui framework si \u00e8 fatto strada nel settore dell’email negli ultimi anni.<\/p>\n
Invece di fare affidamento su file HTML statici singoli, salvati localmente, molti email developer stanno ora adottando non solo GitHub per ospitare e condividere il proprio codice, ma costruiscono anche sistemi completi per compilare codice. Tool come Grunt e Gulp sono ora pi\u00f9 largamente utilizzati, cos\u00ec come gli static site generator come Middleman.<\/p>\n
Essere in grado di concentrarsi su componenti discrete significa che gli sviluppatori non devono pi\u00f9 aggiornare pi\u00f9 file HTML quando gestiscono grandi programmi di email. Per team che devono gestire dozzine, se non centinaia, di diversi template per le email si tratta di un dono dal cielo. Aggiornare un logo in un posto e vederlo aggiornato in diverse campagne, per esempio, fa risparmiare un sacco di tempo.<\/p>\n
L’uso di build tool apre anche la possibilit\u00e0 di campagne iper-personalizzate: email con contenuto personalizzato e layout personalizzati per ogni iscritto. Permettere ai build system di gestire la compilation di moduli individuali significa che quei moduli possono essere messi insieme in un numero virtualmente illimitato di modi in base alle condizioni impostate all’inizio del processo di build. Questo porta la personalizzazione nell’email oltre la basica sostituzione del nome e d\u00e0 agli email marketer un modo incredibilmente potente di connettersi con gli iscritti e di fornire molto pi\u00f9 valore rispetto alla tipica campagna \u201cbatch and blast\u201d.<\/p>\n
In maniera simile, sempre pi\u00f9 email developer fanno affidamento su preprocessori come Sass e Less per velocizzare il workflow di sviluppo. Controllare gli stili attraverso variabili, mixin e logica pu\u00f2 essere estremamente potente. Anche se i CSS post processo non sono molto usati, alcuni saggi email developer stanno ora cominciando a sfruttare nelle proprie campagne alcune imminenti feature di CSS.<\/p>\n
Gli email developer e designer che lavorano con team pi\u00f9 piccoli o quelli che hanno meno familiarit\u00e0 con tool avanzati come i preprocessori e i build tool hanno ora a propria disposizione una pletora di email template HTML e di framework. Variano in complessit\u00e0 da semplici file HTML statici<\/a> che rendono facile la personalizzazione fino a framework di programmazione completamente astratti come MJML<\/a> e Foundation for Emails 2<\/a> di Zurb. Sia MJML sia Foundation for Emails 2 introducono i propri linguaggi di templating, permettendo agli email developer di usare un markup pi\u00f9 simile a quello che si trova sul web, che viene poi compilato in HTML pi\u00f9 complesso basato sulle tabelle.<\/p>\n
<<\/span>mjml<\/span>><\/span><\/span>\n  <<\/span>mj-body<\/span>><\/span><\/span>\n    <<\/span>mj-container<\/span>><\/span><\/span>\n      <<\/span>mj-section<\/span>><\/span><\/span>\n        <<\/span>mj-column<\/span>><\/span><\/span>\n          <<\/span>mj-text<\/span>><\/span><\/span>Hello World!<\/<\/span>mj-text<\/span>><\/span><\/span>\n        <\/<\/span>mj-column<\/span>><\/span><\/span>\n      <\/<\/span>mj-section<\/span>><\/span><\/span>\n    <\/<\/span>mj-container<\/span>><\/span><\/span>\n  <\/<\/span>mj-body<\/span>><\/span><\/span>\n<\/<\/span>mjml<\/span>><\/span><\/span><\/code><\/pre>\n
\u00a0<\/p>\n
Un esempio del linguaggio di templating MJML, che viene compilato in markup basato sulle tabelle.<\/p>\n
\u00a0<\/p>\n
\n
Un posto a tavola<\/h2>\n
Due degli sviluppi pi\u00f9 esaltanti nel mondo dell’email sono la partnership tra Microsoft e Litmus e l’annuncio del supporto delle media queries da parte di Gmail.<\/p>\n
A causa del loro tipico supporto terribile per HTML e CSS (specialmente il box model e i float), le molte variazioni di Outlook sono da molto tempo la spina nel fianco pi\u00f9 fastidiosa degli email developer. Outlook \u00e8 il motivo principale per cui le email usano le tabelle per i layout.<\/p>\n
Ora, per\u00f2, per la prima volta, Microsoft sta prendendo contatti<\/a> con l’email community per documentare i bug e i problemi di rendering, cos\u00ec da guidare i futuri sforzi di sviluppo e migliorare i rendering engine sottostanti i propri client di email. Sebbene dovremo ancora far affidamento sulle tabelle nell’immediato futuro, si tratta di un buon indicatore che l’email community si sta muovendo verso alcune forme di standard, in maniera simile a quello che accadde nel web nei primi anni 2000. Io non penso che vedremo mai degli standard propagarsi cos\u00ec ampiamente tra i client email come sul web, ma questo \u00e8 un primo passo verso un supporto migliore di HTML e CSS per gli email developer.<\/p>\n
Un risultato probabile della partnership Microsoft\/Litmus \u00e8 che pi\u00f9 produttori di client email apriranno linee di comunicazione con il settore dell’email design. Con un po’ di fortuna e molto lavoro, Microsoft sar\u00e0 il primo di molti vendor a sedersi ad un tavolo con gli email designer, developer e marketer per migliorare le cose non solo per i professionisti dell’email, ma anche per gli iscritti che serviamo. Ci sono gi\u00e0 segni che le cose stanno migliorando oltre la promessa di Microsoft di migliorare.<\/p>\n
Gmail, uno dei client di email pi\u00f9 problematici, ha recentemente aggiornato il proprio rendering engine per supportare display: none<\/code>, una mossa senza precedenti da parte di un team che \u00e8 storicamente indifferente ai problemi della email community. Gli email developer si sono trovati una sorpresa ancora pi\u00f9 grande dal team di Gmail quando questi ha annunciato che avrebbero supportato le media queries e gli embedded styles. Sebbene l’approccio hybrid coding menzionato prima sia ancora utile per gestire alcuni client email, questo cambiamento significa che adesso \u00e8 pi\u00f9 semplice che mai applicare i principi del responsive web design – griglie fluide, immagini fluide e media queries – alle campagne di email HTML.<\/p>\n
Forse \u00e8 ancora pi\u00f9 interessante il supporto aggiunto da Gmail per l’embedded CSS e i selettori di elemento, class e ID. Con questo cambiamento, gli embedded styles saranno supportati quasi universalmente, il che significa che gli email designer non saranno pi\u00f9 limitati agli stili inline con tutti i grattacapi che ne derivano. Le email saranno adesso pi\u00f9 semplici da progettare, sviluppare e mantenere. La code base pi\u00f9 leggera e lo stile di scrittura del CSS pi\u00f9 familiare significano che molte delle cose che bloccavano i web developer dal prendere sul serio l’email saranno ora rimosse.<\/p>\n
Oltre a unirsi per migliorare il supporto di HTML e CSS, la email community stessa sta crescendo. Ricordo i giorni bui, solo qualche anno fa, dell’email design, quando era estremamente difficile trovare informazioni affidabili sul modo in cui creare campagne email, per non parlare del mettersi in contatto con altri che facevano le stesse cose. Oggi, le persone interessate all’email hanno una grande e crescente community a cui rivolgersi per chiedere aiuto. Pi\u00f9 marketer, designer e developer stano condividendo i propri lavori ed opinioni, contribuendo a un discorso che sta aiutando a modellare il settore in modi nuovi ed interessanti.<\/p>\n
Forse ancora pi\u00f9 importante, i designer e developer stanno cominciando a capire che lavorare con l’email \u00e8 un’opzione di carriera percorribile. Invece di relegare le email a uno o pi\u00f9 task come un web dev, molti stanno ora indossando il mantello del full-time email developer.<\/p>\n<\/div>\n
\n
Adesso \u00e8 il momento<\/h2>\n
Dove una volta c’erano solo oscurit\u00e0 e Dreamweaver, il mondo dell’email sta risplendendo della luce di una community in crescita, di tool migliori e di tecniche sorprendenti per animare un medium tradizionalmente statico. E, con il crescente supporto dei vendor di email client, possiamo finalmente vedere la luce degli standard email all’orizzonte.<\/p>\n
Sebbene alcune persone abbiano espresso emozioni che vanno dal divertimento<\/a> al disprezzo<\/a> quando si parla di email marketing, nessuno pu\u00f2 pi\u00f9 darlo per scontato. Chi si iscrive ama le email, anche se a voi non piacciono. L’email \u00e8 regolarmente il canale digitale di marketing pi\u00f9 efficace<\/a>. Le aziende e i team devono farsi piacere questo dato di fatto e prendere sul serio le email. Fortunatamente, adesso \u00e8 il momento giusto per farlo. Non ci sono mai stati cos\u00ec tanti tool, risorse e persone dedicate a rendere migliore l’email.<\/p>\n
La rivoluzione nell’email \u00e8 destinata ad essere lenta, ma non fatevi trarre in inganno: sta arrivando. Il web sta penetrando nella inbox. Se non riuscirete a tenere il passo, resteranno indietro le vostre campagne (e voi).<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
L’email non si sta solo evolvendo, sta organizzando un golpe. Sempre pi\u00f9 designer se ne stanno uscendo con nuovi esaltanti modi per portare nell’umile inbox effetti come l’animazione e l’interazione. In maniera determinante, per la prima volta, i produttori di client email come Microsoft e Google stanno ascoltando le preoccupazioni espresse dai professionisti dell’email. Il web sta filtrando nella inbox, scrive Jason Rodriguez. Non rimanete indietro.<\/p>\n","protected":false},"author":818,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","categories":[263,247,163],"tags":[],"coauthors":[424],"class_list":["post-682","article","type-article","status-publish","hentry","category-business","category-html","category-numero-185-12-dicembre-2016"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/682","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=682"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=682"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Un’area che ha ancora bisogno di miglioramenti \u00e8 il testing. Sebbene tool come Litmus abbiano migliorato enormemente l’esperienza dei test delle email statiche nei vari client, le email interattive presentano delle nuove sfide. Dal momento che i servizi di testing al momento ritornano screenshot statici presi dalla inbox, l’accesso al device \u00e8 di cruciale importanza per team che lavorano su campagne interattive. Sebbene alcune persone se ne stiano uscendo con approcci nuovi per testare le email interattive (in particolar modo, l’uso dei browser WebKit e di JavaScript intelligente<\/a> di Cyrill Gross<\/a>), i tool per i test delle email interattive devono migliorare perch\u00e9 un numero maggiore di email developer adotti alcune delle tecniche che ho qui descritto.<\/p>\n<\/div>\n
Pi\u00f9 recentemente, sono emersi altri due metodi che gestiscono le questioni dell’email mobile usando tecniche pi\u00f9 avanzate. Sia la tecnica Fab Four<\/a> di R\u00e9mi Parmentier sia l’approccio mobile-first<\/a> di Stig Morten Myre prendono il concetto di sviluppo mobile-first cos\u00ec comune sul web e lo applicano all’email. Invece di fare affidamento su tabelle fluide basate sulle percentuali, entrambe le tecniche sfruttano la funzione calc<\/code> di CSS per determinare le larghezze della tabella e delle sue celle, permettendo la creazione di email molto pi\u00f9 adattabili in una gran variet\u00e0 di client. E, in entrambe i casi,  gli sviluppatori possono fondamentalmente abbandonare l’uso delle tabelle nel proprio markup (ad eccezione delle ghost table per Microsoft), creando email che si avvicinano molto al markup moderno del web.<\/p>\n