Abbiamo fatto ordine tra i diversi aspetti del mobile responsive, per restituirti il contenuto più esaustivo possibile con le tecniche, gli strumenti e le buone pratiche per ottimizzare le email.

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

Scarica l'ebook

Viviamo in un mondo mobile-oriented

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.

Aperture da mobile: 46%
Aperture da webmail: 35%
Aperture da desktop: 18%.

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.

Call to action: posizione e specifiche tecniche

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.

Le posizioni della call to action

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:

Creare engagement con la call to action

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

L'email di Loft

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.

Differenze tra bottone bulletproof e non

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.

I bottoni testuali nell'email

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.)

La resa delle immagini: peso, dimensioni, criticità

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.

Schermo retina o schermo normale?
Introdotti da Apple nel 2010, gli schermi retina si basano su una densità di pixel doppia rispetto a uno schermo normale. Quindi, per non avere un effetto sgranato sarà necessario raddoppiare anche le dimensioni delle immagini.
Densità per schermi normali ➡ 250×145 px
Densità per schermi retina ➡ 500×290 px

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).

La vita precaria delle email image-only

Per concludere

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!

Scarica l'ebook

Ti è piaciuto questo articolo? Ne abbiamo molti altri in serbo per te.

Iscriviti ora per rimanere sempre aggiornato sulle novità di email e SMS marketing.

Leggi anche

Deliverability: la storia di MailUp

Email design, automation, segmentazione? Il primo fattore per assicurare la riuscita di una campagna di Email Marketing è forse il più sottovalutato. Parliamo della deliverability ...

Continua a leggere

Scrivere il preheader dell’email: 9 errori da non commettere

L’oggetto di una campagna non può dirsi veramente ottimizzato senza un buon preheader. Impariamo dagli errori: ecco le 9 azioni da evitare per scongiurare un ...

Continua a leggere

Le strategie per il No profit, tra Email, SMS e Messaging Apps

Nella versione aggiornata ed espansa del nostro white paper, le strategie più avanzate ed efficaci per coinvolgere i donatori, fidelizzarli e fare fundraising, grazie ai ...

Continua a leggere

Guida completa alla creazione di email di recupero carrello perfette

Quando una vendita non si concretizza, la situazione non è mai positiva, ma non intervenire per risolvere il problema è ancora peggio. Non aspettare che ...

Continua a leggere

Infografica Email Marketing 2019: tutti i dati e i trend

I numeri, le perfomance e gli andamenti individuati nell'Osservatorio Statistico 2019, in una comoda infografica da consultare e condividere subito. Se ti sei sempre chiesto se ...

Continua a leggere

Nozioni base per sviluppare email HTML responsive

Come in una costruzione, occorrono solide fondamenta: oggi vediamo le operazioni per gettare le basi delle tue campagne, garantendo la corretta visualizzazione sui vari client ...

Continua a leggere