Dobře navržený GIF v newsletteru skvěle přitáhne pozornost k produktu, akci či tlačítku, a přesto řada animací v e-mailových kampaních nefunguje. Část příjemců animaci vůbec neuvidí, protože jejich poštovní program zobrazí jen první snímek. Jiní ji zahlédnou jen na okamžik, než sjedou o kus níž. Jak tedy navrhnout první snímek, jak dlouhá má být smyčka a kam umístit výzvu k akci, aby GIF fungoval v pohybu i jako statický obrázek?
Proč počítat se statickou verzí
Některé poštovní programy animace nepřehrávají. Mezi nimi jsou třeba starší desktopové verze Outlooku pro Windows, které z GIFu zobrazí jen první snímek. Statickou verzi uvidí i čtenáři, kteří mají v systému omezené animace, a ti, kdo e-mail otevřou v náhledu s vypnutými obrázky a načtou je až později.
Animace, která celé sdělení odhalí až v posledním snímku, tak u části publika selže. Řešení je jednoduché: navrhněte GIF od konce, tedy od statického obrázku, který musí obstát sám o sobě.
6 pravidel pro GIF, který funguje vždy
1. První snímek nese celé sdělení
Na první snímek patří název akce, produkt a cena, případně hlavní benefit. Prázdná úvodní scéna či postupně se objevující text jsou tudíž chybou. Čtenář s nepřehrávanou animací by viděl jen prázdný obdélník.
Ověřte si to jednoduše. Vyexportujte první snímek jako samostatný obrázek a zeptejte se, jestli by obstál v newsletteru i bez pohybu. Pokud ne, přeskupte snímky.
2. Pohyb jen tam, kde má smysl
Animace by měla zvýraznit jednu věc, třeba produkt z několika úhlů, odpočet do konce akce či jemné pulzování tlačítka. Pokud se hýbe celý obrázek, oko neví, kam se dívat.
Menší pohyblivá plocha navíc znamená menší soubor. Statické části obrazu se mezi snímky opakují a komprese je zapíše úsporně.
Plynulost nezávisí jen na počtu snímků. Pro jednoduchý pohyb tlačítka či prolínání dvou produktových fotek stačí několik snímků s delší prodlevou. Desítky snímků využívejte spíš u ukázky produktu v akci, kde by trhaný pohyb působil rušivě.
3. Krátká smyčka s jasným koncem
Ideální délka jedné smyčky je několik sekund. Pro přístupnost platí doporučení, aby se animace zastavila do pěti sekund, jinak ji musí jít pozastavit. Jak délku spočítat z počtu snímků, rychlosti a opakování, popisuje tato technika zastavení animovaného GIFu do pěti sekund z pravidel přístupnosti WCAG.
Nastavte proto omezený počet opakování a jako poslední snímek zvolte stejný obraz jako první. Animace se tak zastaví na verzi, která nese hlavní sdělení.
4. Výzva k akci mimo animaci
Tlačítko s výzvou k akci nevkládejte jen do GIFu. Umístěte ho pod obrázek jako skutečné tlačítko v kódu e-mailu. Zobrazí se i při vypnutých obrázcích, dobře se na něj klikne na mobilu a čtečky obrazovky ho přečtou. Pár tipů k tvorbě atraktivnějších výzev k akci přináší třeba tento článek.
Samotný GIF pak propojte se stejným cílem jako tlačítko. Čtenář, který klikne na obrázek, se tak dostane na stejnou stránku.
5. Výstižný alternativní text
Alternativní text se zobrazí místo obrázku, dokud se nenačte či pokud má příjemce obrázky vypnuté. Napište do něj stručně hlavní sdělení, například „Zimní bundy se slevou 30 % do neděle“. Popis typu „animace“ nikomu nepomůže.
6. Rozumná velikost souboru
GIF se stahuje celý ještě předtím, než se začne přehrávat. Na mobilních datech se těžká animace načítá dlouho a čtenář mezitím odscroluje. Držte proto velikost souboru v řádu stovek kilobajtů, ideálně co nejníž.
Velikost ovlivňuje také šířka. Newsletter se obvykle zobrazuje v šíři kolem 600 pixelů, a proto nemá smysl vkládat animaci v plném rozlišení obrazovky. Pro ostré zobrazení na displejích s vysokou hustotou pixelů stačí dvojnásobná šířka, kterou v kódu e-mailu zmenšíte na skutečný rozměr.
Kromě rozměrů pomůže snížit počet barev a vypustit zbytečné snímky. Chcete-li vědět, jak velikost animace snížit bez viditelné ztráty kvality, podívejte se zde.
Kdy místo GIFu zvolit statický obrázek
Pro logo, ilustraci či fotografii bez pohybu je lepší volbou statický obrázek, který bude menší a zobrazí se všude stejně. U grafiky s ostrými hranami a průhledností se hodí formát PNG. Tipy, jak jeho velikost udržet nízko, najdete v tomto článku na téma komprimace PNG.
Animaci si nechte pro situace, kdy pohyb skutečně něco vysvětlí, například ukáže produkt v akci, odpočítává čas do konce slevy či upozorní na tlačítko.
Pozor na tmavý režim
Řada čtenářů má v telefonu zapnutý tmavý režim, ve kterém poštovní program změní barvu pozadí zprávy. GIF podporuje jen jednoduchou průhlednost, kdy je pixel buď zcela viditelný, nebo zcela průhledný. Okraje textu a log s průhledným pozadím pak na tmavém podkladu získají světlý lem, který působí neupraveně.
Bezpečnější je dát animaci vlastní plné pozadí v barvě newsletteru. Obrázek pak vypadá stejně ve světlém i tmavém zobrazení a zachová si čitelnost.
Jak GIF otestovat před odesláním
Pošlete si testovací e-mail do několika schránek, ideálně ve webovém prohlížeči, v telefonu i v desktopovém programu. Zkontrolujte, jak vypadá první snímek, jestli se animace zastaví na správném obrázku a jak rychle se načte na mobilních datech.
Prohlédněte si zprávu také s vypnutými obrázky. Pokud i v této podobě čtenář pochopí, o co jde, a najde tlačítko, newsletter je připravený k odeslání.
Animace může obstát i bez pohybu
GIF v newsletteru plní svou roli tehdy, když sdělení zvládne předat i jako statický obrázek. Silný první snímek, krátká smyčka s jasným koncem a tlačítko mimo animaci se dohromady postarají o to, že kampaň bude fungovat u všech příjemců.
Při přípravě příští kampaně začněte návrhem posledního snímku a teprve potom přidávejte pohyb. Takto navržená animace osloví čtenáře v každém poštovním programu.
