Un ghid pentru GIF-urile animate în e-mail

Publicat: 2021-02-24

În calitate de agent de marketing prin e-mail, încercați întotdeauna să vă îmbunătățiți campaniile prin utilizarea copiei, a designului și a imaginilor. Dar, având atâta concurență pentru atenția abonaților, nu este surprinzător că s-ar putea să vrei ceva care să te deosebească – să-i ademenească pe cititori să dea clic și să-i pese de mesajul tău. O modalitate de a face asta? GIF-uri animate.

Adăugarea de animație ar putea fi exact lucrul de care aveți nevoie pentru a crește implicarea abonaților. Agenții de marketing prin e-mail ca dvs. apelează din ce în ce mai mult la GIF-urile animate în e-mail pentru a oferi acest interes suplimentar. Conform datelor noastre privind starea e-mailului din 2020, 51,28% dintre agenții de marketing au spus că folosesc GIF-uri animate cel puțin uneori în e-mailurile lor de marketing.

Deci, cum poți intra în această acțiune? În această postare pe blog, vom acoperi:

Ce este un GIF
Beneficiile (cu exemple inspiratoare)
Dezavantajele GIF-urilor animate
Cum să faci GIF-uri animate
Asistență pentru clienți prin e-mail și timpii de încărcare

Ce este un GIF?

GIF, care înseamnă Graphics Interchange Format, este un format de imagine dezvoltat de CompuServe în 1987. Datorită suportului larg între browsere și clienți de e-mail, GIF-urile au fost un format de imagine popular încă de la începuturile internetului.

Mai important, totuși, GIF-urile pot fi animate. Similar cu modul în care funcționează un flipbook, GIF-urile afișează rapid o serie de imagini pentru a produce iluzia de mișcare. În primii ani ai internetului, GIF-urile (și marcajul și etichetele intermitente) erau metoda principală de a adăuga mișcare la o pagină web.

S-au schimbat multe din anii 1990. GIF-urile animate se bucură de o renaștere atât pe web, cât și în marketingul prin e-mail. Deși există încă o dezbatere cu privire la modul în care pronunțați de fapt „GIF”, majoritatea vor fi de acord că GIF-urile pot fi un instrument de marketing excelent.

Beneficiile GIF-urilor animate în e-mail

Indiferent dacă preferați un „G” dur sau doriți să rimeze GIF cu o anumită marcă de unt de arahide, să vedem de ce GIF-urile sunt atât de utile în e-mailuri.

Atrageți atenția abonaților dvs

Adăugarea de mișcare la e-mailul dvs. cu un GIF este o modalitate excelentă de a atrage atenția abonaților dvs., de a-i îndrepta către o acțiune pe care doriți să o întreprindă sau de a-i păstra derularea pentru a vă asigura că primesc întregul mesaj.

Google folosește un GIF drăguț pentru a-și celebra abonații.

GIF Google — Sursa: E-mailuri foarte bune

Grammarly folosește o animație subtilă pentru a atrage și mai multă atenție asupra ofertei lor.

GIF gramatical — Sursa: E-mailuri foarte bune

Xfinity își plasează GIF-ul mai jos în e-mail pentru a-și atrage abonații și pentru a-i încuraja să deruleze.

GIF Xfinity — Sursa: E-mailuri foarte bune

Am folosit un GIF video fals pentru a atrage atenția asupra videoclipului nostru și pentru a-i determina pe abonați să dea clic pentru a vedea mai multe.

Vacanta de turnesol — Vedeți e-mailul complet în acțiune

Prezintă-ți produsele și serviciile

Știi că produsul tău este grozav. Asigurați-vă că și abonații dvs. știu acest lucru. Nu există nimic ca un GIF animat pentru a arăta cum funcționează produsul sau serviciul tău.

ILIA Beauty își prezintă produsul în acțiune cu oameni reali.

Webflow își arată produsul în acțiune, astfel încât abonații să știe la ce să se aștepte.

GIF Webflow — Sursa: E-mailuri foarte bune

Magic Spoon își arată diferitele arome și designul minunat al ambalajului.

GIF lingură magică — Sursa: E-mailuri foarte bune

Simplificați o idee complexă

Dacă o imagine valorează cât o mie de cuvinte, atunci o imagine animată merită probabil și mai mult. Folosiți un GIF animat pentru a ilustra o idee complexă sau pentru a le arăta abonaților că lucrurile sunt chiar mai ușoare decât cred ei.

Baggu a dus instrucțiuni simple de curățare la nivelul următor prin animarea acestora. Făcând patru animații diferite, abonații trebuie să deruleze pentru a vedea întreaga poveste.

Baggu GIF — Sursa: E-mailuri foarte bune

Găsirea calmului sună simplu. Dar în ultimul an, ne-am dat seama cu toții cât de greu poate fi. Headspace vă arată cum să vă găsiți calmul cu un GIF mai bine decât ar putea explica oricine cu cuvinte.

GIF Headspace — Sursa: E-mailuri foarte bune

Tachinează ceva nou sau va veni în curând

Aveți conținut sau produs nou pe care urmează să îl lansați? Aveți o ofertă grozavă care apare în curând? Utilizați un GIF animat pentru a crea conștientizarea sau interesul pentru produsul dvs. și puneți abonații în atenție pentru următorul dvs. e-mail.

Apple tachinează o reducere extinsă de Vinerea Neagră și îndeamnă abonații să „păstreze datele” pentru cumpărături, astfel încât să nu piardă oferte.

Apple Black Friday Email GIF — Sursa: E-mailuri foarte bune

Bicicleta electrică a lui Linus este doar sugerată în umbră în acest e-mail. Abonații vor trebui să facă clic pentru a vedea produsul real.

E-mail Linus Electric cu GIF animat — Sursa: E-mailuri foarte bune

Tinker tachinează atât o reducere de Vinerea Neagră, cât și un ceas în ediție limitată cu acest GIF animat pentru a-i ține pe abonați să aștepte următorul e-mail cu mai multe informații.

Tinker Email GIF — Sursa: E-mailuri foarte bune

Dezavantajele GIF-urilor animate

Oricât de minunate sunt GIF-urile animate, nu sunt lipsite de defecte.

Lipsa accesibilității

GIF-urile animate pot reprezenta o problemă în ceea ce privește accesibilitatea din mai multe motive.

Ratele de clipire a conținutului între 2 Hz și 55 Hz pot dăuna utilizatorilor cu epilepsie fotosensibilă. În plus, utilizatorii cu deficiențe de vedere pot avea dificultăți în citirea sau revizuirea conținutului de pe un GIF înainte ca animația să se schimbe. Așadar, asigurați-vă că GIF-urile animate fie au tranziții fluide, fie nu se anime de la un cadru la altul la o rată ridicată.

Și, deoarece GIF-urile sunt fișiere imagine, ar trebui să includeți întotdeauna text alternativ adecvat pentru utilizatorii care se bazează pe tehnologie de asistență, cum ar fi cititoarele de ecran. Imaginile sunt în mod inerent inaccesibile pentru o mulțime de oameni, astfel încât furnizarea de copiere și context le permite să vă înțeleagă mesajul mai clar.

Ghidul suprem pentru accesibilitatea prin e-mail de la Litmus

Creați e-mailuri accesibile și incluzive pentru toți abonații dvs

Obțineți informațiile și sfaturile pas cu pas de care aveți nevoie pentru a scrie, proiecta și codifica e-mailuri care pot fi bucurate de oricine, indiferent de capacitatea lor.

Aflați cum →

Transparență slabă a fundalului

Dacă trebuie să aduceți mai multă culoare sau o anumită transparență de fundal conținutului animat, atunci un GIF animat poate să nu fie calea de urmat.

GIF-urile nu sunt grațioase când vine vorba de fundaluri transparente. Dar nu vă temeți, puteți aduce o alternativă animată la e-mail sub forma unui PNG animat (APNG). Asigurați-vă că țineți cont de aceleași sfaturi și trucuri de compresie pe care le împărtășim în continuare, deoarece APNG-urilor le place, de asemenea, să se adune pe kiloocteți (KB).

Și dacă sunteți în căutarea unei alte alternative la GIF-urile animate, poate doriți să explorați animațiile CSS.

Cum să faci un GIF animat pentru e-mail

Crearea GIF se poate face în mai multe moduri. Puteți folosi creatori online care vă permit să animați o selecție de fotografii sau să transformați un videoclip într-un GIF animat. Sau puteți utiliza software precum Adobe Photoshop sau Adobe Animate pentru a face mutarea designurilor personalizate.

Modul meu preferat de a crea GIF-uri animate este să lucrez în Adobe Animate. Acest lucru s-a născut din anii de lucru în Flash pe vremuri. Pe măsură ce Flash s-a retras, Adobe Animate a preluat controlul, păstrând unele dintre funcțiile Flash, aducând în același timp mai multe opțiuni de ieșire, cum ar fi HTML5, video și GIF animat.

Așa că voi descoperi cum să creez un GIF animat în Adobe Animate.

Crearea cu Adobe Animate

Pasul 1: creați un fișier nou și introduceți dimensiuni

Pentru a crea un GIF în Adobe Animate, creați mai întâi un fișier nou și introduceți dimensiunile pe care doriți să le fie. Sfat profesionist: creați-vă animația la o dimensiune de două ori mai mare pentru afișarea retinei, la fel cum ați face pentru imaginile statice.

Pasul 2: importați grafica care urmează să fie animată

Vă puteți proiecta animația direct pe pânză, folosind forma software-ului și instrumentele de desen, creând un strat pentru fiecare element. Dacă ați creat designul pentru animație în Adobe Illustrator, puteți pur și simplu să copiați și să lipiți grafica vectorială pe pânză. În caz contrar, puteți importa elemente grafice în Adobe Animate accesând fișier > import > import în scenă. Sau dacă importați o imagine care va fi reutilizată de mai multe ori, puteți „importa în bibliotecă”.

Pasul 3: Creați-vă animația

Acum puteți folosi cronologia pentru a vă crea animația. Există o mulțime de posibilități cu un astfel de software și ar fi greu să atingeți toate acestea într-o singură postare pe blog. Cu toate acestea, există o mulțime de resurse, cu multe ghiduri utile pe YouTube, în tutorialele online Adobe și în software-ul în sine.

Aș recomanda să acordați o atenție deosebită conținutului din jurul simbolurilor, interpolare și ușurință. Numai cu aceste trei funcții, puteți crea o animație extrem de captivantă, care vă ajută să atragă atenția, să vă împingă mesajul și să vă încânte publicul. Toate în timp ce aduceți găleți de personalitate de brand în e-mailurile dvs.

Simboluri

Un simbol este o imagine, un buton sau un clip video pe care îl creați o dată și apoi îl reutilizați selectându-l din bibliotecă.

Odată ce ați creat un simbol, îl puteți reutiliza în animația dvs. - aceasta se numește o instanță. Dacă ar fi să vă editați simbolul, cum ar fi schimbarea culorii, acea modificare s-ar face în toate cazurile (similar cu parțialele de e-mail). Dar dacă ar fi să editați o instanță, modificarea dvs. s-ar aplica numai acelei instanțe.

Pentru GIF-urile animate, vă sugerez să convertiți doar elementele de design în simboluri grafice. Atât clipurile de film, cât și butoanele au propria lor cronologie atașată, astfel încât să le puteți anima independent de cronologia principală. Cu toate acestea, deoarece animațiile create în afara cronologiei principale nu sunt onorate atunci când exportați animația ca GIF, este logic să rămâneți cu simboluri grafice care se anime numai pe cronologia principală.

Tweening

Tweening este modul în care animați de la o stare la alta. Puteți folosi fie formă, mișcare sau interpolare clasică.

O interpolare de formă poate fi utilizată numai cu forme sau elemente pe care le-ați desenat fie pe pânză, fie pe vectori importați folosind preferințele importatorului AI (mai degrabă decât ca bitmap). Acest lucru se datorează faptului că o interpolare de formă vă permite să modificați forma unui obiect. De exemplu: puteți adăuga un cerc la un cadru cheie din cronologia dvs., puteți adăuga un pătrat pe altul, apoi puteți transforma cercul în pătratul dvs. cu interpolarea formei.

exemplu animat de interpolare gif

Interpolarile de mișcare sunt folosite pentru a crea mișcări de animație prin specificarea unor valori diferite între primul și ultimul cadre. Cu acest tip de interpolare, puteți modifica proprietățile unui obiect, inclusiv poziția, dimensiunea, culoarea, efectele, filtrele și rotația.

Interpolarea clasică este foarte asemănătoare cu interpolarea în mișcare. A fost transferat din Flash și este păstrat în Animate ca opțiune suplimentară. Acesta este modul meu preferat de a aplica interpolarea mișcării, deoarece tehnicile de relaxare (discutate mai jos) sunt puțin mai simplu de aplicat.

Uşura

Ușurarea merge mână în mână cu tweening. Dacă mutarea unui obiect dintr-o poziție în alta folosind cronologia este tort, atunci ușurarea este glazura!

Folosind funcționalitatea de ușurință a lui Animate, puteți face ca interpolarea să accelereze sau să decelereze la început sau la sfârșit. Sau adăugați puțină săritură când se termină interpolarea. Acest lucru ajută cu adevărat să aducă ceva personalitate animației tale.

exemplu de gif animat de ușurință aplicată la interpolare

Ușurința aplicată acestei interpolari începe rapid animația și încetinește la sfârșit.

exemplu de gif animat de ușurință aplicată la interpolare cu bounce-in

Aici am aplicat o ușurință de respingere pentru interpolarea mea.

Pentru informații despre cum să aplicați relaxarea, vedeți acest videoclip pe YouTube.

Pasul 4: Exportați GIF-ul animat

Salvarea animației din Adobe Animate ca GIF este plăcută și simplă. Doar mergeți la Fișier > Export > Export GIF animat.

Menținerea dimensiunii fișierului dvs

Indiferent de modul în care vă creați GIF-ul animat, fie cu Adobe Animate, fie cu altceva, menținerea dimensiunii fișierului este crucială pentru e-mail. Există câteva lucruri care merită luate în considerare pentru a vă ajuta să vă păstrați animațiile cât mai ușoare posibil.

Comprimare

Instrumente precum Animate și Photoshop au opțiuni limitate de compresie pentru GIF-uri; de multe ori este mai bine să folosiți software extern pentru compresie. Recomand ImageOptim, care poate fi descărcat gratuit, sau EZgif, un instrument gratuit de optimizare GIF online, pentru a reduce dimensiunea fișierului la greutatea optimă. Personal, îmi place să-l păstrez sub 1 megaoctet (MB), dar dimensiunea optimă a fișierului va varia și depinde de timpul de încărcare a e-mailului, despre care vom discuta mai târziu în această postare de blog.

Culoare plată

Includerea fotografiilor sau a degradeurilor în animație adaugă greutate datorită cantității de culori și nuanțe pe care acestea le conțin. Un GIF poate conține doar 256 de culori – în comparație cu un JPEG care poate include până la 16 milioane – ceea ce duce adesea la o calitate foarte bună. Deci, este esențial să păstrezi lucrurile simple.

Rame limitate

Cu cât animația este mai scurtă, cu atât mai bine. Fiecare cadru pe care îl conține animația dvs. adaugă greutate GIF-ului. Întrucât o animație ar trebui să fie într-adevăr despre complimentarea copiei dvs., este logic să limitați durata de redare a animației și să încurajați cititorii să treacă pe e-mail.

Dacă descoperiți că GIF-ul dvs. are o greutate puțin prea mare după salvare și comprimare, puteți elimina cadrele folosind Photoshop sau EZgif.

Verificarea GIF-ului animat

Acum că ați completat GIF-ul, poate doriți să obțineți feedback sau aprobare înainte de a-l plasa în e-mailul dvs. Cu un instrument de colaborare în timp real precum Litmus Proof, puteți centraliza comentariile și aprobările tuturor.

GIF dovadă — *Informații prietenoase: acesta este disponibil numai în planurile Litmus Enterprise*

Implementarea GIF-urilor animate în e-mail

Odată ce aveți GIF-ul pregătit, îl puteți include în e-mail în același mod în care ați adăuga orice alt fișier imagine:

<img src="http://yourwebsite.com/path/to/awesome.gif" width="100" height="100" alt="Description of your gif”>

Cu toate acestea, există câteva lucruri unice pe care trebuie să le luați în considerare: ce clienți de e-mail acceptă GIF-uri animate și cât timp durează să se încarce în e-mailul dvs.

A sustine

GIF-urile animate sunt acceptate aproape peste tot. Outlook și-a actualizat recent suportul pentru GIF-uri animate, dar acest lucru afectează doar Office365. Outlook 2007-2019 încă nu acceptă GIF-uri animate.

Iată o diagramă rapidă a clienților de e-mail care acceptă și nu acceptă GIF-uri animate:

Clienți desktop	Clienți Webmail	Clienți de telefonie mobilă
Perspective 2000-2003 ✓	Gmail ✓	iOS Mail ✓
Outlook 2007-2019 ✘	G Suite ✓	Gmail ✓
Outlook pentru Mac ✓	Yahoo! Mail ✓	Gmail IMAP ✓
Apple Mail ✓	AOL ✓	Samsung Mail ✓
Windows 10 Mail ✓	Outlook.com ✓	Outlook ✓
Office365 ✓	Office365 ✓	Yahoo ✓
	Comcast ✓	AOL ✓
	Orange.fr ✓
	SFR.fr ✓
	GMX.de ✓
	Web.de ✓
	T-Online.de ✓
	Freenet.de ✓
	Mail.ru ✓

Pentru a menține o experiență grozavă în care GIF-urile animate nu sunt acceptate, asigurați-vă că primul cadru conține tot ce aveți nevoie ca alternativă statică.

De asemenea, puteți oferi o rezervă pentru Outlook prin ascunderea imaginii GIF obișnuite și afișând o imagine statică și/sau conținut diferit în cadrul condiționalelor Outlook:

<!--Animated Version for everywhere else-->
<!--[if (gte mso 9)|(IE)]><!-->
<img src="YourAnimatedFile.gif" style="display: block; padding:0; margin:0; height: auto; max-width: 100%;" border="0" alt="" width="538" height="269" />
<!--<![endif]-->

<!--Static Version for Outlook-->

<!--[if (gte mso 9)|(IE)]>
<img src="StaticVersion.gif" style="display: block; padding:0; margin:0; height: auto; max-width: 100%;" border="0" alt="" width="538" height="269" />
<![endif]-->

Timp de încărcare

Mai devreme, am discutat despre dimensiunile fișierelor. Timpul de încărcare este locul în care dimensiunea fișierului devine foarte importantă.

Puteți testa timpii de încărcare cu un instrument precum lista de verificare automată de testare pre-trimitere a Litmus pentru a vedea dacă imaginile dvs. durează prea mult să se încarce. În medie, am constatat că puțin peste jumătate dintre destinatari petrec doar mai puțin de două secunde pe un e-mail. Deci, GIF-urile animate trebuie să se încarce rapid pentru a face impresie.

Am testat diferite dimensiuni de fișiere pentru a găsi vitezele lor medii de încărcare pe diferite conexiuni. În medie, un GIF animat de 4,4 MB poate dura de două ori mai mult să se încarce printr-o conexiune 4G LTE decât printr-o conexiune Ethernet.

Iată câteva viteze medii pentru diferite dimensiuni de fișiere pe diferite conexiuni bazate pe propriul nostru experiment:

Viteza medie de descărcare a conținutului (în secunde)

Mărime fișier	4G LTE	Wifi	Ethernet
GIF de 180 kB	0,37	0,29	0,22
GIF de 1 MB	1.18	0,54	0,44
GIF de 3,2 MB	2,87	1.44	1.04
GIF de 4,4 MB	3.23	1,83	1.34

Acești timpi reprezintă viteza de descărcare a conținutului și nu iau în considerare timpul până la primul octet (TTFB). TTFB este o modalitate de a măsura capacitatea de răspuns a unui server web. Deci, dacă vă găzduiți imaginile pe un server care răspunde lent, timpii de încărcare pentru GIF-urile animate ar crește pentru abonații dvs.

Pe lângă timpii de încărcare mai lenți, GIF-urile animate cu dimensiuni mai mari de fișiere vor utiliza, de asemenea, datele mai repede, ceea ce probabil că abonații dvs. nu vor fi mulțumiți. Mi-am folosit datele doar testând vitezele de descărcare a fișierelor GIF pentru această postare de blog, așa că este foarte ușor de făcut. Permiteți abonaților să păstreze cât mai multe dintre datele lor pentru lucruri distractive, în loc să vă încarce e-mailul.

Deoarece nu aveți control asupra vitezei serverului, a conexiunii abonatului sau a planului de date al abonatului, devine extrem de important să vă asigurați că GIF-urile animate sunt suficient de mici pentru a vă asigura că publicul le poate vizualiza indiferent unde se află. deschiderea e-mailului dvs. Vă recomandăm cel mai mare 1MB.

Gânduri finale

GIF-urile animate au puterea de a încânta, uimi și captiva abonații dvs. de e-mail. Dar asigură-te că folosești GIF-urile cu înțelepciune! Abonații tăi ar trebui să rămână mereu în fruntea minții tale atunci când creează și implementează GIF-uri în e-mailurile tale. Nu animați doar pentru că puteți, gândiți-vă la modul în care va beneficia publicul.

Abia așteptăm să vedem ce creați!

Această postare pe blog a fost publicată inițial pe 9 ianuarie 2020 de Jason Rodriguez. A fost actualizat pentru claritate și cu informații noi pe 23 februarie 2021.