Non perderti una notizia!

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

Sì, voglio ricevere aggiornamenti sulla formazione e sugli eventi di MailUp.
Ricevi aggiornamenti
su Messenger
10 min
  • 10

Entro il 2021 saranno 6,3 miliardi gli smartphone nel mondo. A dircelo sono i dati dell’ultimo Ericsson Mobility Report, che evidenziano un trend inarrestabile a cui l’email marketing non potrà che adeguarsi, orientando design e contenuti al genere di lettura imposto dal mobile, sempre più rapido e intermittente.

Spesso ci sentiamo rivolgere la fatidica domanda: “Ma come faccio ad adattare i miei template per visualizzazioni su dispositivi mobili senza perdere in ricchezza e accuratezza del messaggio?”. Creare email per smartphone e tablet è in realtà molto semplice, a patto che si rivoluzioni il punto di vista, mettendo il mobile all’inizio del processo creativo e non alla fine. Si tratta della teoria del mobile first: è più facile e più efficiente pensare template mobile che si arricchiscono di funzionalità quando fruiti da desktop, che template desktop che perdono elementi quando visualizzati su mobile.

Per fare proprio l’approccio mobile first servono tecnologie e buoni esempi da cui trarre ispirazione. Ecco allora 10 consigli per creare email dal design efficace e responsive, supportati dalle funzioni avanzate dell’editor BEE e corredati con alcune campagne di successo di noti brand internazionali.

1. L’email non è nient’altro che un teaser

L’email non è una scheda descrittiva del tuo ultimo prodotto, dell’offerta o dell’evento che stai lanciando. È un teaser, un messaggio che introduce e presenta le novità di un brand. Spetta poi ai destinatari scegliere se approfondire o meno il contenuto, con un clic o un tap sulla call to action.

Il luogo dove comunicare i dettagli è un altro: il tuo sito. Resisti alla tentazione di saturare l’email con troppe informazioni. Ecco un buon esempio di messaggio breve e focalizzato su un unico obiettivo comunicativo:

modello email responsive IFTTT
2. La piramide rovesciata dei contenuti

L’ordine e un’equilibrata disposizione dei contenuti favoriscono i tassi di clic e conversione. Un modello da seguire è quello della piramide rovesciata:

Lo schema a piramide rovesciata per le email

Una disposizione del genere accompagna il lettore lungo differenti livelli di lettura. Ecco un esempio pratico da una delle nostre ultime email, dedicata all’edizione 2016 dell’Osservatorio Statistico:

Email Osservatorio Statistico di MailUp

L’editor BEE, integrato nella piattaforma MailUp, ti consente di creare questa struttura con semplici operazioni drag & drop. Bastano quattro elementi: un modulo Immagine per l’header, due moduli Testo per titolo e sommario, e un modulo Bottone per la call to action.

Design modulare con BEE

3. “Clicca qui” non è una call to action

La call to action deve invitare all’azione facendo intravedere il possibile vantaggio. I pronomi possessivi (“mio”, “tuo”) aiutano invece a dare al bottone un accento più informale e coinvolgente, meno freddo e impositivo.

È inoltre sempre consigliabile che le call to action siano bulletproof. Cossa significa? È un termine che indica un bottone scritto in HTML e non inserito come immagine, capace di garantire la corretta visualizzazione nelle inbox di tutti i client di posta elettronica. Un altro buon motivo per creare le tue email con BEE, dal momento che tutti i bottoni creati sono bulletproof.

Creare call to action con BEE

4. Le insidie delle email image-only

In inglese si chiamano image-only, e sono tutte quelle email progettate come un’unica grande immagine cliccabile. Possono sembrare la soluzione a molti problemi, ma nascondono diverse insidie: sono infatti uno dei bersagli preferiti dei filtri anti-spam, oltre a non essere mai del tutto responsive. E se i client di posta dei tuoi contatti non caricano le immagini, delle tue email non resterà altro che un testo alternativo. Per questo noi ti consigliamo di optare per un buon equilibrio tra moduli di testo e moduli di immagini.

5. Progetta l’email come una griglia

Le email costruite seguendo uno schema a griglia sono più facili da rendere responsive. Un editor come BEE ti consente di progettare e creare la tua email con un design modulare, offrendo così un elevato grado di flessibilità nell’organizzazione dei contenuti. Quella che segue è un’infografica di Aveda, efficace sia nei contenuti che nella resa grafica, ma inizialmente concepita come un’unica immagine.

L'email con infografica di Aveda

Con BEE è possibile realizzare lo stesso progetto grafico e renderlo responsive, dividendo l’immagine in quattro differenti moduli con le relative didascalie. Ecco la stessa infografica creata con BEE, ottimizzata per visualizzazioni su smartphone e tablet.

La struttura a griglia dell'email di Aveda

La struttura a griglia dell'email di Aveda

6. Ricorda di inserire sempre i testi alternativi

Alcuni client di posta elettronica non caricano automaticamente le immagini e alcuni utenti non attivano l’opzione di autocaricamento per motivi di sicurezza. Per questo è essenziale inserire sempre i testi alternativi, per dare un appiglio al lettore e fargli comprendere il contenuto dell’immagine che non ha modo di visualizzare.

Inserire i testi alternativi con BEE

7. L’email non è la pagina di un sito

Se hai fatto tuoi i punti #1 e #2, allora avrai compreso che l’email ha come obiettivo quello di condurre il lettore a un unico e inequivocabile invito all’azione. Affollare l’email o l’header di link e messaggi collaterali non serve a niente, anzi, ostacola la lettura. Un’email non potrà mai permettersi un menù o la complessità di una pagina web. Ecco un esempio di elemento grafico che non dovrebbe mai trovare spazio in un messaggio di posta elettronica:

L'inutilità del menù nell'email

Inversamente, ciò che l’email può permettersi è un certo grado di personalizzazione. Ricorda quindi di utilizzare i dati dei tuoi destinatari che hai a disposizione per personalizzare il messaggio. Puoi sfruttare le informazioni in database per lanciare campagne profilate e tanto più rilevanti quanto più dettagliato è il profilo di ciascun destinatario.
Oltre ai campi dinamici per inserire il nome di ciascun destinatario nell’email, MailUp ti mette a disposizione tanti strumenti per la segmentazione avanzata dei contatti, dai filtri anagrafici a quelli per attività.

8. La scelta dei font

La maggior parte dei client di posta elettronica non supportano i font personalizzati. Ti consigliamo quindi di usare il font speciale del tuo brand con parsimonia, magari nell’header dell’email, salvo poi impiegare font di sicura affidabilità (Serif, Arial, Helvetica, Verdana) per il rimanente corpo del messaggio. Di seguito, un ottimo esempio dalla newsletter di Mashable, che per l’header azzurro (nient’altro che un’immagine) ha utilizzato il suo font personalizzato, optando nel resto dell’email per uno più comune, capace di garantire la migliore visualizzazione in tutte le inbox.

L'utilizzo dei font nell'email di Mashable

9. Mai dimenticare il sommario

Il sommario (o preheader) di un’email è quel breve testo che viene visualizzato nell’inbox dopo l’oggetto. In questo video ti spieghiamo come personalizzarlo con MailUp.

I tuoi destinatari usano il sommario come uno strumento per scansionare le email nella casella di posta in arrivo: una rapida occhiata e sapranno cosa fare dell’email, se aprirla o cestinarla. Per questo un sommario ben calibrato aiuta a incrementare i tassi di apertura. Purché sia compreso tra le 40 e le 50 battute.

Il giusto sommario per aumentare i tassi di apertura

10. Usa con accortezza le GIF animate

Le GIF animate sono un efficace dispositivo di racconto visivo che funziona perfettamente in quasi tutti i client di posta. Quel “quasi” è rappresentato da Outlook, versione 2007 e più recenti, che visualizzano solo il primo fotogramma della GIF, di fatto cristallizzandola in un’immagine. Banana Republic, lungimirante, utilizza un punto interrogativo come primo fotogramma, rendendo così la GIF animata comprensibile anche se non animata.

Il primo frame della GIF di Sweet Treat

Questa invece la GIF in movimento:

banana_animated

 

A seconda del numero di frame e della loro risoluzione, le GIF possono dare vita a file di grandi dimensioni. A risentirne è la velocità di animazione e il traffico dati del destinatario. Per questo ti consigliamo di minimizzare le dimensioni della GIF animando solo lo stretto necessario.

Dalla teoria alla pratica

Per la tua prossima campagna, prova a mettere in pratica tutti i 10 punti elencati, magari facendoti ispirare dagli ultimi trend di email design: li trovi raccolti nel nostro white paper La guida all’email design. Poi confronta i risultati con quelli delle campagne precedenti, e raccontaci com’è andata!

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

Email & Automation per il Retail: il white paper dedicato ai negozi

Ti presentiamo il nuovo contenuto verticale ritagliato sulle esigenze (presenti e future) degli store fisici: un percorso formativo tra strumenti e spunti strategici per portare ...

Continua a leggere

4 errori fatali nella gestione delle immagini (e come risolverli)

Le email sono come iceberg: spesso concentriamo tutte le energie nel creare gli elementi principali (come CTA, testi, oggetto, qualità delle immagini) e dimentichiamo di ...

Continua a leggere

Tutorial: come personalizzare le immagini delle email per ciascun utente

Personalizzare le comunicazioni, oggi, significa anche utilizzare contenuti dinamici. Basta dare un occhio alla propria casella inbox per rendersi conto di quanti messaggi riceviamo ogni ...

Continua a leggere

Gmail taglia i messaggi? 4 modi per evitarlo

Progettare una campagna via email perfetta è impegnativo: bisogna curare molti elementi, dal contenuto visivo al testo, fino all’oggetto e all’invito ad agire. Nel corso della meticolosa ...

Continua a leggere

HTML e CSS: guida introduttiva

Non serve essere programmatori per creare email che funzionino... ma qualche nozione aiuta. Oggi entriamo nell'universo di HTML e CSS, svelandone le caratteristiche base per ...

Continua a leggere

“Compra ora” o “Scopri di più”? Come fare A/B test sulla call-to-action

I bottoni sono da sempre usati dall’uomo per interagire con il mondo fisico. Nella vita di tutti i giorni schiacciamo bottoni per accendere il pc, ...

Continua a leggere