Un'introduzione alla creazione e all'invio di e-mail HTML per sviluppatori Web

Ho passato gli ultimi anni a creare strumenti di sviluppo, due di quegli anni come responsabile della progettazione del prodotto presso Mailgun, un servizio di posta elettronica per sviluppatori, dove ho imparato molto su come funziona la posta elettronica e sui problemi che gli sviluppatori devono affrontare durante la creazione di posta elettronica HTML. In questo post, condividerò alcune delle mie conoscenze sull'argomento.

Email HTML: due parole che, se combinate, fanno venire le lacrime agli occhi di uno sviluppatore. Se sei uno sviluppatore web, è inevitabile che la codifica di un'e-mail sia un'attività che ti viene lasciata in grembo ad un certo punto della tua carriera, che ti piaccia o no. La codifica dell'e-mail HTML è vecchia scuola. Ripensa al 1999, quando ci chiamavamo "webmaster" e usavamo gli editor e le tabelle di Frontpage, WYSIWYG per contrassegnare i nostri siti web.

Non è cambiato molto nel design dell'e-mail. In effetti, è peggiorato. Con l'introduzione dei dispositivi mobili e di un numero sempre maggiore di client di posta elettronica, abbiamo ancora più avvertimenti da affrontare durante la creazione di e-mail HTML.

Ho passato gli ultimi anni a creare strumenti di sviluppo, due di quegli anni come responsabile della progettazione del prodotto presso Mailgun, un servizio di posta elettronica per sviluppatori, dove ho imparato molto su come funziona la posta elettronica e sui problemi che gli sviluppatori devono affrontare durante la creazione di posta elettronica HTML. In questo post, condividerò alcune delle mie conoscenze sull'argomento.

Ulteriori letture su SmashingMag:

• Progetta e crea newsletter via e-mail senza perdere la testa
• 18 modelli di email per web designer e sviluppatori
• Semplificare la codifica e-mail HTML reattiva con MJML
• Come migliorare il flusso di lavoro della posta elettronica con un design modulare
  

Introduzione all'invio di e-mail

In qualità di sviluppatore responsabile di una campagna e-mail o di tutte le e-mail inviate dalla tua azienda, dovrai sapere come funziona la posta elettronica, i requisiti legali e come ricevere effettivamente la posta elettronica. Le aziende inviano diversi tipi di e-mail. Diamo un'occhiata.

E-mail di marketing

Molti fornitori di servizi di posta elettronica (ESP) sono specializzati in e-mail di marketing e promozionali: SendPulse Email, Campaign Monitor, MailChimp, Emma, ​​Constant Contact, solo per citarne alcuni. Forniscono soluzioni complete per la gestione degli abbonati, l'utilizzo di modelli di posta elettronica, l'esecuzione di campagne di posta elettronica in blocco e la creazione di report.

E-mail transazionale

L'e-mail transazionale include ricevute, avvisi, e-mail di benvenuto, reimpostazione della password e così via, ed è in genere implementata con strumenti di sviluppo e API come SendPulse Transactional, Mailgun, SendGrid e Postmark. Questi strumenti sono più incentrati sulle API, meno basati su CMS e WYSIWYG; tuttavia, abbinati a un servizio come Sendwithus, possono essere resi ancora più potenti.

Un'alternativa all'utilizzo di un servizio consiste nel rollare il proprio server di posta elettronica con qualcosa come Postfix. Lo svantaggio di questo è che spetta a te impostarlo e configurarlo e comprendere i dettagli tecnici dell'invio di e-mail, dell'implementazione del monitoraggio e dell'annullamento dell'iscrizione e della ricezione dell'e-mail nelle caselle di posta.

E-mail del ciclo di vita

I servizi di posta elettronica basati sul ciclo di vita e sul comportamento aiutano con l'onboarding, il coinvolgimento e altro ancora. Anche molti ESP focalizzati sul marketing offrono questo servizio, ma tendo a raggruppare servizi come SendPulse Automation, Intercom, Customer.io, Drip, Vero e ConvertKit in questa categoria.

Migliori pratiche per l'elenco e-mail

Non acquistare liste di posta elettronica. Forse ci sono una manciata di servizi legittimi, ma è meglio stare lontano dalle liste di acquisto del tutto.

La mia esperienza è che chiunque acquisti una mailing list subirà molti rimbalzi, darà al proprio indirizzo IP (Internet Protocol) una cattiva reputazione e riceverà le proprie e-mail bloccate dai provider di servizi Internet (ISP) o inviate allo spam. L' 85% delle e-mail nel mondo è considerato spam, secondo SenderBase; non cadere in questo secchio.

Doppia partecipazione

Un abbonato che deve verificare il proprio indirizzo e-mail aggiunge un ulteriore passaggio al processo, ma ha senso e impedisce ad altre persone di abusare del proprio indirizzo e-mail iscrivendosi agli elenchi senza il loro permesso. Aiuta anche a mantenere pulito l'elenco delle iscrizioni ed è il "modo corretto al 100% per convalidare un indirizzo e-mail".

PUÒ SPAM

Questi sono i requisiti legali per l'invio di e-mail, imposti dal CAN-SPAM Act del 2003:

• Non utilizzare informazioni di intestazione false o fuorvianti.
• Non utilizzare righe dell'oggetto ingannevoli.
• Identifica il messaggio come un annuncio.
• Dì ai destinatari dove ti trovi.
• Spiega ai destinatari come rinunciare a ricevere email future da te.
• Onorare prontamente le richieste di rinuncia.
• Monitora ciò che gli altri stanno facendo per tuo conto.

MailChimp ha un buon elenco di requisiti legali e-mail per paese.

Analisi e misurazione delle prestazioni

Misura tutto. Devi misurare per sapere se le tue email stanno migliorando. I numeri differiranno notevolmente a seconda di ciò che fai, del tuo settore, del tipo di e-mail che invii e del contesto. Tuttavia, in generale:

• Il 20% è un buon tasso di apertura,
• Dal 3 al 7% è una buona percentuale di clic,
• Il 5% è una frequenza di rimbalzo scarsa,
• 0,01% è un basso tasso di spam,
• 1% è un basso tasso di annullamento dell'iscrizione.

Inoltre, ricorda che le percentuali di apertura e di clic possono essere metriche di vanità (leggi "non contano davvero"). Alla fine della giornata, ciò che vuoi davvero monitorare è l'obiettivo finale o la conversione. Su Airbnb tengono traccia di un punteggio di qualità dell'e-mail, che è un buon indicatore della qualità del coinvolgimento.

Il generatore di URL di Google può aiutarti con il monitoraggio se stai utilizzando Google Analytics.

Invio di punteggio e reputazione

Le tue email hanno una reputazione e un punteggio ad esse associati . Ciò influisce sul modo in cui gli ISP e i provider di cassette postali gestiscono la tua e-mail, se la accettano o la rifiutano e se la inviano alla casella di posta del destinatario o direttamente allo spam.

Alcuni fattori che contribuiscono sono:

• la tua reputazione IP (controlla la tua con SenderScore),
• la firma del tuo nome di dominio (vedi DKIM e SPF),
• frequenze di rimbalzo e frequenze di reclamo.

Invio di e-mail in blocco

Quando invii molte e-mail (immagina una campagna con milioni di e-mail), non vengono inviate tutte istantaneamente. Possono essere inviati solo alla velocità con cui i server e gli indirizzi IP possono gestirli. Tieni presente che i tuoi destinatari potrebbero non ricevere le e-mail esattamente nello stesso momento.

Quindi, se stai inviando milioni di e-mail contemporaneamente, probabilmente vorrai un bel po' di IP per gestire il carico.

Clienti di posta elettronica

Litmus tiene traccia della quota di mercato dei client di posta elettronica, in base alle proprie statistiche interne. Tieni presente che probabilmente non è lo stesso per la tua base di clienti, ma è un buon indicatore su cui basarsi.

Ecco le statistiche a dicembre 2016:

• iPhone: 33%
• Gmail: 19%
• iPad: 12%
• Android: 8%
• Posta di Apple: 7%

Tieni presente che non tutte le email possono essere tracciate . Il monitoraggio delle e-mail viene eseguito tramite il monitoraggio dei pixel, quindi solo i clienti con immagini abilitate verranno segnalati.

Modelli HTML

La creazione di modelli di email HTML può essere una faticaccia. Di conseguenza, un sacco di email mal progettate sono là fuori: goffe, a tema, prolisse, inutili, che distraggono. Se ti piace una sfida o desideri un aspetto e una sensazione unici, crearne uno tuo può essere davvero divertente e gratificante. In alternativa, sono disponibili alcuni buoni modelli di email:

• Modelli di tornasole
• Modello di email HTML reattivo davvero semplice
• Modelli di email HTML
• Base per le e-mail 2

Creazione di modelli di email HTML

Ora sai come impostare e inviare correttamente le e-mail. La prossima decisione che prenderai è se codificare il tuo modello HTML. Questo è un po' più complesso rispetto alla codifica di una pagina Web media. Immergiamoci.

Motori di rendering client

Il design dell'e-mail è ancora nei secoli bui. A causa dei numerosi client e dispositivi di posta elettronica, la tua posta elettronica verrà visualizzata per gli utenti in vari modi.

I client di posta elettronica utilizzano diversi motori per il rendering di e-mail HTML:

• Apple Mail, Outlook per Mac, Android Mail e iOS Mail utilizzano WebKit .
• Outlook 2000, 2002 e 2003 utilizzano Internet Explorer .
• Outlook 2007, 2010 e 2013 utilizzano Microsoft Word (sì, Word!).
• I client Web utilizzano il rispettivo motore del browser (ad esempio, Safari utilizza WebKit e Chrome utilizza Blink).

I clienti aggiungeranno anche il proprio gusto di stili al tuo. Ad esempio, Gmail imposta tutti i caratteri <td> su font-family: Arial,sans-serif; .

Guarda le tue statistiche in modo da sapere per cosa progettare.

Supporto di Gmail per CSS in linea e query multimediali

Solo di recente Google ha annunciato il supporto per i CSS incorporati e le query multimediali in Gmail. Questo è enorme per il settore dello sviluppo della posta elettronica.

Ora, a partire da settembre 2016, Gmail supporterà una serie di proprietà CSS, il che rende molto più semplice lo sviluppo di modelli per Gmail.

Utilizzo di tabelle HTML per il layout

I div hanno problemi di posizionamento e box-model in diversi client, in particolare quelli che utilizzano Microsoft Word per il rendering (ad esempio Outlook). Puoi usare div se vuoi, ma è più sicuro codificare come se fosse 1999 e attenersi alle tabelle . Questo significa:

• <table> invece di <div> ,
• #FFFFFF invece di #FFF ,
• padding al posto del margin ,
• CSS2 invece di CSS3,
• HTML4 invece di HTML5,
• background-color di sfondo invece di background ,
• attributi HTML invece di CSS,
• CSS in linea invece di fogli di stile o blocchi <style> .

Queste sono le migliori pratiche. Potresti certamente ignorare il percorso sicuro e andare oltre.

Quando si utilizzano le tabelle, non dimenticare border="0" cellpadding="0" cellspacing="0" . Se stai usando Premailer, ha speciali dichiarazioni CSS per l'applicazione di questi attributi HTML.

CSS in linea

Alcuni client (in particolare Gmail fino a poco tempo fa) rimuoveranno tutti i CSS che non sono inline . Hai un paio di opzioni qui:

• scrivi CSS in linea mentre procedi,
• utilizzare un interno CSS basato sul Web,
• utilizzare un CSS interno programmatico,
• lascia che il tuo ESP gestisca l'inlining per te (se lo supporta).

Scrivere in linea mentre procedi non è esattamente una soluzione scalabile o manutenibile, quindi tendo a non consigliarlo, ma so che molti sviluppatori di posta elettronica lo preferiscono per mantenere il controllo al 100%. Se scrivi manualmente il tuo CSS inline, ti consiglio di utilizzare snippet e/o un linguaggio di modelli con parziali e helper. Questo ti eviterà di doverti ripetere.

Gli inliner basati sul Web includono Responsive CSS Inliner di HTML Email e Responsive Email Inliner di Foundation for Email.

Per un interno programmatico, consiglio il modulo Node.js Juice. La gemma Premailer e Roadie sono buone alternative a Ruby.

Bottoni

Cercare di ottenere il perfetto pulsante cross-client è doloroso. Come accennato, dovresti usare tabelle e celle di tabella praticamente per tutto, inclusi i pulsanti.

La mia preferenza è usare la seguente soluzione. Ecco come potresti normalmente definire lo stile di un pulsante per il Web:

 <a href="#" class="btn btn-primary">Click Here</a>

Invece, scrivilo così:

 <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary"> <tr> <td align="center"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <a href="" target="_blank">Take action now</a> </td> </tr> </table> </td> </tr> </table>

Quindi, una volta che il tuo CSS è in linea, apparirà così:

 <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" width="100%"> <tr> <td align="center" valign="top"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top" bgcolor="#3498db" align="center"> <a href="">Take action now</a> </td> </tr> </table> </td> </tr> </table> 

Cosa sta succedendo qui? Il primo <td> è un wrapper per aiutarci a centrare il pulsante. Il secondo <td> è la dimensione del pulsante. Alcuni client (come Outlook) non riconoscono il riempimento nel tag <a> , quindi riempiamo il colore di sfondo della cella della tabella. Il tag <a> quindi occupa lo spazio disponibile nel secondo <td> e l'intera area diventa cliccabile. Controlla il codice e i test dei client su Litmus.

Questo è solo un modo per implementare i pulsanti nelle e-mail. Certo, non sembra sempre identico in ogni client, ma nemmeno il Web è sempre perfetto per i pixel. Lo preferisco perché è più semplice e non prevede l'utilizzo di risorse immagine o VML.

Cos'è VML? Se hai dedicato del tempo a sviluppare e-mail, probabilmente ti sei imbattuto in qualche riferimento ad esso. Vector Markup Language (VML) è supportato dalle versioni precedenti di Outlook . Secondo Microsoft, a partire da Internet Explorer (IE) 10, VML è obsoleto, il che significa che non è più supportato nelle nuove versioni di IE. Tuttavia, finché Outlook 2007, 2010 e 2013 sono disponibili, vedrai che viene utilizzato, in genere per le immagini di sfondo .

Tipografia

In generale, è più semplice attenersi ai caratteri di sistema standard. Questo include Helvetica, Arial e così via. Tuttavia, possiamo utilizzare i caratteri web , come Google Fonts. Mettili dietro una query multimediale condizionale WebKit , in modo che Outlook non li incasini:

 <style> @import url(https://fonts.googleapis.com/css?family=Pacifico); /* Type styles for all clients */ h1 { font-family: Helvetica, Arial, serif; } /* Type styles for WebKit clients */ @media screen and (-webkit-min-device-pixel-ratio:0) { h1 { font-family: Pacifico, Helvetica, Arial, serif !important; } } </style>

Ricorda di includere una famiglia di caratteri, una dimensione e un colore del carattere per ogni <td> , altrimenti rischi che il cliente sovrascriva gli stili di testo scelti con cura.

Condizionali

Possiamo applicare stili CSS specifici e mostrare o nascondere elementi e contenuti per diverse versioni di Outlook.

Quanto segue è destinato a tutte le versioni basate su Microsoft Word di Outlook:

 <!--[if mso]> Only Microsoft Word-based versions of Outlook will see this. <![endif]-->

Il prossimo frammento di codice si rivolge a tutte le versioni basate su IE di Outlook:

 <!--[if (IE)]> Only IE-based versions of Outlook will see this. <![endif]-->

Possiamo anche scegliere come target numeri di versione specifici di Outlook:

 <!--[if mso 12]> Only Outlook 2007 will see this. <![endif]-->

Possiamo indirizzare i clienti basati su WebKit con una query multimediale:

 .special-webkit-element { display: none; } @media screen and (-webkit-min-device-pixel-ratio:0) { .special-webkit-element { display: block !important; } }

Immagini e media

Immagini nell'e-mail

Alcuni client mostreranno le immagini per impostazione predefinita. Alcuni no. Tienilo a mente quando includi immagini nel contenuto della tua e-mail. Ciò influisce anche sulle metriche di tracciamento, poiché le immagini vengono in genere utilizzate per tracciare le aperture.

• Outlook blocca il rendering delle immagini per impostazione predefinita.
• Apple Mail no.
• Gmail non lo fa (più).

Ricorda di includere un buon testo alt per tutte le tue immagini. Il testo potrebbe dire all'utente cosa dice l'immagine o semplicemente descrivere di cosa si tratta (ad esempio, "logo aziendale"). Puoi essere creativo con il testo alt per i clienti che disattivano le immagini, come fa Email Monks:

Ricorda di includere un ripristino di base per tutte le immagini:

 <img src="https://www.smashingmagazine.com/wp-content/uploads/2016/11/" alt="" width="" height="" border="0">

Le GIF animate sono supportate nella maggior parte dei client. Le versioni di Outlook dal 2007 al 2013 non supportano le GIF animate, ma tornano al primo fotogramma.

Ricorda di comprimere le tue risorse multimediali e caricarle su una rete di distribuzione dei contenuti (CDN), come Amazon Web Services, Cloudinary o imgix. La maggior parte degli ESP di marketing gestirà questo per te.

La grafica vettoriale scalabile (SVG) ha molti vantaggi sul Web. Come ci si aspetterebbe, il supporto e-mail varia e SVG richiede un paio di hack o condizionali di fallback. In genere consiglio di stare lontano da SVG nelle e-mail, ma se vuoi fare sul serio, CSS-Tricks ha una guida sul supporto SVG nelle e-mail.

Per le immagini pronte per Retina, fornire un'immagine più grande (da 1,5× a 3×) e ridimensionarla. In genere salverò un'immagine di bassa qualità con dimensioni 2×, il che funziona bene. (Ho scritto di più su questa tecnica.)

Tieni presente che, per Outlook, devi dichiarare la larghezza di un'immagine con l'attributo width . In caso contrario, Outlook potrebbe visualizzare la larghezza effettiva dell'immagine e interrompere l'e-mail.

Video in e-mail

Il video è supportato in iOS, Apple Mail e Outlook.com. Puoi utilizzare le media query per mostrare o nascondere un video in base al client. Email su Acid ha più informazioni sul supporto video via e-mail.

Per trarre ispirazione, dai un'occhiata al tutorial di Kevin Mandeville sulla codifica di video HTML5 come sfondo in un'e-mail: cose impressionanti e vale la pena dare un'occhiata.

Moduli in posta elettronica

Il supporto per gli elementi del modulo varia. Cerca di stare alla larga e collega a un modulo esterno se ne hai bisogno. Campaign Monitor offre alcuni consigli sui moduli.

Ovviamente dipende dai tuoi obiettivi. Stare lontano dai moduli è più sicuro, ma Rebelmail e Mixmax hanno fatto cose interessanti con i moduli per sondaggi ed e-commerce, con un buon supporto di fallback.

Azioni di Gmail

Google rende disponibili azioni utili per Gmail. Probabilmente li hai visti su GitHub per problemi o su Amazon per ordini.

L'aggiunta del codice è semplice. Hai due opzioni:

• JSON-LD
• microdati

L'inserimento nella whitelist richiede alcuni passaggi in più. Puoi testare le azioni di Gmail con un indirizzo @gmail.com .

Testo di preintestazione

Qualcosa di importante ma spesso dimenticato è il testo di preintestazione. Alcuni client mostrano il testo in anteprima accanto o sotto la riga dell'oggetto . Questi client includono iOS, Apple Mail, Outlook 2013, Gmail e AOL.

I clienti prenderanno il primo pezzo di testo che trovano nel corpo della tua email e lo visualizzeranno qui. Ottieni il massimo da questo e aggiungi un elemento nascosto al contenuto del tuo corpo che appare per primo. Questo testo dovrebbe fornire un ulteriore incentivo per l'utente ad aprire la tua email. Nascondi il testo in questo modo:

 <span>Preheader text goes here</span>

Usa lo strumento oggetto e preintestazione di Austin Woodall per visualizzare in anteprima gli oggetti e le preintestazione delle e-mail.

E-mail di prova

Non credo di aver mai inviato un'e-mail con successo la prima volta. C'è sempre qualcosa da correggere, sempre un errore di battitura, sempre un problema di rendering in Outlook, sempre qualcosa che ho dimenticato di aggiungere.

Puoi testare la tua email in diversi modi:

• Invia un'e-mail a te stesso e controllala su un client desktop (Outlook), un client Web (Gmail) e un client mobile (iOS Mail).
• Automatizza i test utilizzando Litmus o Email on Acid.
• Correggi il contenuto e controlla i rendering del layout.
• A/B testa vari tipi di contenuti, lunghezze di contenuti e righe dell'oggetto.

Come si inviano e-mail HTML a te stesso? Buona domanda. È più difficile di quanto pensi. PutsMail ti consente di farlo abbastanza facilmente e Thunderbird ti consente di comporre con il suo editor HTML.

MIME multiparte

Un'e-mail in chiaro è proprio questo, in chiaro. Un'e-mail HTML è solo HTML. La maggior parte delle e-mail che invii o ricevi sono e-mail in più parti MIME (Multipurpose Internet Mail Extensions) (da non confondere con il tipo MIME). Questo standard combina sia il testo normale che l'HTML, lasciando al destinatario la decisione di quale rendering.

Quando invii un'e-mail, transazionale o in blocco, includi sia la versione HTML che quella di testo normale . Anche se, nella tua mente, ognuno utilizza un client che esegue il rendering di HTML, invia comunque testo normale.

Inoltre, si noti che alcuni client eseguono il rendering di e-mail in testo normale come HTML; ad esempio, Gmail aggiungerà alcuni stili predefiniti e trasformerà gli URL in collegamenti. La maggior parte degli ESP costruirà il MIME per te, quindi non devi davvero preoccuparti di questo. Alcuni creeranno anche una versione in testo semplice, basata sul tuo HTML.

Suggerimento per professionisti: in Gmail, seleziona "Mostra originale" dal menu a discesa per vedere il MIME completo.

È emersa una nuova parte MIME: text/watch-html . Questo contenuto verrà visualizzato solo in Apple Watch (e in qualsiasi altro client che supporta questo tipo MIME in futuro).

Accessibilità

Sul Web, se segui gli standard e le migliori pratiche e utilizzi il markup semantico e una sintassi HTML valida , tendi a ottenere l'accessibilità di base fuori dagli schemi. Sfortunatamente, con la posta elettronica, a causa dei nostri eccessivi hack e dello scarso supporto per HTML, l'accessibilità viene spesso ignorata.

Ho visto poche discussioni sull'accessibilità della posta elettronica, ma una che spicca è il post di Mark Robbins sull'accessibilità. Egli raccomanda quanto segue:

• Aggiungi role="presentation" a ciascuna tabella in modo che sia chiaro che la tabella viene utilizzata per il layout.
• alt testo alternativo con descrizioni significative.
• Se non è necessario o non si desidera testo alternativo, utilizzare alt alt="" in modo che gli screen reader sappiano che deve essere vuoto.
• Usa tag HTML semantici, come <p> e <h1> , ove applicabile.
• Utilizza l'attributo role per elementi come intestazioni e piè di pagina (ad esempio role="header" ).

Progettazione e-mail reattiva

• Le aperture di posta elettronica su dispositivo mobile sono al 50% e in aumento. La metrica esatta dipende dal rapporto che controlli e dal pubblico a cui ti rivolgi, ma penso che possiamo essere tutti d'accordo sul fatto che questo sia importante.
• La quota di mercato del client di posta elettronica, ad agosto 2016, mette iPhone al 33%, iPad all'11% e Android al 10% (oltre il 50%!).
• MailChimp ha rilevato che i clic unici tra gli utenti mobili per le campagne reattive sono aumentati dal 2,7 al 3,1%, con un aumento di quasi il 15%.

“Responsive web design” è una frase coniata da Ethan Marcotte nel 2010:

Unendo layout fluidi basati su griglia e query multimediali CSS3, possiamo creare un design che, bene, risponda alla forma del display che lo rende.

Nel mondo della posta elettronica, possiamo ancora fare uso di design fluido, layout basati su griglia e media query . Il problema è che non tutti i client li supportano. Pertanto, abbiamo bisogno di alcuni hack lungo la strada.

Fino a poco tempo, Gmail non supportava le media query. Per fortuna, a partire da settembre 2016, la maggior parte dei suoi clienti lo fa. Tuttavia, molti client mobili continuano a non farlo, inclusi Yahoo, Windows Phone 8 e Gmail per Android.

Diverse tecniche vengono utilizzate nel mondo della posta elettronica per aggirare la mancanza di supporto per le query sui media. Alcuni dei termini che sentirai sono "fluido", "adattivo", "reattivo", "ibrido" e "spugnoso".

Fluido

La soluzione più semplice è attenersi a una singola colonna e rendere fluide le tue e-mail. Ciò significa che quando il viewport si restringe, l'area del contenuto si restringe.

 .container { max-width: 600px; width: 100%; }

Reattivo e adattivo

Utilizzando media query e punti di interruzione, possiamo fornire stili alternativi per finestre di dimensioni diverse. Possiamo anche nascondere o mostrare elementi.

Questo inizia a complicarsi una volta che introduci una griglia e delle colonne. Potresti avere un layout a due colonne e quindi passare a un layout a una colonna impilata al di sotto di una determinata larghezza della finestra.

Ma , come abbiamo visto, le media query non sono supportate ovunque, quindi non è sempre affidabile.

Ibrido e spugnoso

Questa tecnica utilizza un po' di fluidità, un po' di reattività e un paio di hack per il supporto di Outlook. Possiamo anche garantire che le colonne si accatastino senza media query.

Questa tecnica è delineata da ActionRocket e Nicole Merlin ha scritto un ottimo tutorial passo dopo passo su di essa.

Ecco uno snippet del codice che utilizzo per creare la maggior parte delle mie email.

 <!--[if (gte mso 9)|(IE)]> <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <td align="left" valign="top" width="50%"> <![endif]--> <div class="span-3">...</div> <!--[if (gte mso 9)|(IE)]> </td> <td align="left" valign="top" width="50%"> <![endif]--> <div class="span-3">...</div> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]-->

 @media only screen and (max-width: 620px) { .span-3 { max-width: none !important; width: 100% !important; } .span-3 > table { max-width: 100% !important; width: 100% !important; } }

Dai un'occhiata al repository open source spugnoso di Fabio Carneiro su GitHub e leggi la versione di Stig sulla codifica delle e-mail mobile-first. Remi Parmentier ha anche un'altra tecnica reattiva che non necessita di media query e utilizza la funzione calc() .

Immagini reattive

Come accennato, usa le immagini Retina da 1,5 × a 3 × e imposta le dimensioni dell'immagine in linea.

 <img src="https://www.smashingmagazine.com/wp-content/uploads/2016/11/logo.png" height="100" width="600" alt="Company Logo">

Non possiamo fare affidamento sulla max-width: 100%; perché alcuni clienti lo ignorano. Dovrai anche incorporare il seguente CSS:

 @media only screen and (max-width: 620px) { img { height: auto !important; max-width: 100% !important; width: auto !important; } }

Automatizzare il flusso di lavoro

Il processo di creazione di un'e-mail a prova di proiettile è complesso. Ci sono molti passaggi e c'è spazio per molte cose che vanno storte.

Come ogni attività monotona con passaggi, ti consiglio di automatizzare ciò che puoi, in modo da creare il sistema una volta e renderlo più facile per il lavoro futuro.

Brian Graves ha un buon post su come rendere la tua email modulare. Proprio come hai un sistema di progettazione e una libreria di modelli per un sito Web o un'applicazione, dovresti farlo per l'e-mail, rendendo i componenti riutilizzabili e le e-mail coerenti in tutto il tuo prodotto e azienda.

Kevin Mandeville consiglia di utilizzare frammenti di codice riutilizzabile per ottimizzare il flusso di lavoro, in modo da non riscrivere costantemente il codice . Nel suo post, illustra come utilizzare i frammenti negli editor moderni (come Atom e Sublime) e indica la libreria di frammenti fornita dalla comunità ospitata da Litmus.

Da parte mia, ho messo insieme e reso open source un flusso di lavoro Grunt per automatizzare le build di posta elettronica. Esegue varie attività, come l'integrazione di CSS , la compressione di immagini, il caricamento di immagini su una CDN, l'invio di un'anteprima e il test con Litmus, il tutto con un solo comando. Se non conosci Grunt, ho scritto un tutorial dettagliato su come funziona. Foundation for Email ha anche alcuni ottimi strumenti di automazione per gli sviluppatori, così come Mailjet con il suo framework di posta elettronica reattivo MJML.

Guardando Al Futuro

Google ha recentemente implementato il supporto per le query sui media; Microsoft ha appena collaborato con Litmus per "migliorare la posta elettronica"; e Alto di AOL ora supporta la posta elettronica reattiva. Quindi, il futuro sembra molto più luminoso.

Sempre più aziende e sviluppatori stanno sperimentando ciò che è possibile con la tecnologia e-mail: animazione CSS, audio, carrelli della spesa nella posta elettronica. Aspettati che nel 2017 emergano più istanze di email interattive e cinetiche.

Conclusione

La progettazione e lo sviluppo dell'e-mail è una bestia. È un po' come costruire una pagina web... 10 anni fa . I fornitori di client di posta elettronica non sono stati progressisti come i fornitori di browser Web nell'adottare nuovi standard e noi utenti e aziende non adottiamo nuovi client di posta elettronica come facciamo con i browser Web. A ciò si aggiunge l'ascesa dei dispositivi mobili e ci ritroviamo in questo stato di dover supportare un contorto mix di client e versioni .

La mia introduzione qui è una panoramica di alto livello; potresti immergerti in profondità in ognuno di questi punti. Si spera che ti abbia dato una buona visione del mondo della creazione e dell'invio di e-mail e che i frammenti di codice e le risorse abbiano aggiunto alcune ore alla tua vita.

Risorse consigliate

• Modello di email HTML reattivo davvero semplice, Lee Munroe (il mio modello di email open source gratuito)
• Progettazione e-mail professionale , Jason Rodriguez
• "Unmasking HTML Emails" (corso), Dan Denney, Code School
• "I migliori design di posta elettronica nell'universo (che sono arrivati ​​​​nella mia casella di posta)" E-mail davvero buone
• "Esempi e tecniche di posta elettronica dinamica e interattiva (cinetica)", Justin Khoo

Blog da seguire

• Monitoraggio della campagna
• MailChimp
• Tornasole
• E-mail su acido