Come progettare un email HTML reattivo
Negli ultimi anni, il crescente utilizzo di dispositivi mobili ha scatenato un'evoluzione, o forse una rivoluzione, nel modo in cui ci apprestiamo a fornire contenuti agli utenti online. L'obiettivo finale è una rete fluida, mobile e indipendente dal dispositivo, e una scuola di pensiero è emersa come il mezzo largamente favorito a tal fine: il design reattivo. Tuttavia, mentre lo zeitgeist reattivo si è radicato, la progettazione e lo sviluppo della posta elettronica hanno faticato a tenere il passo.
Ciò è dovuto, in parte, al fatto che le e-mail in HTML sono un mezzo notoriamente difficile con cui gli sviluppatori possono lavorare. La tecnologia arcaica del client di posta elettronica e la mancanza di standard hanno reso inutili molte delle regole del codice moderno e semantico. Ma l'e-mail è ancora un canale di marketing chiave troppo importante per essere trascurato: in un periodo di sei mesi nel 2012, Litmus ha segnalato un aumento dell'80% dell'apertura di e-mail sui dispositivi mobili. Nello stesso anno, Campaign Monitor ha rivelato che, per la prima volta, il loro tasso di apertura e-mail mobile superava effettivamente il desktop e la webmail.
Ovviamente è importante condurre un'adeguata analisi del pubblico prima di prendere la decisione di investire nell'ottimizzazione per dispositivi mobili. Ma un design di email reattivo ben eseguito può garantire un'esperienza utente eccellente sia per gli utenti desktop sia per i dispositivi mobili e, con il 4G diffuso dietro l'angolo, la tendenza verso il mobile è inesorabile, quindi perché non a prova di futuro?
Piolo quadrato, buco rotondo
Se hai mai avuto la sfortuna di aprire un'e-mail a larghezza fissa su un dispositivo mobile, capirai la necessità di una progettazione di e-mail reattiva. I layout a più colonne possono essere ingranditi, in modo che le dimensioni dei caratteri siano ridotte al punto di illeggibilità. Gli utenti possono eseguire lo zoom in avanti, ma sono quindi costantemente e infuriatamente obbligati a scorrere orizzontalmente da sinistra a destra e viceversa per leggere il contenuto. I collegamenti appaiono piccoli e congestionati, senza riguardo per le dita grasse sui display touch-screen. E i design a basso contrasto su piccole finestre, oscurati per risparmiare energia, diventano spesso illeggibili. Chiaramente, l'ottimizzazione mobile è importante, ma qual è il modo migliore per farlo?
Best practice per dispositivi mobili
Prima di scrivere una singola riga di codice, l'esame delle funzionalità di progettazione può migliorare notevolmente l'esperienza dell'utente per i dispositivi mobili, anche se si tratta probabilmente di concessioni consigliate indipendentemente dalle dimensioni dello schermo.
- Contenuti chiari e concisi: i piccoli schermi significano che è più importante che mai coinvolgere l'utente nel modo più efficiente possibile.
- Layout a colonna singola: la semplicità è la chiave. Layout non più ampi di 640px si degraderanno con garbo. Una colonna singola garantisce che nessun contenuto verrà completamente perso al di fuori del viewport durante l'ingrandimento.
- Una linea tematica accattivante: questa è una delle armi più efficaci del marketing via email in una casella di posta sovraffollata. Tenerlo breve e scattante.
- Grande invito all'azione (CTA): non punire le dita grasse! Le linee guida per l'interfaccia umana iOS di Apple raccomandano un'area obiettivo minima "tappabile" di 44 × 44 punti.
- Ampie dimensioni dei caratteri: assicurati che il tuo messaggio possa essere letto facilmente.
- Pre-intestazione: un'altra area chiave quando si tratta di visibilità nella casella di posta. Cerca di evitare semplicemente di visualizzare il testo "visualizza nel browser".
- Testo allineato a sinistra: esistono diversi motivi per allineare elementi importanti sul lato sinistro dell'area del contenuto. (La ricerca sul tracciamento degli occhi suggerisce che gli utenti occidentali concentrano la maggior parte della loro attenzione sul lato sinistro del contenuto della posta elettronica, cosa che non sorprende dal momento in cui leggiamo il testo da sinistra a destra: alcuni sistemi operativi, in particolare Android, non scaleranno il contenuto per adattarlo lo schermo, quindi visualizza solo la metà sinistra di un'e-mail. Dal punto di vista ergonomico, la maggior parte degli utenti troverà più facile interagire con gli elementi in basso a sinistra / al centro dello schermo a mano.)
- Gerarchia verticale: la diminuzione dello spazio immobiliare rende più credibile che mai l'idea di "la piega". CTA significativi dovrebbero essere posizionati il più vicino possibile alla cima; se non vengono visti immediatamente, forse non saranno usati.
- Usa le immagini con attenzione: non dare per scontato che le immagini saranno viste. L'app email nativa di iPhone mostrerà le immagini per impostazione predefinita, ma molti clienti no.
Questi suggerimenti possono migliorare l'esperienza dell'utente per i clienti mobili, ma è possibile, e probabilmente dovrebbe, ottimizzare ulteriormente. Grazie al crescente supporto CSS3 tra i client di posta elettronica mobili, ora è possibile progettare e-mail reattivi.
Iniziare
Come accennato in precedenza, le e-mail in formato HTML soffrono di una dolorosa mancanza di standard: per chi non lo sapesse, gran parte di ciò che segue sarà un viaggio nel passato agli albori dello sviluppo del web. I layout devono essere organizzati con tabelle a causa dei motori di rendering HTML obsoleti di alcuni client di posta elettronica e i CSS devono essere applicati in linea. Diversi client di posta elettronica ignoreranno completamente qualsiasi dichiarazione di stile fatta in
sezione del documento.Ci sono alcuni fantastici piatti e-mail disponibili, consiglio l'eccellente Sean Powell HTML Email Boilerplate come punto di partenza, ma per motivi di dimostrazione, iniziamo da zero.
Per quelli di voi che amano seguire il codice, è possibile scarica un modello per questo articolo da qui.
Doctype
Hotmail e Gmail inseriranno automaticamente il doctype XHTML 1.0 Strict. Non è quindi una cattiva idea usarlo, ma è importante testare accuratamente la tua email con e senza un doctype, dato che molti client di posta elettronica lo elimineranno del tutto.
Email su Acid ha condotto ricerche approfondite sui doctypi della posta elettronica Qui.
Query multimediali
Ora possiamo inserire un meta tag viewport per assicurarci che la nostra email sia visualizzata correttamente sui dispositivi mobili. È anche una buona idea specificare anche il tipo di contenuto e un tag del titolo. Questi saranno ignorati da molti client di posta elettronica, ma sono una buona idea se hai intenzione di fornire un link a una "versione browser" della tua email.
Poiché il tipo di contenuto verrà probabilmente ignorato, è consigliabile codificare tutti i caratteri speciali all'interno della tua posta elettronica come entità HTML.
Inoltre, includeremo un paio di resettabili reset di stile per garantire che la nostra email sia resa come vogliamo che sia attraverso le piattaforme.
Email subject or title Si noti che il meta tag viewport ha implicazioni negative per Blackberry.
Ora possiamo inserire le nostre query sui media; quanti dipendono dal livello di specificità che desideri consegnare a ciascun dispositivo. In questo esempio ne utilizzeremo solo uno: è ragionevole supporre che la maggior parte dei dispositivi con dimensioni dello schermo non superiori a 600 px siano moderni, mobili e touchscreen e beneficeranno di uno stile ottimizzato per dispositivi mobili. Inoltre, assumeremo che seguendo le tecniche universali di best practice mobile, delineate in precedenza, gli utenti mobili su dispositivi più grandi che ricevono il layout desktop non incontreranno importanti problemi di usabilità.
Utilizziamo le query sui media nello stesso modo in cui lo faremmo quando costruiamo un sito Web; se la dimensione del viewport rientra nei limiti impostati nella query multimediale, applicare lo stile.
@media only screen and (max-width: 600px) {table[class="hide"], img[class="hide"], td[class="hide"] {display:none!important;}}Nell'esempio sopra stiamo dicendo alcuni elementi con una classe di "nascondi" da mostrare: nessuno su schermi più stretti di 600px. La proprietà! Important assicura che qualsiasi stile in linea sia sovrascritto. Questo è il principio di base del design delle e-mail reattivo: le dichiarazioni di stile in overriding fatte nel corpo del documento HTML con! Importanti dichiarazioni di stile fatte nel
sezione e il targeting di questi stili sostituisce le dimensioni dello schermo specifiche con le query multimediali. Un'eccezionale eccezione è l'app di Gmail che ignorerà qualsiasi dichiarazione di stile nel file sezione. Tuttavia, un attento allineamento a sinistra dei contenuti dovrebbe garantire un'esperienza utente soddisfacente per i fan di Gmail nella tua mailing list. Ovviamente questa non è una soluzione ideale, ma al momento, la progettazione di email reattive è tanto sui compromessi considerati quanto sulle tecniche all'avanguardia.Vale la pena notare che stiamo prendendo di mira i nostri elementi HTML con selettori di attributi CSS per superare a rendering di stranezza di Yahoo! Mail.
Quindi possiamo vedere che le media query sono uno strumento utile per visualizzare selettivamente i contenuti ma possiamo anche usarli per manipolare altre funzionalità del nostro layout. Forse, cosa più importante, possiamo limitare la larghezza della colonna della nostra e-mail, la chiave per una grande esperienza mobile.
@media only screen and (max-width: 600px) {table[class="content_block"] {width: 92%!important;}}Abbiamo ora affermato nella nostra query sui media che tutte le tabelle con una classe di "content_block" dovrebbero scalare fino al 92% di larghezza su dispositivi con dimensioni dello schermo fino a 600 px. Ora tutto ciò che dobbiamo fare è specificare un attributo width inline (600px) per qualsiasi tabella con una classe di content_block e abbiamo un contenitore a larghezza fissa che poi si ridimensiona proporzionalmente su schermi con una certa dimensione. A condizione che gli attributi di larghezza degli elementi figli di questo contenitore siano tutti specificati come percentuali, questo è un modello di email reattivo di base.
Fai attenzione quando disabiliti la regolazione automatica della dimensione del testo del webkit sul tag del corpo, come regola generale, prova a mantenere le dimensioni dei caratteri superiori a 12px minimo.
pulsanti
Gli inviti all'azione (CTA) sono in genere la parte più importante di un'e-mail di marketing. Dovrebbero essere accattivanti, ben posizionati e, soprattutto, utilizzabili. I criteri per un ottimo CTA sono diversi a seconda che sia selezionato da un cursore o un dito. Questa è una potente funzione di email reattiva; per fornire agli utenti piccoli dispositivi touch-screen con pulsanti intuitivi che non sono influenzati dai bloccanti di immagine.
Sfortunatamente, tali pulsanti non possono essere visualizzati universalmente poiché si basano su proprietà di riempimento che non sono supportate in alcuni client di posta elettronica desktop.
@media only screen and (max-width:600) {a[class="button"]{display: block;padding: 7px 8px 6px 8px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;color: #fff!important;background: #f46f62;text-align: center;text-decoration: none!important;}}Le dichiarazioni di stile sopra trasformeranno i tag con una classe di "pulsanti", come quella sottostante, in pulsanti grandi, accattivanti e colorati che si estendono per tutta la larghezza dell'area del contenuto, purché la larghezza dello schermo del dispositivo non sia superiore a 600 px. Il supporto CSS3 non dovrebbe essere un problema in quanto possiamo presumere che la tecnologia mobile che stiamo prendendo di mira sia ragionevolmente moderna.