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.
  • 15

Nello scorso post abbiamo analizzato quali sono le best practice per inserire GIF animate email. Oggi ci spostiamo sul pratico, costruendo un messaggio con GIF animata nell’editor BEE.¬†

Le GIF animate costituiscono una presenza sempre pi√Ļ frequente nelle nostre caselle email,¬†ma non sempre vengono utilizzate nel modo corretto. Eppure basta poco: seguendo le linee guida che trovi qui di seguito avrai la certezza di inserire GIF animate nelle email¬†in modo sicuro e ottimizzato per mobile, minimizzando i problemi di visualizzazione che potrebbero derivarne.

Inserire GIF animate nelle email

L’ironia vuole che, per quanto spesso mal utilizzate, le GIF animate siano in realt√† abbastanza semplici da usare nei messaggi: possono essere trattate come qualsiasi file di immagine e sono ben supportate dalla maggior parte dei client di posta elettronica. Tuttavia, in molti casi sorge¬†un problema non da poco: la call-to-action si trova spesso all’interno della GIF, come in questa mail di Ann Taylor.

GIFs in Email: Ann Taylor Example

L’icona della call-to-action “GO” non √® un pulsante vero e proprio, ma fa parte dell’immagine. Cliccando sopra, sotto o in un qualsiasi punto intorno al “pulsante” il risultato √® praticamente lo stesso: si viene reindirizzati a una landing page sul sito di Ann Taylor, dal momento che¬†ogni frame della GIF linkato.

Ci√≤ consente ai lettori di ottenere ulteriori informazioni (e magari completare un acquisto) toccando o cliccando su un punto qualsiasi. Questo sistema, tuttavia, pu√≤ risultare problematico. Se per un qualsiasi motivo la GIF animata non viene visualizzata, l’email perde completamente di significato. Questo succede se…

  • Il dispositivo mobile dell’utente visualizza un’immagine distorta
  • L’opzione di visualizzazione dell’immagine del client di posta elettronica √® disattivata
  • La GIF √® bloccata da un software di ad-blocking
  • La GIF √® un file di grandi dimensioni e il lettore non ne attende il caricamento completo

Inoltre, gli utenti di Outlook vedranno probabilmente solo un’immagine statica perch√© l’animazione non partir√†. Per queste ed altre ragioni consigliamo sempre di adottare un approccio di design che ottimizzi il codice HTML e non si basi esclusivamente sulle immagini. Vuoi sapere come utilizzare le tue magnifiche GIF animate nei messaggi, assicurandoti al contempo che le tue call-to-action vengano sempre visualizzate? Continua a leggere.

Inserire GIF animate nelle email: il tutorial di oggi

Oggi ricreeremo la seguente email di Banana Republic, spiegando come inserire GIF animate nelle email per essere sicuri di far apparire i tuoi contenuti. Ecco il riassunto nel nostro video tutorial (in inglese):

Ed ecco qui l’email di Banana Republic per intero, come riferimento:

GIFs in Email: Banana Republic Example

Nell’email di Banana Republic, il messaggio principale – con tanto di¬†call-to-action – √® incluso in un unico blocco immagine, come nell’email di Ann Taylor di cui sopra. Il corpo dell’email – tutta la parte in nero – √® interamente costituito da una GIF animata:

banana

Ci√≤ vuol dire che, se l’opzione di visualizzazione delle immagini √® disattivata, la GIF √® bloccata o semplicemente non riesce a caricarsi, e l’intero messaggio va perso.

Vediamo come risolvere la situazione.

Step 1: isolare la GIF animata

La GIF animata contenuta in questa email √® piuttosto grande. Perci√≤, anche se viene visualizzata nella casella del lettore, potrebbe non caricarsi completamente, con il risultato che l’email non viene letta. Un’ottima soluzione per evitare questi problemi √® ritagliare la GIF animata, eliminando le parti dell’immagine che non hanno bisogno di animazione.

Nel caso dell’email di Banana Republic ci√≤ equivale a isolare la parte centrale dell’immagine, quella effettivamente in movimento ed evidenziata nel riquadro rosa sottostante, ricreando la sezione rimanente con stringhe di testo e codice HTML.

bp markup

Il ritaglio è stato effettuato utilizzando ezGIF.com. Ecco la nostra nuova GIF animata:

ezgif.com-crop

Step¬†2: impostare il layout dell’email con blocchi di contenuto

Oggi iniziamo con un template elementare a colonna unica nell’editor BEE.

GOOD_1use

La struttura predefinita dei blocchi di contenuto √® molto simile a quello che fa al caso nostro: un testo seguito da un’immagine, a cui segue un’altra stringa di testo e infine un pulsante call-to-action.

bee structure

Non c’√® bisogno di apportare modifiche alla struttura dato che i blocchi di contenuto di cui abbiamo bisogno sono gi√† presenti, per cui iniziamo a inserire il testo facendo attenzione ad allineare tutto al centro. Cancelliamo anche i blocchi di contenuto che non ci servono, come ad esempio il riquadro dei sottotitoli in alto.

text only

Successivamente, possiamo inserire la nostra GIF ritagliata e inserirla nel riquadro preposto, proprio come faremmo con un’immagine normale.

structure with gif

Ora che il nostro contenuto si trova in posizione, possiamo procedere con la formattazione.

Step 3: definire il colore di sfondo in HTML

A partire dal blocco contenuti “SWEET TREAT”, assegniamo al carattere il colore bianco e ne aumentiamo le dimensioni fino a 36 px.¬†Proseguiamo rendendo nero lo sfondo del corpo del messaggio, proprio come nel caso della GIF all’interno dell’email di Banana Republic.

Per farlo possiamo semplicemente regolare i colori dello sfondo selezionando le Proprietà riga nel menu a destra, rendendo trasparente lo sfondo delle righe e assegnando il colore nero al background dei contenuti.

sweet treat

Applichiamo le stesse impostazioni alle Proprietà riga per tutti i blocchi di contenuto a seguire, compreso il colore dello sfondo dietro la nostra GIF animata.

banana snip

Il risultato è un blocco di colore unico, senza soluzione di continuità. Concludiamo formattando il resto del testo.

almost there

Dobbiamo apportare alcune modifiche finali per ottenere una corretta spaziatura complessiva e aggiornare il nostro pulsante CTA, ma la nostra email sembra gi√† quasi identica a quella di Banana Republic, con l’unica differenza che abbiamo utilizzato caratteri compatibili con i messaggi di posta elettronica e colori di sfondo HTML.

Il nostro messaggio √® diventato incredibilmente pulito, e in pi√Ļ abbiamo ridotto il rischio che la GIF non compaia. √ą comunque possibile visualizzare i colori, il testo e, cosa pi√Ļ importante, il pulsante call-to-action.

Step 4: includere un bottone bulletproof per la call-to-action

Attenzione, spoiler: non dobbiamo scrivere nemmeno una riga di codice HTML n√© di fare altre azioni per essere sicuri che il nostro pulsante call-to-action “FIND OUT” funzioni in tutti i dispositivi e client di posta elettronica. Nell’editor BEE, tutti i pulsanti sono progettati per essere bulletproof, ovvero non basati su immagini, in modo tale da poter essere sempre visualizzati¬†in modo corretto su tutti i device e in tutte le circostanze.

Tutto quello che dobbiamo fare √® aggiornare lo stile alla voce Propriet√† contenuto¬†nel men√Ļ a destra. Per prima cosa, rendiamo bianco il colore dello sfondo del pulsante e cambiamo quello del carattere assegnando il nero.

button menu

Il bottone verrà visualizzato così:

button 1

Poi formattiamo il testo, aumentando le dimensioni del carattere e attivando il grassetto. Una volta aumentate le dimensioni, la CTA appare su due righe:

button2

Ora, tornando alla voce “Propriet√† dei contenuti” possiamo aumentare la larghezza al 35%:

button3

Dal momento che il pulsante di Banana Republic ha gli angoli acuti, per la nostra icona optiamo per un aspetto meno rotondeggiante. Per cambiare la forma del pulsante diminuiremo il raggio del bordo fino a 0.

border radius

Ecco la nostra email! Ci siamo quasi.

button done

Step 5: Rifinitura finale e regolazione della spaziatura

Il testo e il pulsante CTA in fondo sono troppo vicini. Per dare respiro al messaggio possiamo regolare il margine interno al di sopra e al di sotto di ciascuna struttura di contenuti.

Clicca semplicemente su una struttura qualsiasi (pulsante, testo, immagine), vai sul menu Proprietà contenuto e assicurati che siano visibili Altre opzioni nella sezione relativa al Padding alla voce Spaziatura:

padding

Abbiamo regolato il margine interno al di sopra e al di sotto del pulsante e del blocco dei contenuti “Solo online”.

Ecco l’email finale:

finalfinal

Ed ecco l’anteprima su dispositivo mobile.¬†Perfetta!

final on mobile

Abbiamo ricreato l’email di Banana Republic in maniera praticamente identica ‚Äď con il suo design moderno e patinato e utilizzando una GIF simile ‚Äď ma allo stesso tempo abbiamo ottimizzato i colori¬†HTML dello sfondo e dei pulsanti call-to-action, cos√¨ da assicurare che la nostra email verr√† sicuramente visualizzata in modo perfetto¬†su tutti i dispositivi mobili e i client di posta elettronica.

Se hai domande, faccelo sapere nei commenti qui sotto. E non dimenticare di provare l’editor¬†BEE di MailUp!

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

Email & Automation per il Retail: il white paper dedicato ai negozi

Ti presentiamo il nuovo contenuto verticale ritagliato sulle esigenze (presenti e future) degli store fisici: un percorso formativo tra strumenti e spunti strategici per portare ...

Continua a leggere

4 errori fatali nella gestione delle immagini (e come risolverli)

Le email sono come iceberg: spesso concentriamo tutte le energie nel creare gli elementi principali (come CTA, testi, oggetto, qualità delle immagini) e dimentichiamo di ...

Continua a leggere

Tutorial: come personalizzare le immagini delle email per ciascun utente

Personalizzare le comunicazioni, oggi, significa anche utilizzare contenuti dinamici. Basta dare un occhio alla propria casella inbox per rendersi conto di quanti messaggi riceviamo ogni ...

Continua a leggere

Gmail taglia i messaggi? 4 modi per evitarlo

Progettare una campagna via email perfetta è impegnativo: bisogna curare molti elementi, dal contenuto visivo al testo, fino all’oggetto e all’invito ad agire. Nel corso della meticolosa ...

Continua a leggere

HTML e CSS: guida introduttiva

Non serve essere programmatori per creare email che funzionino... ma qualche nozione aiuta. Oggi entriamo nell'universo di HTML e CSS, svelandone le caratteristiche base per ...

Continua a leggere

“Compra ora” o “Scopri di pi√Ļ”? Come fare A/B test sulla call-to-action

I bottoni sono da sempre usati dall’uomo per interagire con il mondo fisico. Nella vita di tutti i giorni schiacciamo bottoni per accendere il pc, ...

Continua a leggere