Il design dell’email: i 7 trend del momento

Il successo o il fallimento di una campagna di email marketing si gioca in una frazione di secondo: se la tua email non è allettante al primo impatto, la maggior parte degli iscritti la cancellerà senza alcuna esitazione.

Per aiutare la tua email a sopravvivere alla prima scrematura in inbox, abbiamo raccolto i trend di design che ogni marketer dovrebbe conoscere. Anche se non sei un designer, i nostri suggerimenti ti aiuteranno a creare email dallo stile moderno e professionale.

Se vuoi provare il nostro editor BeeFree, ti illustriamo passo passo come sfruttarne il potenziale.

1) Il mobile prima di tutto

La parola d’ordine per l’email marketing è mobile. Come riporta un recente studio di Litmus, il 53% delle email sono aperte su dispositivi mobili, che siano tablet o smartphone.

Oltre a utilizzare un design “responsive”, ecco i consigli di base per la maggior parte delle email ottimizzate per dispositivi mobile:

• L’oggetto dell’email dovrebbe aggirarsi attorno ai 40 caratteri o meno.
• Personalizza il preheader: sui mobile ha una visibilità pari a quella dell’oggetto.
• Scegli una dimensione del carattere non inferiore a 13 o 14 punti. In realtà molti designer consigliano addirittura 15 o 16 punti.
• Privilegia le colonne singole di testo, perché funzionano meglio. Noi consigliamo di rimanere sotto i 600 pixel.
• Comprimi  le immagini quanto più possibile, purché mantengano una buona qualità, specialmente sui dispositivi ad alta risoluzione.
• Crea bottoni di almeno 48 pixel, o più grandi, per aiutare il clic del destinatario.
• Evita elenchi di link, perché difficili da cliccare.
• Sii conciso e preciso. Taglia ogni contenuto superfluo.
• Scrivi la tua call to action in CSS, HTML o VML (Vector Markup Language). Non usare mai un’immagine per la call to action. Se le immagini sono disattivate, la call to action non funzionerà. E non dimenticare che ben il 40% degli utenti Gmail hanno ancora le immagini disattivate.

Chi usa BeeFree può tirare un sospiro di sollievo, perché l’editor crea in automatico il design delle tue email. Le email create con il nostro editor drag & drop hanno caratteristiche già ottimizzate per le visualizzazioni su mobile, come la larghezza impostata su 600 pixel:

Preferisci che l’email si sviluppi su un’unica colonna? Scegli il modello Una colonna tra i Modelli base del menù principale.

2) Le persone non leggono le email. Le scansionano

Questo implica che:

• Gli spazi bianchi risultano necessari. Non puoi affollare di contenuti la tua email. E non è nemmeno consigliabile utilizzare linee o altri elementi di design per suddividere gli spazi: meglio scegliere gli spazi bianchi.
• Il testo deve essere breve, conciso, limitato all’essenziale. La tua email ha un unico obiettivo: spingere il destinatario a cliccare, per poi condurlo a una landing page.
• I paragrafi devono essere corti. Una regola di design vuole che un paragrafo non superi le cinque righe. Affinché l’email non sia di difficile lettura, abbiamo fissato come  limite le tre righe.
• Usa un carattere di facile lettura (il Georgia, dimensione 16, è tra i preferiti di alcuni designer), e un buon contrasto con lo sfondo. Evita un carattere forte, che stordisce.

Per aumentare le dimensioni del testo in BeeFree, basta selezionare un blocco di testo ed evidenziarlo. Si aprirà una barra degli strumenti, sulla quale puoi scegliere e selezionare le modifiche.

3) 60/40: il rapporto perfetto testo/immagini

Tramando dietro i loro schermi, disperati nel capire come le email appaiono su più dispositivi, alcuni designer si sono chiesti se non potevano semplicemente abbandonare il testo e il layout e inviare un email grafica, fatta di una sola immagine. Purtroppo no, non possono.

Sull’argomento sono intervenuti anche i professionisti della deliverability, i quali hanno stabilito come troppe immagini nell’email possono abbattere le performance di deliverability.

Email on Acid ha fatto qualche ricerca e ha scoperto che il rapporto tra testo e immagini non ha alcun effetto sulla deliverability – a condizione che ci siano almeno 500 caratteri di testo nell’email. Si tratta di circa sei o sette righe di testo.

Anche se non può influenzare la deliverability, 60/40 è il giusto rapporto tra testo e immagini. Più facile da raggiungere se si includono anche degli spazi bianchi.

Per vedere se le email soddisfano la regola del 60/40, usa il pulsante Anteprima in BeeFree. In sostanza hai bisogno che più della metà della tua email sia testo o spazio bianco attorno al testo. O semplicemente conta 500 battute e assicurati che le tue immagini siano compresse il più possibile.

4) Usa un’immagine a tutto schermo

Le immagini a tutto schermo spopolano sul web. Esistono anche i video a tutto schermo: un esempio lo trovi sulla homepage di PayPal.

Sono diversi i motivi della loro popolarità: funzionano bene sui dispositivi mobili e rendono bene nel contrasto con gli spazi bianchi e, in generale, con un design minimale.

Con BeeFree è facilissimo inserire un’immagine a tutto schermo. Basta aggiungere al tuo modello un Modulo immagine e caricare l’immagine.

Non ti dimenticare di aggiungere i testi alternativi alle tue immagini. Così se qualcuno ha disattivato le immagini, potrà visualizzare i testi alternativi. In BeeFree puoi inserire i testi alternativi selezionando l’immagine e modificando l’apposito campo nella colonna di destra.

5) Gli spazi bianchi

Gli spazi bianchi hanno iniziato a riscuotere successo attorno al 2013, e ancora oggi sono molto utilizzati. Perché?

• Rendono il testo più agile alla prima scansione, come detto sopra.
• Rendono più facile la lettura, il che significa maggiori probabilità che l’email venga effettivamente letta e aperta.
• Si adattano perfettamente alla visualizzazione su differenti dispositivi.

Vuoi creare spazi bianchi nella tua email? Abbiamo qualche suggerimento:

1. Inizia con uno sfondo bianco.
2. Usa un testo che incuriosisca: inserisci le prime frasi del tuo articolo e aggiungi Scopri di più, per condurre il visitatore a una landing page.
3. Non usare le linee per suddividere le sezioni. Usa gli spazi bianchi.
4. Pensa minimale, e taglia i tuoi contenuti fino all’essenziale.

Se stai lavorando con BeeFree e vuoi aggiungere gli spazi vuoti, seleziona una sezione di testo e vai alla sezione Proprietà del modulo nella colonna di destra: quindi aumenti il Margine quanto credi sia meglio.

Vuoi uno sfondo bianco? Nessun problema. Clicca fuori dai blocchi dell’email, poi cambia il colore selezionando dal menù a tendina Sfondo in alto a sinistra.

Il carattere in negativo (per esempio, bianco su sfondo nero o colorato) è molto popolare tra i designer, ma è stato dimostrato che ostacola la lettura. Quella di David Oglivy è stata una delle prime voci che si sono espresse contro il carattere in negativo, perché – secondo lui – difficile da leggere. I risultati dello studio di Colin Wheildon (Type & Layout: How Typography and Design Can Get Your Message Across – or Get in the Way) gli hanno dato ragione. 

6) Il testo semplice, l’abito giusto per i tuoi contenuti

Fratello dello spazio bianco, il testo semplice e stringato rientra nel trend del design minimalista. Penso che sia stato il design sobrio di Google a lanciare i successivi trend minimalisti, anche se ce ne sono stati senz’altro di altri. Come lo spazio bianco, così anche il testo dallo stile semplice guadagna sempre maggior popolarità.

Ecco un esempio dalla newsletter di Belle Beth Cooper:

Con BeeFree un testo dallo stile semplice è facile da creare. Perché è di default nel nostro editor.

Questa email è fatta per la maggior parte con impostazioni di default di BeeFree. Tutto quello che ho fatto è stato aggiungere un’immagine e digitare un testo. Per usare BeeFree non è richiesta alcuna nozione di programmazione.

7) Il Design flat è di moda

Chiamatelo design flat o stile flat, la sostanza non cambia. Sul web regna incontrastato e così è pure nell’email marketing. In poche parole, significa assenza di ombre o di elementi a 3D su una pagina o nelle immagini presenti in un messaggio email. Elementi caratterizzanti il design flat sono l’assenza di ombreggiature, l’uso delle trasparenze e i font sans serif.

Ecco un esempio di design flat in un sito:

Un altro esempio di design flat in un messaggio email:

Altri esempi di design flat? Con BeeFree ne puoi creare tantissimi!

E con questo ultimo suggerimento, ora siete pronti per offrire ai vostri lettori contenuti in linea con gli ultimissimi trend. E non perdetevi nei prossimi mesi gli aggiornamenti in tema di design: se ne avete già, condivideteli qui!

Questo articolo è stato scritto da

Pam Neely

Ho un Master in Direct and Interactive Marketing ottenuto alla New York University. Nel corso degli anni ho costruito mailing list di migliaia di contatti esclusivamente da traffico organico, e una volta ho condotto un A/B test che ha aumentato il ricavo dell'azienda di un milione di dollari in un anno: è bastato il copy di un bottone per raddoppiare il tasso di conversione.