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

7 consigli per le email di recupero carrello

Dalle tempistiche di invio alla personalizzazione dei contenuti, dall’inserimento delle recensioni al divieto di accorciare le URL: vediamo i requisiti formali e tecnici per la ...

Continua a leggere

Tecniche e strategie di profilazione: il nuovo ebook di MailUp

Ti presentiamo il nuovo volume della nostra libreria. Un percorso in 4 tappe per imparare a raccogliere i dati, personalizzare le email in base al ...

Continua a leggere

Le emoji nelle email: modi d’uso e best practice per inserirle nell’oggetto

Dalle emoji per brandizzare a quelle evocative. Scopriamo il potenziale di questi piccoli quanto efficaci elementi grafici, in grado di donare espressività e immediatezza alle ...

Continua a leggere

Come personalizzare l’email: campi, immagini e contenuti dinamici

Oltre alla segmentazione e all’automation, esiste un set di tecniche e strumenti per inviare messaggi in linea con le caratteristiche del singolo contatto. Scopriamo le ...

Continua a leggere

15 ispirazioni di palette colore primaverili

La primavera è ormai giunta (per fortuna!) e la casella inbox si è riempita di messaggi email a tema. L'elemento chiave della stagione? Il colore. Le ...

Continua a leggere

5 tattiche per aumentare il tasso di conversione delle email

Dalle micro-conversioni ai requisiti per una call to action efficace. Approfondiamo le caratteristiche del conversion rate, o tasso di conversione, l'indicatore di Email Marketing più ...

Continua a leggere