Cosa vuol dire design «bulletproof»?
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.
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.
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).
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.
2. Cambia il colore di sfondo del bottone
Puoi scegliere dalla tavolozza o usare l’esadecimale della tua brand identity.
3. Modificare il testo
Puoi scrivere direttamente all’interno del bottone, controllando che non ecceda in lunghezza.
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.
5. Definisci il padding
Una funzione che ti permette di ispessire o snellire il bottone, aumentandone o restringendone i margini (superiore e inferiore).
6. Definisci gli angoli
Puoi arrotondare gli angoli del bottone oppure mantenerne la spigolosità. A te la scelta.
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.
8. Inserisci (ovviamente) il link
Inutile dirlo: non dimenticare di fornire la possibilità di cliccare!
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.
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.
3. 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.
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.