Responsive e-mail

Tutti conosciamo, ormai, il termine MobielGeddon.  Il 21 Aprile 2105 Google ha aggiornato il suo algoritmo di ricerca su mobile dando la priorità ai siti ottimizzati per smartphone e tablet.  Una modifica motivata dal fatto che oltre il 60 % del traffico verso il nostro sito arriva da dispositivi mobili.
La logica che ha spinto Google a privilegiare i siti responsive (o adattivi), ovvero rendere piacevole ed efficace la navigazione di un sito tramite mobile, è valida anche per le e-mail che, nella maggior parte dei casi, vengono lette da smartphone.  Vediamo insieme quali sono gli accorgimenti da utilizzare nella creazione di un template e-mail, quali sono i caveat da tenere a mente e dove reperire pattern gratuiti da utilizzare a piacimento.

Click in percentuale

Un noto servizio di mailing ha analizzato il comportamento degli utenti in funzione dei dispositivi di lettura delle mail.  Lo studio ha rilevato che la percentuale di click sui link delle e-mail lette tramite desktop è di gran lunga superiore (64%) rispetto a tablet e smartphone (36%). 
In una seconda fase è stato condotta la stessa analisi utilizzando un responsive template.  Il risultato ottenuto ha visto un aumento del 15% dei click sulle e-mail lette da dispositivo mobile.

Caveat

Utilizzare un template in grado di adattarsi al dispositivo dal quale viene letto è la scelta giusta da fare, ma occorre tener presente che quanto di seguito riportato non è valido per tutti i client e-mail.  Sappiamo già che una stessa e-mail può essere visualizzata in maniera diversa anche se letta da desktop in funzione del software (client) che andremo ad utilizzare. La seguente tabella (non esaustiva) mostra una lista di compatibilità dei client di default di diversi dispositivi.

Come creare un responsive template

Per un template responsive si deve tener conto dei seguenti aspetti:

• il CSS della mail dovrà prevedere le media-queries ovvero gli attributi CSS3 che descrivono il comportamento dei diversi elementi sulla pagina in ogni risoluzione.
• per ogni risoluzione di schermo è necessario progettare un layout ad hoc, riposizionando gli elementi e ridimensionando le immagini.
• Le immagini vanno ridimensionate in funzione dei vari dispositivi.
• Gli elementi vanno ridimensionati secondo le diverse risoluzioni.
   

Template gratuiti

Creare una e-mail che sia ben strutturata e che risponda alle regole della adattabilità non è certo semplice.  I seguenti due siti forniscono  template da modificare a proprio piacimento

• Responsive e-mail Patterns offre una valida lista di pattern e moduli adattivi per e-mail.
• Zurb  –  Template in grado di essere visualizzati correttamente su una vasta gamma di client.