Ricevi aggiornamenti
su Messenger
7 min.

Facciamo chiarezza su cosa significa e come creare bottoni dal design bulletproof – ovvero “infrangibile” – per le campagne email: un requisito tecnico imprescindibile per salvaguardare i tassi di clic.  

Qual è, in fin dei conti, l’obiettivo dei marketer? Fare in modo che i destinatari interagiscano con l’email recapitata nella loro inbox.

È facile allora comprendere quanto sia importante l’email design, che deve saper unire stile a funzionalità, gli aspetti estetici a quelli tecnici. I primi tesi a catalizzare le attenzioni del destinatario, i secondi a consentire che l’interazione avvenga nel miglior modo possibile, senza ostacoli e discontinuità. Oggi metteremo da parte i temi di email design più dibattuti – mobile responsiveness, strutture modulari –, per soffermarci su un aspetto tanto importante quanto ancora poco frequentato: l’email design bulletproof.

Cosa significa design bulletproof?

Partiamo da alcune nozioni teoriche. Bulletproof, propriamente, significa antiproiettile o infrangibile, ed è un termine usato dai professionisti dell’email design per indicare un elemento grafico scritto in HTML, la cui visualizzazione non può quindi “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 ma di un elemento creato con codice HTML. Si tratta di un’ottimizzazione che consente di visualizzare l’elemento in ogni circostanza, su qualunque client di posta, anche i più problematici (come Outlook).

Il mondo bulletproof riguarda essenzialmente il bottone di call-to-action, il vertice dell’email, dove convergono tutti gli altri elementi del messaggio. Ma prima di entrare nel merito dei passaggi utili a ottimizzare la call to action, facciamo un rapido flashback per capire come si è arrivati all’esigenza di un design a prova di proiettile.

Per iniziare: come funziona il linguaggio HTML?

Le incerte sorti delle immagini nelle email

Soprattutto in passato, era frequente usare delle immagini come call-to-action. A causa del blocco delle immagini impostato in molti client di posta, questo genere di bottoni si è rivelato sempre più inadeguato e obsoleto.

Ecco un esempio di come una CTA sotto forma di immagine viene visualizzata in inbox con immagini attivate e disattivate. Nel secondo caso il risultato non è esattamente dei più brillanti.

Design bulletproof: un esempio di mancata visualizzazione della CTA in immagine

Insomma, se le tue CTA sono contenute all’interno di immagini, è pressoché certo che una parte dei tuoi destinatari non le visualizzino, a intero svantaggio dei tassi di clic.

Per questo gli email designer dovevano trovare una tecnica che fosse in grado di dare agli elementi dell’email un layout che fosse grafico e al tempo stesso che non si affidasse a un file immagine. Un modo che potesse ottimizzare, sempre e comunque, in qualsiasi inbox, un elemento fondamentale dell’Email Marketing, la soglia da cui transitano le conversioni.

L’approccio bulletproof

Si arrivò alla definizione del design bulletproof, che prevede la creazione del bottone tramite codice anziché immagini. In poche parole significa sostituire file GIF, PNG e JPEG con codice HTML e CSS.

Bulletproof: GIF, PNG, JPEG →  Codice HTML e CSS

Usando codice HTML e CSS, il bottone verrà visualizzato in tutti i client di posta elettronica,  anche con le immagini disattivate, rendendolo quindi “a prova di proiettile”. Non solo, perché puoi aggiornare il contenuto e lo stile della call to action semplicemente modificando il modello HTML. In poche parole, non è più necessario perdere tempo a creare pulsanti in Photoshop, caricarli su un server e aggiornare il codice HTML.

Ecco un esempio. Nell’immagine che segue, l’inbox di un iPhone, il caricamento delle immagini è stato disattivato. Grazie al design bulletproof la call to action dell’email in questione è perfettamente visualizzabile, campeggia e risalta con tutti suoi connotati (colore, estensione, padding).

Email design bulletproof: un esempio di CTA in HTML

Se è vero, come ci insegna Litmus, che esistono diversi approcci per codificare i bottoni bulletproof – VML-based, padding-based, border-based, padding+border based –, è altrettanto vero che questo design è a portata di mano anche per chi è a completo digiuno di codice.

Per creare elementi bulletproof non è necessario aggiungere stringhe di codice HTML. Basta affidarsi all’editor BEE integrato nella piattaforma MailUp e seguire questi 8 passaggi.

Come creare un bottone bulletproof con BEE

1. Inserisci il blocco di contenuto CTA nel corpo dell’email

Ti  basta trascinare e rilasciare in un punto dell’email il blocco di contenuto Bottone. Di default è azzurro e piuttosto basilare, ma interamente personalizzabile. Ecco come.

Design bulletproof con BEE

2. Cambia il colore di sfondo del bottone

Puoi scegliere dalla tavolozza o usare l’esadecimale della tua brand identity.

Design bulletproof: scegli lo sfondo del bottone
3. Modificare il testo

Puoi scrivere direttamente all’interno del bottone, controllando che non ecceda in lunghezza.

Scrivi il copy del bottone bulletproof

4. Imposta la larghezza

L’editor imposta una larghezza automatica, calibrata sul copy. Nel caso volessi ridefinirla, basta disattivare il pulsante Larghezza automatica e muoverti sul cursore.

Design bulletproof
5. Definisci il padding

Una funzione che ti permette di ispessire o snellire il bottone, aumentandone o restringendone i margini (superiore e inferiore).

Design bulletproof: aggiusta lo spessore dell'email

6. Definisci gli angoli

Puoi arrotondare gli angoli del bottone oppure mantenerne la spigolosità. A te la scelta.

Design bulletproof: che forma dare al bottone?

 

7. Definisci colore e spessore del bordo

Un’altra modifica che possiamo apportare riguarda il colore e la larghezza del bordo del bottone: puoi sbizzarrirti. 

CTA design bulletproof

8. Inserisci (ovviamente) il link

Inutile dirlo: non dimenticare di fornire la possibilità di cliccare!

Design bulletproof: il link!Best practice

Ora che abbiamo visto come ottimizzare la call to action per garantirne la visualizzazione in tutte le inbox, vediamo alcune best practice per migliorare il bottone da un punto di vista più estetico.

1. Trova l’equilibrio tra risalto e coerenza

Il design della call to action deve essere il risultato dell’equilibrio tra la capacità di risaltare e quella di armonizzare con il tono dominante dell’email. Un ottimo esempio ce lo offre un’email di Starbucks, capace di mantenere il tono verde dominante nel messaggio ma dando risalto alla CTA grazie a una forma più morbida, che segna la discontinuità con i volumi angolari presenti altrove.

Email design bulletproof: l'esempio di Starbucks

2. Rispetta la brand identity

I bottoni devono saper rispecchiare lo stile del brand, così da non generare un effetto di disorientamento nel destinatario. Potrebbe sembrare una sottigliezza, ma è una questione di percezione: nel cliente si deposita una certa immagine del brand, i cui dettagli (anche minimi) vengono colti e riconosciuti a ogni touchpoint.

Prendiamo il caso di un’email come quella di Mejuri, che nelle sue campagne è sempre attenta a conservare la brand identity, fatta di un alternarsi netto tra testi e immagini. Al di fuori delle foto, Mejuri non si serve di colori. Ecco che la call to action (superminimale) rimane sui toni del bianco e nero.

Email design bulletproof: Mejuri3. Trova l’equilibrio tra la parti

Le dimensioni non contano, o meglio, non esiste l’equivalenza per cui più è grande la call to action e maggiore sarà il tasso di clic. Dosa dunque le dimensioni senza deformare le proporzioni con pulsanti sovradimensionati.

4. Fai parlare la call to action

Chiudiamo con gli aspetti testuali. Il mantra è: niente call to action piatte, autoriferite. Se fortunatamente non si vedono più in giro copy come Clicca qui, è ancora frequente trovare i classicissimi Scopri di più, Esplora, Vai. Il testo della call to action, al contrario, deve saper parlare, comunicare, prefigurando la conseguenza (il vantaggio) del clic.

Maisons du Monde porta efficacemente all’interno dei bottoni le suggestioni legate ai prodotti offerti. L’email propone una linea di arredamento esotica? Il suggerimento è quello di partire in esplorazione del mondo.

CTA bulletproof

Le tue CTA sono bulletproof?

Se ancora non avessi dotato le tue email di bottoni di call to action bulletproof, è il momento di iniziare. Con MailUp, di fatto, non vi sono operazioni aggiuntive da compiere, perché l’editor BEE rende bulletproof, automaticamente, tutti i bottoni che crei per le tue campagne.

Se ancora non avessi provato MailUp e il suo email editor, puoi richiedere una prova gratuita della piattaforma. Avrai 30 giorni di tempo per sperimentarne le funzioni di creazione e invio.

La guida all'Email Design

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

Dolcetto o scherzetto? 9 idee per le newsletter di Halloween

Halloween si avvicina e la casella inbox è già piena di newsletter a tema. Qui trovi 9 idee per dare un irresistibile tocco dark alle ...

Continua a leggere

Riattiva i contatti dormienti del tuo e-commerce: la strategia in 5 step

Ti spieghiamo come recuperare clienti – dunque conversioni e vendite – del tuo store online. Alla scoperta delle strategie di Email Marketing dedicate alla riattivazione ...

Continua a leggere

Nessuno apre le tue email? Inizia a lavorare sul subject

L'Email Marketing resiste con successo da oltre due decenni. In effetti, sembra che l'Email Marketing sia più forte che mai, raggiungendo un ROI medio del ...

Continua a leggere

Cosa rende un’email davvero geniale? 7 fattori

Oggetto, focus, follow-up e altro ancora. Ecco 7 indirizzi operativi per creare email geniali, efficaci e incentrate sul cliente. Ogni volta che qualcosa di nuovo arriva ...

Continua a leggere

Come Iperal ha incrementato del 30% i clic nelle email

Abbiamo chiesto alla realtà della Grande distribuzione di raccontarci come ha raggiunto performance di Email Marketing nettamente superiori alla media di settore. Nel nostro blog spesso ...

Continua a leggere

Ci sono 5 ottimi motivi per inserire video nelle tue newsletter

Il formato video rappresenterà oltre l'80% del traffico web totale entro il 2019: se come motivazione non bastasse, ecco 5 ragioni per integrare il potenziale ...

Continua a leggere