Come progettare e-mail per un approccio mobile first

Stiamo combattendo la buona battaglia, che è la battaglia senza fine del flusso costante di e-mail. Non importa dove andiamo o quale dispositivo abbiamo con noi, le e-mail possono trovarci ovunque. È probabile che tu abbia altre dieci email dopo aver letto questo articolo. E come designer, siamo su entrambi i lati della posta in arrivo: riceviamo costantemente e-mail, ma siamo anche responsabili della progettazione e della creazione dei progetti di posta elettronica effettivi.

Indipendentemente da chi stai prendendo di mira con la tua e-mail, l'obiettivo è fornire la migliore esperienza utente quando invii e-mail a abbonati, clienti e potenziali clienti. E poiché la maggior parte delle e-mail viene aperta su dispositivi mobili, dobbiamo progettare e-mail per adattarsi a qualsiasi dispositivo su cui potrebbero essere aperte.

Siamo così abituati al web design reattivo e alle applicazioni mobili di prim'ordine che spesso diamo per scontato che possiamo semplicemente prendere qualsiasi dispositivo e progettare un'esperienza su misura. Con la posta elettronica, le cose non sono così asciutte. In termini di tecnologia, è anni luce indietro rispetto al moderno web design. Abbiamo bisogno di progettare con attributi HTML, layout basati su tabelle e stili inline, che non sono garantiti per comportarsi allo stesso modo in ogni client di posta elettronica.

Progettare l'e-mail per tutti i dispositivi, quali sono le mie opzioni?

Prima di rispolverare la tua raccolta di CD-ROM, ricorda che c'è speranza per la progettazione di un'e-mail "reattiva" di successo, anche con i limiti. La creazione di un'e-mail veramente reattiva è certamente un'opzione, ma è importante considerare tutti e tre questi approcci quando si crea un design mobile first di successo:

• Design scalabile
• Design fluido
• Design reattivo

Per scegliere l'approccio più adatto alle proprie esigenze, è importante comprendere le differenze ei limiti tra queste tre forme di progettazione. Per prendere una decisione è necessario conoscere il tuo pubblico e quali dispositivi e client di posta elettronica utilizzano. Poiché non tutti i client di posta elettronica offrono lo stesso supporto CSS, questo aiuterà a determinare quale approccio sarà più adatto ai tuoi utenti.

Design scalabile

I layout e-mail scalabili sono versatili perché sono leggibili e selezionabili su tutte le dimensioni dello schermo. Questa è un'ottima opzione se il tuo pubblico tende ad aprire le proprie e-mail su una varietà di dispositivi: mobile, tablet e desktop.

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Email content goes here.</p>
</table>

Questa opzione è in genere la più semplice da implementare poiché non utilizza media query e non ci sono larghezze di tabella che devono essere regolate. Un vantaggio è che non c'è un'enorme curva di apprendimento durante la progettazione di questo tipo di e-mail. Nella maggior parte dei casi, il dispositivo mobile è il dispositivo più comune per leggere la posta elettronica e questo rende facile garantire che le considerazioni sul dispositivo mobile vengano prese per prime. Pulsanti più grandi, testo di facile lettura e inviti all'azione chiari danno la priorità ai dispositivi mobili per soddisfare le esigenze di dimensioni dello schermo più piccole.

Il design scalabile dell'e-mail può essere limitante in quanto deve essere una singola colonna per funzionare bene su tutti i dispositivi. Il motivo è che se il design avesse più colonne, queste diventerebbero molto piccole sui dispositivi mobili, compromettendo la leggibilità. Tuttavia, se scorri la posta in arrivo, vedrai molti layout a colonna singola perché sono molto comuni.

Il contenuto è fondamentale per qualsiasi e-mail, quindi la dimensione del testo dovrebbe essere di una dimensione che funzioni bene per dispositivi mobili e anche su schermi più grandi. Con la maggior parte dei client di posta elettronica, l'intera posta elettronica riempirà lo schermo in modo che l'utente non debba scorrere verticalmente. Tuttavia, si consiglia comunque di inserire le informazioni chiave e l'invito all'azione nella parte superiore sinistra dell'e-mail, nel caso in cui l'e-mail non riempia lo schermo come previsto.

Design fluido

Potresti avere familiarità con i layout "liquidi" del web design. I componenti di progettazione hanno larghezze percentuali e si adattano alla risoluzione dello schermo dell'utente, mantenendo le stesse larghezze. Il design fluido dell'e-mail utilizza questa stessa idea.

Questa opzione e-mail colma il divario tra un'opzione scalabile e un'opzione veramente responsabile. È necessario eseguire una progettazione più anticipata rispetto all'opzione scalabile. La ragione di ciò è che il dimensionamento in percentuale fa sì che la larghezza delle tabelle e delle immagini si adatti a qualsiasi dimensione dello schermo su cui viene visualizzata l'e-mail. Le tabelle non alterano il layout a diverse dimensioni, ma il contenuto scorre e riempie lo spazio. Questa è un'ottima opzione per le e-mail che contengono testo pesante, poiché c'è meno controllo su come la copia e le immagini si relazionano tra loro. È comunque una buona idea mantenere il layout semplice, preferibilmente un layout a tabella singola per mantenere la leggibilità dell'e-mail come prima priorità.

Ricordi come abbiamo detto che questo colma il divario tra fisso e reattivo? Il motivo è che le dimensioni devono essere limitate per schermi più grandi. Se l'e-mail diventa troppo larga, le righe di testo diventano visivamente troppo lunghe e vogliamo assicurarci che i nostri lettori possano leggere facilmente la nostra e-mail. Avvolgere il contenuto della tua e-mail in una tabella contenitore a larghezza fissa aiuterà per l'aspetto su schermi di dimensioni maggiori. Quindi una query multimediale utile prenderà di mira dimensioni dello schermo più piccole.

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;525&quot; class=&quot;wrap&quot;>
<tr>
<td>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Wrapping table will help on larger screens.</p>
</table>
</td>
</tr>
</table>

Esempio di media query per dispositivi mobili:

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

Email reattiva

Prendiamo ciò che sappiamo dalle e-mail scalabili e fluide e aggiungiamo altre regole. Responsive ti consente di avere un maggiore controllo su ciò che viene presentato in diversi punti di interruzione con le query multimediali CSS. Con questa opzione, i layout possono essere modificati e anche altri elementi possono essere personalizzati con stili condizionali per punti di interruzione specifici.

Ecco un esempio di media query per un layout reattivo:

@media only screen and (max-width: 450px) {
td[class="column"] {
display: block;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}

Come le altre opzioni, non sei limitato a una colonna o a semplici design. Le e-mail possono essere più complesse, con meno restrizioni sul layout e sulla quantità di immagini. Ad esempio, i progetti di posta elettronica possono essere costituiti da più colonne su dispositivi più grandi ma una singola colonna su dispositivi mobili. Le dimensioni del testo, le immagini e quasi tutto il resto possono essere ottimizzate per la migliore esperienza.

Prima di creare progetti complessi con più media query, è importante parlare di alcuni dei compromessi. Le media query non funzionano in tutti i client di posta elettronica. In effetti, il supporto è piuttosto limitato. Secondo l'elenco di supporto per le query multimediali Litmus, l'app Android Outlook.com, il client nativo Android 4.x e iOS (iPhone/iPad) attualmente li supportano. Questi possono essere utilizzati al massimo delle potenzialità se la maggior parte dei tuoi spettatori sono utenti di dispositivi mobili e tablet.

Altre considerazioni di progettazione

Prima di iniziare a creare il design della tua e-mail, è importante esaminare l'analisi per determinare quali client di posta elettronica e dispositivi dei tuoi utenti. Si consiglia di verificarlo frequentemente e lasciare che il proprio approccio progettuale si evolva man mano che le cose cambiano. Anche con limitazioni, l'e-mail si sta evolvendo, quindi è importante tenere il passo con ciò che è attualmente supportato.

Ecco alcune ottime risorse per ulteriori letture:

• CSS specifico per dispositivi mobili
• Futuro dell'e-mail
• Email iPhone e Android

La buona notizia è che un approccio mobile first è possibile con gli attuali limiti delle e-mail. Anche se il design non è la forma più vera di "reattivo", con solo alcune percentuali specificate e alcune query multimediali, creerai un design e-mail che sicuramente impressionerà, indipendentemente dal dispositivo. Nella maggior parte dei casi, la maggior parte degli utenti controlla la posta elettronica su dispositivi mobili, quindi adottare un approccio mobile first diventa una solida base per la progettazione della posta elettronica.