L’imminente rivoluzione nell’email design

L’email, la cugina calunniata del web, è nel mezzo di una rivoluzione, quella che cambierà 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.

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à sono sempre più usati dagli sviluppatori per lanciare campagne che una volta erano impossibili. E, per chiunque venga dal mondo del web, ci sono più tool, template e framework che mai per rendere quanto più semplice possibile questa transizione. Per gli sviluppatori di email più stagionati, questi tool possono ridurre i tempi di produzione dell’email ed aumentare l’affidabilità e l’efficacia delle campagne di email.

Forse ancora più importante, il settore stesso dell’email è 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 è probabile che i progressi saranno lenti, c’è finalmente una speranza perché ci sia un supporto migliore per HTML e CSS nella inbox.

Sebbene debbano essere ancora gestiti alcuni problemi, non c’è mai stato un momento migliore per prendere in seria considerazione l’email. Per un canale che è usato da quasi tutte le attività di business e a cui la maggior parte dei consumatori non può 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.

Diamo un’occhiata a come si stanno manifestando questi cambiamenti.

Il web arriva nell’email#section1

C’è 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 è rifiutata di credere che l’email potesse fare qualcosa di più di sembrare utile e inviare dei contenuto di base agli iscritti.

Per alcuni sviluppatori di email, però, questi vincoli frustranti sono diventate sfide a cui ispirarsi e i catalizzatori di una varietà di tecniche che spostano il paradigma.

Quando ho scritto l’ultima volta a proposito dell’email per A List Apart, 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.

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 per supportare le email responsive è un enorme passo avanti per la community, gli sforzi pionieristici degli email developer frustrati non dovrebbero passare sotto silenzio.

Estendendo il lavoro introdotto per primo da Fabio Carneiro di MailChimp, persone come Mike Ragan e Nicole Merlin hanno sviluppato un insieme di tecniche tipicamente chiamate hybrid coding. 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à CSS max-width e con le conditional ghost table per Microsoft Outlook, che non supporta max-width. Insieme alle immagini responsive-by-default di Julie Ng, l’hybrid coding è un modo efficace per gli sviluppatori email per costruire campagne che funzionino bene in quasi tutti i client email più popolari.

<img alt="" src="" width="600" style="display: block; width: 100%; max-width: 100%; min-width: 100px; font-family: sans-serif; color: #000000; font-size: 24px; border="0";" />

Immagini responsive-by-default con attributi HTML e CSS inline.

Più recentemente, sono emersi altri due metodi che gestiscono le questioni dell’email mobile usando tecniche più avanzate. Sia la tecnica Fab Four di Rémi Parmentier sia l’approccio mobile-first di Stig Morten Myre prendono il concetto di sviluppo mobile-first così 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 di CSS per determinare le larghezze della tabella e delle sue celle, permettendo la creazione di email molto più adattabili in una gran varietà 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.

Andando oltre i responsive layout, gli email designer stanno aggiungendo sempre più animazioni ed interattività alle loro campagne, creando esperienze più 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) 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ù opzioni per sorprendere e deliziare il proprio pubblico.

I colori di sfondo di Nest che cambiano con un’animazione guidata dai keyframe. Immagine per gentile concessione di Nest.

Insieme al checkbox hack e al punched card coding di Mark Robbins, le animazioni CSS permettono agli email developer di creare delle esperienze altamente interattive per la inbox. Mentre esempi più vecchi di interattività erano riservati a elementi come i carousel dei prodotti, persone come Robbins e il team di Rebelmail hanno cominciato a creare esperienze di checkout completamente sviluppate all’interno dell’email.

Le diverse fasi del checkout interattivo nell’email di Rebelmail. Immagine per gentile concessione di Rebelmail.

Tuttavia, l’interattività non deve essere riservata alla visualizzazione dei prodotti del negozio. In Litmus, le animazioni e l’interattività sono state usate per fornire un tour completo del prodotto all’interno di un’email.

Un tour interattivo del prodotto in un’email. Immagine per gentile concessione di Litmus.

In questo caso, l’interattività è 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.

Finalmente, il focus del web sull’accessibilità 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à 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à.

L’uso di role=presentation sulle tabelle nell’email sta diventando più diffuso. Includendo role=presentation 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.

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. È qualcosa che tutti gli email developer dovrebbero fare.

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ù usabili ed accessibili. C’è ancora una gran quantità di ricerca ed istruzione necessaria attorno all’accessibilità nell’email, ma il mondo dell’email sta lentamente mettendosi al pari con quello del web.

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à 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.

Strumenti migliori#section2

Se c’è qualcosa che può essere considerato come una costante sul web, è che i web designer e developer amano creare tool e framework per migliorare (in teoria) i propri workflow e l’affidabilità del proprio codice. Proprio come l’accessibilità e l’interattività, questo focus sui tool e sui framework si è fatto strada nel settore dell’email negli ultimi anni.

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ù largamente utilizzati, così come gli static site generator come Middleman.

Essere in grado di concentrarsi su componenti discrete significa che gli sviluppatori non devono più aggiornare più 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.

L’uso di build tool apre anche la possibilità 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à agli email marketer un modo incredibilmente potente di connettersi con gli iscritti e di fornire molto più valore rispetto alla tipica campagna “batch and blast”.

In maniera simile, sempre più 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ò 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.

Gli email developer e designer che lavorano con team più piccoli o quelli che hanno meno familiarità 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à da semplici file HTML statici che rendono facile la personalizzazione fino a framework di programmazione completamente astratti come MJML e Foundation for Emails 2 di Zurb. Sia MJML sia Foundation for Emails 2 introducono i propri linguaggi di templating, permettendo agli email developer di usare un markup più simile a quello che si trova sul web, che viene poi compilato in HTML più complesso basato sulle tabelle.

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-text>Hello World!</mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

Un esempio del linguaggio di templating MJML, che viene compilato in markup basato sulle tabelle.

Un’area che ha ancora bisogno di miglioramenti è 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 è 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 di Cyrill Gross), i tool per i test delle email interattive devono migliorare perché un numero maggiore di email developer adotti alcune delle tecniche che ho qui descritto.

Un posto a tavola#section3

Due degli sviluppi più esaltanti nel mondo dell’email sono la partnership tra Microsoft e Litmus e l’annuncio del supporto delle media queries da parte di Gmail.

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ù fastidiosa degli email developer. Outlook è il motivo principale per cui le email usano le tabelle per i layout.

Ora, però, per la prima volta, Microsoft sta prendendo contatti con l’email community per documentare i bug e i problemi di rendering, così 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ì ampiamente tra i client email come sul web, ma questo è un primo passo verso un supporto migliore di HTML e CSS per gli email developer.

Un risultato probabile della partnership Microsoft/Litmus è che più produttori di client email apriranno linee di comunicazione con il settore dell’email design. Con un po’ di fortuna e molto lavoro, Microsoft sarà 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à segni che le cose stanno migliorando oltre la promessa di Microsoft di migliorare.

Gmail, uno dei client di email più problematici, ha recentemente aggiornato il proprio rendering engine per supportare display: none, una mossa senza precedenti da parte di un team che è storicamente indifferente ai problemi della email community. Gli email developer si sono trovati una sorpresa ancora più 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 è più semplice che mai applicare i principi del responsive web design – griglie fluide, immagini fluide e media queries – alle campagne di email HTML.

Forse è ancora più 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ù limitati agli stili inline con tutti i grattacapi che ne derivano. Le email saranno adesso più semplici da progettare, sviluppare e mantenere. La code base più leggera e lo stile di scrittura del CSS più familiare significano che molte delle cose che bloccavano i web developer dal prendere sul serio l’email saranno ora rimosse.

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ù 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.

Forse ancora più importante, i designer e developer stanno cominciando a capire che lavorare con l’email è un’opzione di carriera percorribile. Invece di relegare le email a uno o più task come un web dev, molti stanno ora indossando il mantello del full-time email developer.

Adesso è il momento#section4

Dove una volta c’erano solo oscurità 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.

Sebbene alcune persone abbiano espresso emozioni che vanno dal divertimento al disprezzo quando si parla di email marketing, nessuno può più darlo per scontato. Chi si iscrive ama le email, anche se a voi non piacciono. L’email è regolarmente il canale digitale di marketing più efficace. Le aziende e i team devono farsi piacere questo dato di fatto e prendere sul serio le email. Fortunatamente, adesso è il momento giusto per farlo. Non ci sono mai stati così tanti tool, risorse e persone dedicate a rendere migliore l’email.

La rivoluzione nell’email è 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).