L’email può essere responsive?

Che le si ami o le si odi, non si può negare la popolarità delle email HTML. Inoltre, come il web prima di lei, la inbox è ufficialmente diventata mobile, con più del 50% delle email aperte su device mobile.

Eppure, l’email design è una pratica scandalosamente datata. Vi ricordate com’era scrivere codice prima che gli standard web diventassero… Standard? Benvenuti nell’inferno attuale dell’email design.

Comunque sia, programmare un’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 – gasp! – gli stili inline, un certo numero di intrepidi designer sta cercando di applicare le moderne e pionieristiche tecniche per il web all’arcaica pratica dell’email design.

Costruita sui principi del responsive web design codificati per primo da Ethan Marcotte, un rivoluzione nell’email design sta dando vita ad un’esperienza che si avvicina rapidamente a quella del web moderno. Gli iscritti non devono più essere soggetti a terribili esperienze di lettura, a target frustranti su device touch e a testo microscopico.

Il valore dell’email HTML#section1

Che le amiate o meno, le email HTML sono un tool vitale per quasi tutte le aziende. Quando si tratta di marketing, l’email ha costantemente prestazioni migliori di altri canali quali Facebook e Twitter. Cosa ancora più importante, l’email permette di interagire con un pubblico potenzialmente enorme in maniera sempre più personale.

Potreste non essere coinvolti direttamente nell’email marketing, ma ci sono buone probabilità 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’ultimo blog post che avete pubblicato. Qualunque sia la ragione, l’email è un mezzo importante e spesso trascurato.

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’email HTML ha un certo numero di vantaggi:

• Hyperlinks. Potete inserire dei link alle landing pages da un’email HTML per creare traffico ed engagement.
• Design. Un’email HTML ben progettata vi permette di rafforzare il vostro brand, anche nella inbox.
• Gerarchia. Potete creare una gerarchia all’interno delle email HTML e richiamare l’attenzione più facilmente al testo importante o a link vitali.
• Tracking. L’email HTML vi permette di tenere traccia delle aperture e dell’engagement: dati di valore che possono essere usati per migliorare i vostri sforzi sul marketing.

Se non date all’email la stessa attenzione che dedicate alla vostra app “pixel perfect”, state in effetti perdendo 1) un’opportunità di branding di valore, 2) la possibilità di tracciare le aperture e le interazioni nelle vostre email e 3) l’opportunità di fornire un’incredibile esperienza utente al di fuori della vostra applicazione.

L’email HTML fa schifo#section2

Il design e lo sviluppo di email HTML si è posizionato tradizionalmente tra le peggiori esperienze per ogni web designer. È 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 ’90.

Ecco un semplice campionario dei motivi per cui l’email HTML può essere un fastidio:

• Nessuno standard. Ovvio, usiamo HTML e CSS, ma non come sul Web: non c’è alcun vero standard tra i client email, per cui si arriva a un codice fuori controllo.
• Client email. I client email, come Outlook e Gmail, rendono tutti HTML e CSS in maniera differente, spesso scandalosamente differente. Il che ci porta a…
• Molti hack. Anche le campagne di email ben progettate devono fare affidamento a hack “client specific” per far funzionare le cose.
• Niente JavaScript. 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à!
• Stili inline. 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’email.

Sebbene molto probabilmente la situazione non cambierà presto, c’è un movimento nella community dell’email design (sì, ne esiste davvero 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’email design e stanno condividendo la propria conoscenza più di quanto fosse mai stato fatto finora.

L’azienda per cui lavoro, Litmus, è una di queste. Creiamo strumenti per rendere quanto più indolore possibile il testing e il tracking delle campagne email e siamo tutti d’accordo sul diffondere le informazioni riguardanti l’email marketing in generale e l’email design nello specifico. Abbiamo anche dato vita ad una community 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.

Sebbene in questo articolo io faccia riferimento ad alcuni strumenti e risorse di Litmus, c’è una serie di altre aziende e persone che lavorano duramente al miglioramento dell’email design. In particolare, sia MailChimp sia Campaign Monitor hanno dei blog e delle guide eccellenti. Inoltre, persone come Anna Yeaman, Nicole Merlin, Fabio Carneiro, Elliot Ross e Brian Graves sono tutte impegnate nel far diventare un vero mestiere l’email design.

La inbox in cambiamento#section3

Proprio come il resto del web, anche la inbox sta diventando mobile. Nel 2013, il 51% degli utenti ha aperto le email su un device mobile. Tale numero è probabilmente destinato ad aumentare, specialmente considerando che un numero crescente di persone fa affidamento sul proprio dispositivo mobile per accedere ad internet, sia per abitudine sia per necessità.

La buona notizia è che i web designer possono adattare le proprie skill esistenti ed applicarle alle campagne email, creando una bellissima user experience su un canale che è vitale per molti utenti ma ignorato da molti designer.

Come funziona l’email HTML#section4

Parlando in generale, progettare un’email HTML è esattamente come creare una pagina web, fingendo che il web design non abbia alcune conoscenza successiva a Designing with Web Standards. Le email HTML si basano su tre cose: tabelle, attributi HTML e CSS inline. Nell’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 eccellente grafico di quali parti di CSS sono supportate tra i maggiori client email.

Scorriamo brevemente le basi dell’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, Kevin Mandeville, i lettori di A List Apart possono apprendere e creare basandosi sullo stesso codice che usiamo per la maggior parte delle nostre campagne, Al momento è ospitato sull’account Github diA List Apart. Per vedere come si comporta su i vari cliente, potete controllare tutti i test di Litmus.

Tabelle#section5

La maggior parte dei web designer usano tag come div, header, section, article, nav e footer 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… Molto annidate.

Gli stili di base delle tabelle useranno ampiamente gli attributi che la maggior parte delle persone non ha usato per molto tempo: width, height, bgcolor, align, cellpadding, cellspacing e border. Insieme agli stili inline come padding, width e max-width, i designer possono creare dei layout email robusti.

Ecco un esempio di come appare un email con un codice tabella ben scritto:

<table border="0" cellpadding="0" cellspacing="0" width="100%">
	<tr>
		<td bgcolor="#333333">
			<div align="center" style="padding: 0px 15px 0px 15px;">
				<table border="0" cellpadding="0" cellspacing="0" width="500" class="wrapper">
					<tr>
						<td>…Content…</td>
					</tr>
				</table>
			</div>
		</td>
	</tr>
</table>

Potete vedere come annidiamo le tabelle ed usiamo gli attributi border, cellpadding e cellspacing per essere sicuri che non ci siano degli spazi non necessari nel design. Viene applicato un bgcolor a livello delle celle della tabella, che è un metodo più affidabile di background o background-color (sebbene background-color abbia una sua collocazione).

Una cosa interessante da notare è che div è usato per centrare la tabella annidata e mettere un padding attorno al contenuto. Sebbene le tabelle dovrebbero creare il grosso della struttura, è utile uno sporadico uso di div 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’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.

Immagini#section6

L’uso delle immagini nelle email è 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.

Un’email con le immagini disabilitate

Anche se non c’è un modo per abilitare automaticamente le immagini, possiamo migliorare la situazione usando un testo alternativo per dare un po’ di contesto alle immagini mancanti. Inoltre, possiamo usare gli stili inline sull’elemento img per dare uno stile a quel testo alternativo e mantenere una minima rassomiglianza con il design.

<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">

Usando il codice di cui sopra, la nostra immagine mancante adesso ha un po’ più di senso:

Il testo alternativo funziona

Call to Action#section7

Uno dei vantaggi principali delle email HTML è la possibilità 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.

Molti email marketer usano usano immagini cliccabili come pulsanti. Tuttavia, usando dei pulsanti a prova di bomba, i designer possono realizzare dei pulsanti via codice che vengano resi in maniera consistente tra i vari client, anche con le immagini disabilitate.

La tabella qui sotto è un esempio di pulsanti tutti in HTML, che usa i border per far sì che l’interso pulsante sia cliccabile, non solo il testo:

<table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
	<tr>
		<td align="center"><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">Learn More →</a></td>
	</tr>
</table>

I pulsanti a prova di bomba hanno un bel aspetto con le immagini disabilitate

Una volta create le basi, è il momento di vedere come si fa effettivamente funzionare bene un’email su un range di device di varie dimensioni.

Come funziona l’email responsive#section8

Proprio come con i siti web responsive, ci sono tre componenti principali di un’email responsive: immagini flessibili, layout flessibili e media queries.

L’unica differenza tra il web e l’email è il modo in cui vengono implementate queste tre tecniche.

Nell’email design, abbiamo un sottoinsieme limitato di HTML e CSS a nostra disposizione. Non possiamo fare affidamento su proprietà 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.

Immagini flessibili#section9

Le immagini fluide non sono molto complesse. Sebbene usino la proprietà width 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.

Il primo passo è essere sicuri che le immagini siano codificate in maniera robusta. Diamo un’occhiata alla nostra immagine della schermata dell’email di prima.

<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">

Notate la proprietà display che vi è inclusa? È solo un esempio dei molti hack richiesti per gestire gli impertinenti client email, così come lo è l’attributo border. 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à quello spazio e salverà il vostro design.

Ora, quando vogliamo rendere le nostre immagini fluide, possiamo farlo in una media query nella head della nostra email:

img[class="img-max”] {
	width:100% !important; 
	height: auto !important;
}

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 è il motivo per cui andiamo a richiamare le immagini flessibili usando una class.

Dal momento che sovrascriveremo sempre gli stili inline e gli attributi HTML, la dichiarazione important è usata per essere sicuri che i nostri stili responsive abbiano la precedenza quando il documento viene reso.

Vediamo qualcosa di un po’ più difficile.

Layout flessibili#section10

La maggior parte dei web designer ha familiarità con la creazione di design responsive utilizzando elementi semantici le cui dimensioni sono espresse con unità relative 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.

Quasi tutte le nostre tabelle useranno le percentuali per le proprie larghezze. Un’eccezione è la tabella container con dimensioni specifiche in pixel per vincolare la larghezza generale del design dell’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.

Cominciamo dalla tabella container:

<table border="0" cellpadding="0" cellspacing="0" width="500" class="wrapper">
	<tr>
		<td>…Content…</td>
	</tr>
</table>

Usiamo l’attributo width per forzare la tabella ad una larghezza di 500 pixel.

Questo container avrà al suo interno tutte le altre tabelle annidate dell’email. Dal momento che tutto sarà vincolato a quei 500 pixel di larghezza, possiamo tranquillamente usare le percentuali per le dimensioni delle altre tabelle.

Ma a che cosa servono le tabelle flessibili se l’email è sempre larga 500 pixel? Date ancora un’occhiata alla tabella container. Notate che ho aggiunto una class wrapper. Useremo questo selettore per rendere le nostre email davvero responsive usando le media query (cos’altro se no?).

Media query nelle email#section11

Le media queries nelle email funzionano proprio come nel web design. Includendole nella head dell’email si possono avere come obiettivo degli specifici attributi di device ed aggiustare i propri stili di conseguenza.

Tenendo le cose semplici, avremo come obiettivo le viewport con una max-width di 525 pixel e inferiori. Poi, con obiettivo quella tabella “wrapper”, possiamo sovrascrivere quegli attributi HTML e stili inline per far si che la tabella sia della larghezza totale dello schermo sui device mobile.

@media screen and (max-width:525px) {
	table[class=“wrapper”] {
		width:100% !important;
	}
}

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 è una cattiva idea far aumentare anche la dimensione dei testo e dei pulsanti su mobile.

@media screen and (max-width:525px) {
	body, table, td, a {
		font-size:16px !important;
	}	
	table[id=“responsive-table”] {
		width:100% !important;
	}
}

Il principale svantaggio dell’utilizzo delle media query è che non sono supportate ovunque. Mentre i client email basati su WebKit, come iOS Mail e l’app per l’email di default di Android funzionano bene, i dispositivi Blackberry più vecchi, il Windows Phone 8 e l’app di Gmail su tutte le piattaforme ignorano le media query.

Fortunatamente, iOS e Android costituiscono la maggioranza del pubblico dell’email mobile, così potete essere praticamente sicuri che la maggior parte degli iscritti vedrà la vostra email responsive così come l’avete pensata.

Esplorate l’email design#section12

Le tecniche descritte prima sono solo l’inizio. Degli intrepidi designer di email stanno esplorando l’uso di web font, di SVG e delle animazioni CSS3 nell’email. Sicuramente, l’email design è difficile e le cose non funzionano regolarmente, ma questo non dovrebbe precludervi l’esplorazione di tecniche avanzate per capire cosa funziona per voi e per il vostro pubblico.

La mia unica raccomandazione è 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’email, che sia Litmus, Email on Acid, il vostro device lab o qualcosa d’altro ancora, è di aiuto per identificare i problemi e vi permette di trovare i problemi prima di mandarla a un milione di iscritti.

Oltre a testare il vostro codice e la resa, tracciate tutte le email e testate che tipo di contenuto, copy, design e frequenza di invio va meglio per il vostro pubblico.

Soprattutto, non ignorate l’email design. È necessariamente malefico, ma diventa sempre meglio. Si sta finalmente formando una community attorno all’email design e le tecniche vengono costantemente rifinite e perfezionate. Il responsive email design è 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’interfaccia della vostra app e trasferirla ad uno dei medium più diffusi e di valore che ci siano in giro.

Illustrazioni: {carlok}