Le best practice da conoscere per un email design responsive

“Quasi metà delle email, oggi, viene aperta da mobile”.  Un trend che oggi conosciamo tutti e che è sempre più supportato dai dati: uno degli ultimi aggiornamenti lo ha fornito Litmus (Email Client Market Share Trends), secondo cui le aperture da mobile ammontano al 46% del totale. Quest le cifre che devono portarci a riflettere sul reale impatto del mobile nelle strategie di email marketing:

• aperture da mobile: 46%
• aperture da webmail: 35%
• aperture da desktop: 18%

Un ulteriore dato ci permette di entrare più in profondità nell’argomento: secondo Impact of Mobile Use on Email Engagement di Mailchimp, i clic unici da mobile sulle email responsive sono aumentati del 15%, dal 2,7% al 3,1%. Un incremento che, per le le medie dell’email marketing, è assolutamente rilevante. Il motivo è facilmente spiegabile e potremmo riassumerlo con uno schema di causa-effetto: maggior fruibilità → maggiori clic → maggiori conversioni → maggior ROI Si capisce allora quanto sia fondamentale l’ottimizzazione dell’email, la sua capacità di essere responsive e perfettamente visualizzabile da smartphone e da tablet. Nel suo ultimo ebook su “Email & Mobile”, MailUp ci fornisce una guida definitiva al design responsive, con un percorso tra la teoria e la pratica per ottimizzare le campagne e migliorare le performance.

Dizionario tecnico: design responsive

In un ipotetico dizionario tecnico di email design, troveremmo come voci chiave HTML, CSS, media query, email design non responsive, email design scalabile, email design mobile mobile-friendly, design fluid, email design modulare, tutte voci che è possibile approfondire nell’ebook. Ma per cominciare è bene chiarire un concetto fondamentale, quello di design mobile responsive. Di cosa si tratta? Il principio è semplice: il contenuto del messaggio si adatta alla larghezza dello schermo, secondo regole dettate dalle media query CSS. La soluzione si affida a una serie di regole innescate dall’effettiva dimensione dello schermo:

1. i contenuti si riorganizzano e ridispongono in modo da risultare ben fruibili in tutti i contesti;
2. la dimensione del font, delle CTA e delle immagini si adatta in modo intelligente alle dimensioni dello schermo, garantendo una leggibilità e una cliccabilità ottimale anche sugli schermi più piccoli;
3. il ridimensionamento viene gestito cambiando le proporzioni degli elementi in base alla media query rilevante.

Per riassumere, il design mobile responsive fornisce la miglior risposta al mobile e assicura che ogni device visualizzi una versione differente del messaggio, ottimizzata proprio per quella specifica dimensione.

I layout (mobile oriented) per le email

Se per le visualizzazioni da desktop ogni orientamento può essere adottato, per il mobile il cerchio si restringe di molto. A imporlo è la verticalità che caratterizza visualizzazione e fruizione delle email su smartphone. Possiamo dire che la mobile responsiveness ammette uno al massimo due tipologie di layout. 1. Layout a colonna singola: costituito da uno o più moduli che riempiono l’intera larghezza dell’email, tutti impilati uno sopra l’altro. Vantaggi: facilità di lettura, grazie alla gerarchia ben definita, dall’alto in basso in base all’importanza e priorità del contenuto. Disposizione narrativa che asseconda lo storytelling, accompagnando il destinatario nella lettura dei contenuti. 2. Layout ibrido: molti brand inviano email con un header principale in alto e contenuti secondari in più colonne parallele sottostanti. Si tratta di un layout ibrido che passa da una colonna singola a colonna multipla. Vantaggi: funzionale alla gerarchizzazione, poiché il primo modulo (a colonna unica) marca la sua preminenza. Funzionale alla call-to-action multipla, offrendo il maggior grado di flessibilità.

Call-to-action: posizione e specifiche tecniche

Prima di parlare di call-to-action nelle email è bene fare una premessa: chi apre l’email non sa cosa deve fare. È necessario quindi indicarglielo, in modo forte e chiaro. Lo strumento fondamentale per farlo è la call-to-action, ben strutturata, chiara ed evidente, a maggior ragione su mobile. Ecco allora alcune best practice. 1. Rendi il bottone visibile all’apertura – C’è un modo preciso con cui i destinatari interagiscono con lo smartphone e le email. Una sola mano, il pollice che agisce sullo schermo, le altre dita che sorreggono il device. Per questo la posizione ottimale per il bottone è nella parte superiore dello schermo, visibile senza nemmeno uno scroll. 2. Gioca con il bottone – Ci sono anche brand che giocano con l’elemento della call-to-action. C’è addirittura chi ironizza sulla best practice che abbiamo appena visto, collocando provocatoriamente il bottone lontano dall’header di apertura. Un gioco che, se a prima vista può sembrare disfunzionale, hai il grande pregio di creare engagement, interazione. 3. Crea un bottone bulletproof – Bulletproof significa “antiproiettile” e, nell’email design, indica un elemento grafico scritto in HTML, la cui visualizzazione non può “rompersi” in nessuna circostanza. Il vantaggio? Viene visualizzato e funziona correttamente in qualsiasi casella di posta, non trattandosi di un’immagine. 4. Non creare bottoni testuali – Molte email che vediamo in giro presentano un bottone di call-to-action testuale (come nell’esempio sotto). Si tratta però di un’opzione non consigliabile in ottica mobile, dal momento che una stringa di testo (seppur ben evidenziata con colore e bold) risalta troppo poco nell’insieme.

>>> Vuoi saperne di più su come rendere responsive le tue email? Scarica l’ebook “Email & Mobile: la guida definitiva al design responsive”.