Quasi metà delle email, oggi, viene aperta da mobile. Un trend che oggi conosciamo tutti e che è sempre più supportato dai dati. Abbiamo già parlato di come il mobile scandisca la nostra giornata, tanto da indurre Google a passare dal desktop first index al mobile first index. Si capisce allora quanto sia fondamentale l’ottimizzazione dell’email, la sua capacità di essere responsive e perfettamente visualizzabile da smartphone e da tablet, in altre parole assicurare una email design responsive.
Cosa si intende per email design responsive
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:
- i contenuti si riorganizzano e ridispongono in modo da risultare ben fruibili in tutti i contesti;
- 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;
- il ridimensionamento viene gestito cambiando le proporzioni degli elementi in base alla media query rilevante.
Per riassumere, una email design 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.
Ad 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.
- 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.
- 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
La maggior parte di noi, quando apre l’email non sa bene cosa fare. È necessario quindi indicarlo, 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.
- 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.
- Gioca con il bottone – Ci sono anche brand che giocano con l’elemento della call-to-action. C’è addirittura chi ironizza sulla best practice, 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.
- 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.
- Non creare bottoni testuali – Molte email che vediamo in giro presentano un bottone di call-to-action testuale. 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.
Fonte: ninjamarketing