Email & Mobile: la guida definitiva al design responsive, in un nuovo ebook

Design scalabile, fluid, mobile-friendly, responsive, modulare. Il contatto tra l’email e il mobile ha aperto un mondo alle aziende, che non comporta solo problematiche, ma soprattutto opportunità, vantaggi.

Per questo abbiamo pensato a un ebook che entrasse in profondità nel tema del mobile responsive, esplorando la teoria e la pratica per offrirti nozioni, tecniche, strumenti e buone pratiche con cui realizzare email perfette per smartphone e tablet. Tutto con un obiettivo: migliorare le performance delle campagne.

Ecco di cosa parleremo nell’ebook:

1. Perché ottimizzare le email per mobile?
   Opportunità e vantaggi
2. Dizionario tecnico
   HTML, CSS e tipi di ottimizzazione
3. Orientamento della lettura e layout
   La possibili strutture modulari
4. La resa delle immagini
   Peso, dimensioni e criticità
5. Background colorati
   I complementi delle immagini
6. Bottoni di call to action
   Posizione e specifiche tecniche
7. Il mondo degli email editor
   Creare email perfette per mobile
8. Alle prese con l’HTML
   I 6 errori da non commettere

Come ci racconta Email Client Market Share Trends di Litmus del giugno 2018, ormai un’email su due viene aperta da mobile, e il trend è destinato a continuare in questa direzione.

Un dato che per le aziende non significa solo ottimizzare le email per visualizzazioni su tutti gli schermi, ma anche cambiare l’approccio con cui si progettano i vari elementi delle campagne: dalle immagini allo sfondo, dai colori ai bottoni di call to action.

Se nell’ebook approfondiremo anche gli aspetti teorici del mobile responsive, in questo post ti offriamo un’anteprima sui consigli per ottimizzare alcuni aspetti grafici e tecnici.

1. Rendi il bottone visibile all’apertura

C’è un modo preciso con cui i destinatari interagiscono con lo smartphone e le email. La maggioranza usa una sola mano, il pollice per interagire con lo schermo, le altre dita per sorreggere lo smartphone.

Sarebbe quindi ottimale che il bottone fosse visibile senza nemmeno uno scroll se non addirittura collocato nella parte superiore dello schermo.

2. Gioca con il bottone

Ci sono anche brand che giocano con il bottone, collocandolo (quasi provocatoriamente) lontano dall’header. Obiettivo: creare engagement, interazione, innescare una dinamica ludica. Ecco un ottimo esempio:

Nella stessa prospettiva ludica, Loft ha incentrato il messaggio su un ostentato invito al clic, ironizzando su questa dinamica chiave dell’Email Marketing.

3. Crea un bottone bulletproof

Bulletproof, propriamente, significa antiproiettile o infrangibile, e indica un elemento grafico scritto in HTML, la cui visualizzazione non può “rompersi” in nessuna circostanza. Il grande vantaggio del design bulletproof è che viene visualizzato e funziona correttamente in qualsiasi casella di posta, non trattandosi di un’immagine.

4. Non creare bottoni testuali

A volte la call to action può anche presentarsi non come un bottone, ma come un testo. 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.

5. Fai A/B test sui diversi elementi

L’A/B test è quello strumento che consente di mettere a confronto due versioni dello stesso messaggio e definire una versione vincente (per tassi di apertura, di clic e di conversione). Applicato alla call to action, un A/B test ti consente di mettere a confronto:

• Copy (1°/2° persona, specifico/generico, etc.)
• Colore
• Dimensione
• Forme ed effetti (smussature, ombreggiature etc.)

1. Peso: alcune raccomandazioni

Quanto siamo disposti ad attendere per l’apertura di una pagina web? Secondo Kinsta, il 74% degli utenti abbandona dopo i 5 secondi, mentre i dati di Soasta ci dicono che le conversioni cominciano a crollare già prima del 2 secondi.

Per questo è fondamentale che le immagini siano sufficientemente leggere da essere velocemente scaricabili, ma salvaguardandone la risoluzione. Ricorda sempre di:

• Salvare le immagini in formato JPG, GIF, PNG
• Mantenere un peso massimo attorno ai 50 KB
• Assicurare che la risoluzione dell’immagine sia di 72 dpi.

2. Dimensioni: mai esagerare, in eccesso e in difetto

Spesso si concepisce un’immagine per una campagna pubblicitaria o il sito e la si riutilizza per il canale email. Senza alcuni ritocchi, le dimensioni di quell’immagine non saranno funzionali. Ecco allora le nostre raccomandazioni:

• Taglia sempre le immagini su misura per l’email
• Salva tutte le immagini nella stessa cartella, così da avere la medesima fonte e un maggior controllo in caso di modifica
• Non fissare le dimensioni delle immagini, ma lasciarle fluide all’interno della cornice in cui sono collocate, lasciando che sia la struttura della comunicazione a “plasmare” l’immagine.

3. Alt text: mai scordarsene

Tieni sempre presente che alcuni client di posta, di default, non visualizzano le immagini e che per diversi motivi alcuni utenti preferiscono disabilitarle: in questi casi molte email risultano irrimediabilmente compromesse.

Per rimediare a questa criticità vanno inseriti nel codice HTML gli alt text, che definiscono i testi da visualizzare in caso di mancato caricamento dell’immagine. Ecco le nostre raccomandazioni:

• Assicurati che le immagini più importanti abbiano sempre l’attributo alt valorizzati
• Non eccedere nel testo inserito, potrebbe spaginare la comunicazione
• Assicurati che il colore dell’alt text (per dimensioni e colore) sia facilmente leggibile
• Lascia preferibilmente la sottolineatura al testo alternativo con un link in maniera tale che sia facilmente riconoscibile la sua funzione.

4. Le email image-only: tabù

Le image-only sono quelle email costruite come un’unica grande immagine che comprende testi e bottoni di call to action. Si tratta di un’opzione pericolosa, perché finiscono spesso nelle cartelle spam e, non essendo ottimizzate per i dispositivi mobili, possono non essere scaricate completamente.

Tieni sempre a mente a mente che, per essere efficaci, le email devono conservare un equilibrio tra immagini e testo (almeno 500 caratteri di testo).

Come accennato a inizio post, l’ottimizzazione delle email non è solo una questione tecnica, ma anche strategica, che apre alle aziende la possibilità di migliorare le performance delle campagne.

Un doppio approccio con cui abbiamo dato vita al nostro ebook, per offrirti un percorso teorico e pratico che analizzi le specifiche tecniche per l’ottimizzazione e alcuni consigli per migliorare tassi di clic e conversione.

Buona lettura!