Una guida alle GIF animate nelle e-mail

Come e-mail marketer, cerchi sempre di migliorare le tue campagne attraverso l'uso di testi, design e immagini. Ma con così tanta concorrenza per l'attenzione degli abbonati, non sorprende che tu voglia qualcosa che ti distingua, invogliando i lettori a fare clic e a interessarsi al tuo messaggio. Un modo per farlo? GIF animate.

L'aggiunta di animazioni potrebbe essere proprio la cosa di cui hai bisogno per aumentare il coinvolgimento degli iscritti. Gli e-mail marketer come te si rivolgono sempre più alle GIF animate nelle e-mail per fornire quell'interesse in più. Secondo i nostri dati sullo stato delle e-mail del 2020, il 51,28% dei marketer ha affermato di utilizzare GIF animate almeno a volte nelle proprie e-mail di marketing.

Quindi, come puoi partecipare a questa azione? In questo post del blog, tratteremo:

• Che cos'è una GIF
• I vantaggi (con esempi stimolanti)
• Gli svantaggi delle GIF animate
• Come creare GIF animate
• Assistenza client di posta elettronica e tempi di caricamento

Che cos'è una GIF?

GIF, che sta per Graphics Interchange Format, è un formato di immagine sviluppato da CompuServe nel 1987. Grazie all'ampio supporto tra browser e client di posta elettronica, le GIF sono state un formato di immagine popolare sin dai primi giorni di Internet.

Ancora più importante, però, le GIF possono essere animate. Simile a come funziona un flipbook, le GIF mostrano rapidamente una serie di immagini per produrre l'illusione del movimento. Nei primi anni di Internet, le GIF (e i tag marquee e blink) erano il metodo principale per aggiungere movimento a una pagina web.

Molto è cambiato dagli anni '90. Le GIF animate stanno vivendo una rinascita sia sul web che nell'email marketing. Mentre c'è ancora qualche dibattito su come si pronuncia effettivamente "GIF", la maggior parte sarà d'accordo sul fatto che le GIF possono essere un eccellente strumento di marketing.

I vantaggi delle GIF animate nelle e-mail

Sia che tu preferisca una "G" dura o ti piaccia far rima GIF con una certa marca di burro di arachidi, diamo un'occhiata al motivo per cui le GIF sono così utili nelle e-mail.

Aggiungere movimento alla tua email con una GIF è un ottimo modo per attirare l'attenzione dei tuoi iscritti, indirizzarli verso un'azione che vuoi che intraprendano o farli scorrere per assicurarti che ricevano l'intero messaggio.

Google utilizza una GIF carina per celebrare i propri abbonati.

Grammarly utilizza un'animazione sottile per attirare ancora più attenzione sulla loro offerta.

Xfinity inserisce la propria GIF più in basso nell'e-mail per attirare i propri iscritti e incoraggiarli a scorrere.

Abbiamo utilizzato una finta GIF video per attirare l'attenzione sul nostro video e attirare l'interesse degli abbonati a fare clic per vedere di più.

Metti in mostra i tuoi prodotti e servizi

Sai che il tuo prodotto è fantastico. Assicurati che anche i tuoi iscritti lo sappiano. Non c'è niente come una GIF animata per mostrare come funziona il tuo prodotto o servizio.

ILIA Beauty mette in mostra il loro prodotto in azione con persone reali.

Webflow mostra il loro prodotto in azione in modo che gli abbonati sappiano cosa aspettarsi.

Magic Spoon mette in mostra i loro diversi gusti e il fantastico design della confezione.

Semplifica un'idea complessa

Se un'immagine vale più di mille parole, probabilmente un'immagine animata vale ancora di più. Usa una GIF animata per illustrare un'idea complessa o mostrare ai tuoi abbonati che le cose sono ancora più semplici di quanto pensino.

Baggu ha portato le semplici istruzioni di pulizia al livello successivo animandole. Realizzando quattro diverse animazioni, gli abbonati devono scorrere per vedere l'intera storia.

Trovare la tua calma sembra semplice. Ma nell'ultimo anno, ci siamo tutti resi conto di quanto possa essere difficile. Headspace ti mostra come trovare la calma con una GIF meglio di quanto chiunque possa spiegare con le parole.

Stuzzica qualcosa di nuovo o in arrivo

Hai qualche nuovo contenuto o prodotto che stai per rilasciare? Hai una grande offerta in uscita a breve? Usa una GIF animata per creare consapevolezza o interesse per il tuo prodotto e fare in modo che gli abbonati stiano attenti alla tua prossima email.

Apple prende in giro una vendita estesa del Black Friday e esorta gli abbonati a "salvare le date" per lo shopping in modo da non perdere le offerte.

La bici elettrica di Linus è appena accennata nell'ombra in questa e-mail. Gli abbonati dovranno fare clic per vedere il prodotto reale.

Tinker prende in giro sia una vendita del Black Friday che un orologio in edizione limitata con questa GIF animata per mantenere gli abbonati in attesa della prossima e-mail con ulteriori informazioni.

Gli svantaggi delle GIF animate

Per quanto meravigliose siano le GIF animate, non sono prive di difetti.

Mancanza di accessibilità

Le GIF animate possono rappresentare un problema in termini di accessibilità per una serie di motivi.

Le frequenze di lampeggiamento dei contenuti tra 2 Hz e 55 Hz possono danneggiare gli utenti con epilessia fotosensibile. Inoltre, gli utenti con problemi di vista potrebbero avere difficoltà a leggere o rivedere il contenuto di una GIF prima che l'animazione cambi. Quindi, assicurati che le tue GIF animate abbiano transizioni fluide o non si animino da un fotogramma all'altro a una velocità elevata.

E, poiché le GIF sono file di immagine, dovresti sempre includere testo alternativo appropriato per gli utenti che si affidano a tecnologie di assistenza come gli screen reader. Le immagini sono intrinsecamente inaccessibili per molte persone, quindi fornire copia e contesto consente loro di comprendere il tuo messaggio in modo più chiaro.

Crea email accessibili e inclusive per tutti i tuoi iscritti Ottieni le informazioni dettagliate e i consigli passo passo necessari per scrivere, progettare e codificare le email che possono essere apprezzate da chiunque, indipendentemente dalle proprie capacità. Scopri come →

Scarsa trasparenza dello sfondo

Se hai bisogno di portare più colore o un po' di trasparenza dello sfondo al tuo contenuto animato, una GIF animata potrebbe non essere la strada da percorrere.

Le GIF non sono aggraziate quando si tratta di sfondi trasparenti. Ma non temere, puoi portare un'alternativa animata all'e-mail sotto forma di PNG animato (APNG). Assicurati di prendere nota degli stessi suggerimenti e trucchi per le compressioni che condividiamo in seguito poiché anche agli APNG piace accumularsi sui kilobyte (KB).

E se stai cercando un'altra alternativa alle GIF animate, potresti voler esplorare le animazioni CSS.

Come creare una GIF animata per e-mail

La creazione di GIF può essere eseguita in diversi modi. Puoi utilizzare i creatori online che ti consentono di animare una selezione di foto o trasformare un video in una GIF animata. Oppure puoi utilizzare software come Adobe Photoshop o Adobe Animate per far muovere i progetti personalizzati.

Il mio modo preferito per creare GIF animate è lavorare con Adobe Animate. Questo è nato da anni di lavoro in Flash nel corso della giornata. Quando Flash è stato ritirato, Adobe Animate ha preso il sopravvento, mantenendo alcune delle funzionalità di Flash e introducendo più opzioni di output come HTML5, video e GIF animate.

Quindi mi immergerò in come creare una GIF animata in Adobe Animate.

Creare con Adobe Animate

Passaggio 1: crea un nuovo file e inserisci le dimensioni

Per creare una GIF in Adobe Animate, crea prima un nuovo file e inserisci le dimensioni che desideri. Suggerimento per professionisti: crea la tua animazione al doppio delle dimensioni per il display retina, proprio come faresti per le immagini statiche.

Passaggio 2: importa la grafica da animare

Puoi progettare la tua animazione direttamente sulla tela, utilizzando gli strumenti di forma e disegno del software, creando un livello per ogni elemento. Se hai creato il design per la tua animazione in Adobe Illustrator, puoi semplicemente copiare e incollare la tua grafica vettoriale sulla tela. Altrimenti, puoi importare la grafica in Adobe Animate andando su file> importa> importa nello stage. Oppure, se stai importando un elemento grafico che verrà riutilizzato più volte, puoi "importare nella libreria".

Passaggio 3: crea la tua animazione

Ora puoi utilizzare la timeline per creare la tua animazione. Ci sono molte possibilità con software come questo, e sarebbe difficile toccarle tutte in un singolo post sul blog. Tuttavia, sono disponibili numerose risorse con molte guide utili su YouTube, nei tutorial online di Adobe e all'interno del software stesso.

Consiglierei di prestare particolare attenzione ai contenuti relativi a simboli, interpolazioni e facilità. Con queste tre funzioni da sole, puoi creare animazioni altamente coinvolgenti che aiutano ad attirare l'attenzione, spingere il tuo messaggio e deliziare il tuo pubblico. Il tutto portando secchi di personalità del marchio alle tue e-mail.

Simboli

Un simbolo è un elemento grafico, un pulsante o un clip filmato che crei una volta e poi riutilizzi selezionandolo dalla libreria.

Una volta creato un simbolo, puoi riutilizzarlo all'interno della tua animazione: questa si chiama istanza. Se dovessi modificare il tuo simbolo, ad esempio cambiare il colore, tale modifica verrebbe effettuata su tutte le istanze (simile ai parziali di posta elettronica). Ma se dovessi modificare un'istanza, la tua modifica si applicherebbe solo a quell'istanza.

Per le GIF animate, suggerisco di convertire solo i tuoi elementi di design in simboli grafici. Sia i clip filmato che i pulsanti hanno la propria timeline collegata, quindi puoi animarli indipendentemente dalla timeline principale. Tuttavia, poiché qualsiasi animazione creata al di fuori della timeline principale non viene rispettata quando esporti l'animazione come GIF, ha senso attenersi a simboli grafici che si animano solo sulla timeline principale.

interpolazione

Il tweening è il modo in cui ti animi da uno stato all'altro. È possibile utilizzare interpolazioni di forma, movimento o classiche.

Un'interpolazione di forma può essere utilizzata solo con forme o elementi su cui hai disegnato sull'area di disegno o vettori importati utilizzando le preferenze dell'importatore AI (piuttosto che come bitmap). Questo perché un'interpolazione di forma consente di modificare la forma di un oggetto. Ad esempio: puoi aggiungere un cerchio a un fotogramma chiave sulla timeline, aggiungere un quadrato su un altro, quindi trasformare il tuo cerchio nel tuo quadrato con l'interpolazione di forma.

Le interpolazioni di movimento vengono utilizzate per creare movimenti di animazione specificando valori diversi tra il primo e l'ultimo fotogramma. Con questo tipo di interpolazione, puoi modificare le proprietà di un oggetto, inclusi posizione, dimensione, colore, effetti, filtri e rotazione.

L'interpolazione classica è molto simile all'interpolazione di movimento. È stato trasferito da Flash e viene mantenuto in Animate come opzione aggiuntiva. Questo è il mio modo preferito per applicare l'interpolazione di movimento, poiché le tecniche di allentamento (discusse di seguito) sono un po' più semplici da applicare.

Sollievo

L'allentamento va di pari passo con il tweening. Se spostare un oggetto da una posizione all'altra usando la timeline è la torta, allora l'allentamento è la glassa!

Utilizzando la funzionalità di facilità di Animate, potete far accelerare o decelerare l'interpolazione all'inizio o alla fine. Oppure aggiungi un po' di rimbalzo quando l'interpolazione è completata. Questo aiuta davvero a dare un po' di personalità alla tua animazione.

La facilità applicata a questa interpolazione avvia l'animazione rapidamente e rallenta alla fine.

Qui ho applicato una facilità di rimbalzo alla mia interpolazione.

Per informazioni su come applicare l'allentamento, guarda questo video su YouTube.

Passaggio 4: esporta la tua GIF animata

Salvare la tua animazione da Adobe Animate come GIF è piacevole e semplice. Basta andare su File> Esporta> Esporta GIF animata.

Mantenere le dimensioni del file ridotte

Indipendentemente da come crei la tua GIF animata, con Adobe Animate o con qualcos'altro, mantenere le dimensioni del file ridotte è fondamentale per l'e-mail. Ci sono alcune cose che vale la pena considerare per aiutarti a mantenere le tue animazioni il più leggere possibile.

Compressione

Strumenti come Animate e Photoshop hanno opzioni di compressione limitate per le GIF; spesso è meglio usare un software esterno invece per la compressione. Raccomando ImageOptim, che è scaricabile gratuitamente, o EZgif, uno strumento di ottimizzazione GIF online gratuito, per ridurre le dimensioni del file al peso ottimale. Personalmente, mi piace mantenere il mio al di sotto di 1 megabyte (MB), ma la dimensione ottimale del file varierà e dipenderà dal tempo di caricamento della posta elettronica di cui parleremo più avanti in questo post del blog.

Colore piatto

Includere fotografie o sfumature nell'animazione aggiunge peso a causa della quantità di colori e sfumature che contengono. Una GIF può contenere solo 256 colori, rispetto a un JPEG che può includere fino a 16 milioni, il che spesso si traduce in un calo della qualità. Quindi mantenere le cose semplici è la chiave.

Fotogrammi limitati

Più breve è l'animazione, meglio è. Ogni fotogramma contenuto nella tua animazione aggiunge peso alla GIF. Dal momento che un'animazione dovrebbe davvero essere un complimento per la tua copia, ha senso limitare la durata della riproduzione dell'animazione e incoraggiare i lettori a spostare l'e-mail.

Se ti accorgi che la tua GIF ha un peso eccessivo dopo averla salvata e compressa, puoi rimuovere i fotogrammi utilizzando Photoshop o EZgif.

Prova la tua GIF animata

Ora che hai completato la tua GIF, potresti voler ottenere un feedback o un'approvazione prima di inserirla nella tua email. Con uno strumento di collaborazione in tempo reale come Litmus Proof, puoi centralizzare i commenti e le approvazioni di tutti.

Implementazione di GIF animate nelle e-mail

Una volta che hai la tua GIF pronta, puoi includerla nella tua email più o meno nello stesso modo in cui aggiungeresti qualsiasi altro file immagine: