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
11 min.
  • 38

Il bottone di call-to-action è la chiave per portare il lettore a compiere l’azione desiderata nell’email. In questo tutorial pratico impariamo a progettare una CTA bulletproof, per una visualizzazione ottimale e performance migliori.

CTA bulletproof: cosa sono?

Nel post di oggi andremo ad analizzare dal punto di vista grafico un elemento chiave di un’email particolarmente riuscita di Skillcrush: il bottone di call-to-action (CTA) bulletproof. Ma prima di iniziare, che cosa significa bulletproof? Bulletproof è il termine usato dai professionisti dell’email design per indicare un pulsante call-to-action scritto in HTML che viene visualizzato e funziona correttamente in qualsiasi casella di posta. Dal momento che si tratta di un codice HTML e non di un’immagine, il pulsante viene caricato e visualizzato in ogni circostanza.

Ora che sappiamo cos’è un pulsante bulletproof, vogliamo scoprire come si crea. È proprio qui che si può incontrare qualche difficoltà. Ci sono due possibilità: puoi trasformare un pulsante CTA standard in bulletproof aggiungendo delle stringhe di codice HTML, oppure creare il pulsante tramite un editor – come il nostro BEE – che assicuri anche a chi non mastica HTML di poterne creare in poche mosse uno altrettanto performante. Ed è proprio questo che faremo oggi.

Come si presenta una CTA bulletproof

Diamo subito uno sguardo al pulsante bulletproof dell’email Skillcrush. Per avere un riferimento, questa è l’email completa:

CTA bulletproof email Skillcrush

Ed ecco un primo piano sul pulsante di call-to-action da loro creato, originale ed efficace:

CTA Skillcrush

Una ventata di novità rispetto al tipico pulsante azzurro per la registrazione ai webinar che siamo abituati a vedere, come questo:

CTA blu

Da sottolineare come Skillcrush sia in grado di adottare soluzioni grafiche intelligenti per il pulsante call-to-action, che a sua volta rispecchia lo stile del brand, essendo moderno, femminile e gradevole:

  • Il pulsante è rosa per essere in linea con il brand, con un testo bianco brillante
  • Occupa l’intero spazio dell’email in larghezza e non presenta un bordo “ingombrante”, riuscendo a dare così una sensazione di leggerezza e modernità
  • “Claim your spot”, con l’uso del pronome personale “tuo”, ha un tono amichevole e disponibile, invitando allo stesso tempo i lettori a compiere un’azione

Ma la caratteristica grafica forse più importante del pulsante CTA è quella di essere bulletproof, ovvero scritto in HTML e non caricato come immagine: in questo modo può essere correttamente visualizzato in qualsiasi casella di posta. Come possiamo vedere, il pulsante viene visualizzato anche se le immagini su iPhone sono disattivate:

Visualizzazione da iPhone con immagini disattivate

Passiamo adesso alla pratica e vediamo come realizzare il nostro pulsante bulletproof personale, ricreando come esempio il pulsante call-to-action di Skillcrush. Utilizzeremo l’editor BEE di MailUp.

Per iniziare: video tutorial

Per una rapida panoramica, ecco il nostro video tutorial su come ricreare il pulsante CTA bulletproof dell’email Skillcrush con l’editor BEE. Il video è stato realizzato dal team MailUp nella Silicon Valley ed è pertanto in inglese.

 

Creare una CTA bulletproof con l’editor BEE

Scopriamo adesso nel dettaglio come creare in pochi passaggi un pulsante call-to-action efficace e originale con l’editor BEE, regolando larghezza, margine interno, colore, stile del testo, raggio e colore del bordo in base alle proprie preferenze.

CTA bulletproof

Per iniziare abbiamo dedicato qualche minuto alla ricostruzione della parte superiore dell’email di Skillcrush, inserendo all’interno di un template base a colonna singola l’immagine dell’intestazione e il contenuto introduttivo. Ora creiamo il nostro pulsante!

Prendiamo un blocco di contenuto del pulsante nel menu Struttura in alto a destra e lo trasciniamo semplicemente nel corpo dell’email.

CTA bulletproof

Noterai adesso che il pulsante di default è blu, di forma rettangolare e centrato sulla pagina:

Adesso possiamo personalizzarlo in mille modi! Per ricreare il pulsante di Skillcrush, dobbiamo:

  • Cambiare il colore dello sfondo
  • Modificare il testo e lo stile
  • Aumentare la larghezza e regolare il margine interno
  • Inserire un link

Nel corpo della nostra email dobbiamo fare clic sulla struttura del pulsante per attivarlo, quindi possiamo procedere con le regolazioni tramite il menu Contenuto sulla destra.

1. Colore del bottone

In primo luogo impostiamo il colore del pulsante sul rosa (#F16059 in formato esadecimale), come il pulsante di Skillcrush.

Quindi modifichiamo il testo. Durante la digitazione, il pulsante si allarga automaticamente per adattarsi al contenuto:

Possiamo lasciare il colore, il tipo di font e la dimensione di default (rispettivamente bianco #ffffff, Arial e 16 px), ma in questo caso impostiamo il nostro messaggio in grassetto (assicurandoci di digitare tutto in maiuscolo).

2. Bottone a tutta larghezza

Impostare il pulsante a tutta larghezza rispetto al corpo dell’email è semplice. Tornando al menu Proprietà contenuto, sotto Opzioni bottone, disattiviamo l’opzione Larghezza automaticaregoliamo il cursore della larghezza verso destra fino a 100%. Dal punto di vista grafico, la larghezza è un elemento chiave: rispecchia l’intestazione Skillcrush nella parte superiore del messaggio, donando una sensazione di equilibrio esteticamente gradevole, inoltre offre più spazio per fare clic agli utenti che utilizzano dispositivi mobili.

Larghezza CTA

3. Ritocchi finali

Impostiamo alla voce Padding contenuto un margine interno di 5 px sia in alto che in basso.

Padding CTA

Ricordiamo anche di inserire un link nel bottone: a tal proposito scorriamo nello stesso menu Proprietà contenuto fino alla sezione Azione e incolliamo l’url di destinazione.

Link CTA

Ora, abbiamo un pulsante CTA bulletproof completamente funzionale e identico a quello dell’email di Skillcrush! È stato facile, vero?

Se desideri personalizzare ulteriormente il pulsante call-to-action, qui trovi le altre impostazioni grafiche del bottone disponibili nell’editor BEE.

4. Angoli arrotondati

Puoi arrotondare gli angoli per cambiare la forma del pulsante. Dal punto di vista grafico, gli elementi rettangolari indicano generalmente fedeltà ai modelli tradizionali, praticità ed equilibrio, mentre gli elementi circolari danno un senso di maggiore armonia, essendo percepiti come più soft.

Angoli arrotondati CTA

Ecco una versione arrotondata del nostro pulsante call-to-action dopo aver regolato il raggio a 25 px:

Bottone con raggio 25px

5. Margine interno

Possiamo anche aumentare (o diminuire) le dimensioni del pulsante in altezza: assicurati che il pulsante “Altre opzioni” sia attivo nella sezione Padding contenuto e aumenta il margine interno superiore e inferiore.

Ed ecco il nostro pulsante con un margine interno superiore e inferiore di 20 px.

6. Bordi

Un’altra modifica che possiamo apportare riguarda il colore e la larghezza del bordo del bottone, che si trova nella sezione Proprietà contenuto dell’editor BEE. Qui possiamo regolare nei minimi dettagli il bordo del pulsante.

Bordi CTA

Il classico pulsante “Registrati ora” che abbiamo visto in precedenza non presentava alcuna linea di contorno. Nel menu Impostazioni bordo dell’editor BEE possiamo sbizzarrirci con colori e spessori diversi.

Un bordo sottile e leggero aggiunge profondità:

CTA con bordo leggero

Un bordo leggermente più spesso e scuro è più evidente, ma ha un effetto simile:

CTA con bordo scuro

Il passaggio a un colore completamente diverso in genere smorza l’effetto di leggerezza e modernità dato dal pulsante:

CTA con bordo a contrasto

Ma il bordo può anche essere utile a mantenere un aspetto semplice, leggero e moderno togliendo il colore di sfondo, come in questo caso:

CTA con fondo bianco e contorno colorato

Come puoi vedere, potremmo trascorrere l’intera giornata a personalizzare un pulsante call-to-action nell’editor BEE!

In conclusione

Se stai creando la tua email e desideri personalizzare il bottone di call-to-action, tieni a mente quanto segue:

  • I pulsanti devono rispecchiare lo stile del brand. Skillcrush fa un ottimo lavoro per dimostrare come un pulsante ben progettato possa fare la differenza: essendo in linea con lo stile del marchio, puoi entrare in sintonia con il tuo pubblico. Gioca con i colori e gli stili per ottenere un aspetto che corrisponda alla tua brand identity e allo stesso tempo rispecchi il tuo stile grafico. Il pulsante deve attirare l’attenzione (deve essere chiaro che si tratta di un pulsante call-to-action), ma non essere troppo appariscente.
  • Regola le dimensioni del pulsante in modo equilibrato. Le dimensioni non sono sempre direttamente proporzionali all’efficacia. Non mettere a disagio i tuoi lettori dando eccessivo risalto alla richiesta. Trova un equilibrio rendendo il pulsante più largo se non è troppo alto, o leggermente più alto se non è troppo largo. Ricorda, gli utenti di dispositivi mobili o tablet devono essere facilitati dovendo fare clic con un tocco, quindi lascia sufficiente spazio vuoto intorno al pulsante.
  • Non dimenticare il contenuto! Ormai slogan call-to-action come “Registrati”, “Scopri di più”, “Iscriviti” e simili sono abusati. Pensa a un modo per personalizzare creativamente il tuo messaggio, che possa riflettere allo stesso tempo il tono del brand. Assicurati di utilizzare un verbo di azione chiaro e diretto. Sii conciso! Prova a usare pronomi personali come “mio” e “tuo”, in modo da rendere il messaggio amichevole e coinvolgente. Puoi provare con: “Prenota il tuo posto” o “Scarica il tuo biglietto gratuito.”
  • Il posizionamento è fondamentale. Una ricerca ha dimostrato che inserire un pulsante call-to-action nella cosiddetta area “below the fold”, ovvero quella visibile solo scorrendo la pagina, aumenta il numero di clic del 304%! Lascia che i lettori scoprano prima a cosa si stanno iscrivendo, quindi invitali all’azione. Skillcrush fa esattamente questo, inserendo il pulsante CTA alla fine.
  • Agisci secondo il principio “bulletproof”. Più di ogni altra cosa, è fondamentale che il pulsante abbia un aspetto coinvolgente e funzionale, a prescindere dal dispositivo o dalla casella di posta in cui viene visualizzato. Usa sempre il linguaggio HTML al posto delle immagini. Abbiamo già visto che nell’editor BEE tutti i pulsanti sono bulletproof, così non dovrai mai preoccuparti di come rendere tecnicamente possibile la visualizzazione!

Adesso una domanda: i tuoi pulsanti call-to-action sono bulletproof? Cosa ne pensi dei nostri suggerimenti grafici per la creazione dei pulsanti? Condividi le tue idee e opinioni nei commenti qui sotto!

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

E-commerce & Automation: incrementare le conversioni recuperando i carrelli

Su 100 potenziali clienti, 69 mettono da parte i prodotti e accantonano l’idea di acquistarli. Ecco come fare remarketing grazie alle email, tra automation e ...

Continua a leggere

Sicurezza e automation per il Banking & Finance, in un nuovo white paper

Ti presentiamo il nuovo contenuto verticale interamente dedicato alle strategie digitali di banche e società finanziarie: un percorso di apprendimento tra analisi di settore, best practice ...

Continua a leggere

Email di Pasqua: 4 idee a cui non avevi pensato

Siamo abituati a pensare a Pasqua come a una festività minore, dal punto di vista commerciale, rispetto a Natale o a San Valentino. Sicuramente in Italia ...

Continua a leggere

Email di buon compleanno: il modo più semplice per quadruplicare i tassi di conversione

Una delle tipologie di email automatiche più frequenti, più semplici e più efficaci è l'email di buon compleanno. In questo blog post scopriamo come strutturarla, ...

Continua a leggere

SMTP: che cos’è e come può aiutare la tua strategia di Email Marketing

Da semplice protocollo a server integrabile in qualsiasi sistema esterno, per inviare email transazionali personalizzate e con elevati tassi di recapito. Scopri l’evoluzione dell’SMTP in ...

Continua a leggere

Controllo Deliverability: miglioriamo la consapevolezza e l’impiego dell’autenticazione delle email

Sei davvero chi dici di essere? Non posso verificarlo. Quindi sposto la tua email nella cartella spam. Ecco cosa succede a molte campagne email. Questo è uno dei ...

Continua a leggere