Animowany baner w stopce mailowej: co wyświetla każdy klient poczty

Animacja przyciąga wzrok, a właśnie tego oczekujemy od banera. W e-mailu nie zachowuje się jednak tak jak w internecie: w zależności od klienta poczty odbiorcy Twój GIF się animuje albo zatrzymuje się na jednej klatce.

Co wyświetla każdy klient poczty

Wyjątkiem jest więc Outlook dla Windows w starszych wersjach, który wyświetla pierwszą klatkę bez odtwarzania reszty. Ten klient wciąż jest bardzo popularny w firmach, co wystarczy, by narzucić zasadę projektowania – ogólny trend opisujemy w artykule co się zmienia w nowym Outlooku.

Zasada, dzięki której animacja jest bezpieczna

Mieści się w jednym zdaniu: najważniejszy komunikat musi znaleźć się na pierwszej klatce.

Animacja staje się wtedy dodatkiem dla tych, którzy ją widzą, a jej brak nikogo nie pozbawia informacji. W praktyce pierwsza klatka musi samodzielnie zawierać tytuł, element identyfikujący nadawcę i wezwanie do działania.

Czego nie robić: budować sekwencji, w której komunikat odsłania się stopniowo – jedno słowo na klatkę albo hasło, które ma sens dopiero po trzech sekundach. U części odbiorców baner pokaże tylko niezrozumiały fragment.

Dobrze wiedzieć: najprostszy test to wyeksportowanie samej pierwszej klatki i obejrzenie jej. Jeśli jest zrozumiała sama w sobie, Twoja animacja jest bezpieczna. Jeśli nie – popraw montaż.

Ograniczenie wagi

Animowany GIF waży tyle, ile suma jego klatek. Przy limicie 150 KB dla banera o szerokości 600 px mieścisz w praktyce cztery–pięć klatek, nie więcej.

Trzy sposoby pozwalają zmieścić się w tym budżecie. Ogranicz liczbę klatek, stawiając na wyraźne przejścia zamiast płynnych, które mnożą klatki pośrednie. Ogranicz paletę barw – GIF i tak jest ograniczony do 256 kolorów. I animuj tylko część powierzchni, zostawiając nieruchome tło: kolejne klatki przechowują wtedy wyłącznie zmieniający się obszar.

Łączny budżet wagi podpisu omawiamy w artykule baner w podpisie e-mail: formaty i waga.

Ile powtórzeń

Trzy opcje, każda o innym efekcie.

Jedno odtworzenie. Animacja odtwarza się i zatrzymuje na ostatniej klatce. To najbezpieczniejszy wybór: uwaga zostaje przyciągnięta raz, a potem baner pozostaje stabilny. Zadbaj wtedy, aby ostatnia klatka również zawierała komunikat, bo to ona zostanie na ekranie.

Dwa–trzy powtórzenia. Popularny kompromis, który daje drugą szansę odbiorcy patrzącemu akurat gdzie indziej.

Pętla nieskończona. Lepiej jej unikać. Baner, który bez przerwy miga pod każdą wiadomością w wątku, szybko zaczyna irytować i nadaje reklamowy ton, niepasujący do profesjonalnej korespondencji.

Co nie działa w ogóle

Wideo. Klienci poczty nie obsługują znaczników wideo. Powszechną praktyką jest statyczny obraz przypominający wideo – z narysowanym przyciskiem odtwarzania – prowadzący do strony, na której jest ono udostępnione.

Animacje CSS. Nie przetrwają czyszczenia kodu HTML przez pocztę w przeglądarce ani silnika renderującego Outlooka. Zobacz podpis e-mail w HTML.

Animowany SVG. Nie jest wyświetlany, a czasem bywa blokowany ze względów bezpieczeństwa.

GIF pozostaje więc jedynym użytecznym formatem animacji – ze wszystkimi swoimi ograniczeniami.

Czy w ogóle animować

To pytanie warto zadać, zamiast rozstrzygać je z zasady. Animacja przyciąga wzrok, ale zwiększa wagę, komplikuje produkcję i narzuca ograniczenie pierwszej klatki.

Uzasadniona jest przy komunikacie, który naprawdę zyskuje na sekwencji: odliczaniu do wydarzenia, kolejnych trzech logotypach partnerów, odsłonięciu liczby. Nie ma uzasadnienia przy komunikacie, który mieści się w jednym zdaniu – czyli w większości kampanii opisanych w artykule 12 pomysłów na kampanie.

W razie wątpliwości dobrze zaprojektowany statyczny baner z wyraźnym kontrastem i czytelnym wezwaniem do działania zwykle sprawdza się równie dobrze przy jednej dziesiątej wysiłku. Możesz też to porównać: śledzenie wyników kampanii opisane w artykule pomiar ROI pozwala przetestować wersję animowaną z wersją statyczną w dwóch porównywalnych okresach.