Przewodnik po animowanych plikach GIF w wiadomościach e-mail
Opublikowany: 2021-02-24Jako specjalista ds. marketingu e-mailowego zawsze starasz się ulepszyć swoje kampanie za pomocą kopii, projektu i obrazów. Ale przy tak dużej konkurencji o uwagę subskrybentów nic dziwnego, że możesz chcieć czegoś, co Cię wyróżnia — zachęcając czytelników do klikania i dbania o Twoją wiadomość. Jeden sposób na zrobienie tego? Animowane GIF-y.
Dodanie animacji może być właśnie tym, czego potrzebujesz, aby zwiększyć zaangażowanie subskrybentów. Marketingowcy e-mailowi, tacy jak Ty, coraz częściej sięgają po animowane pliki GIF w wiadomościach e-mail, aby zapewnić dodatkowe zainteresowanie. Według naszych danych o stanie poczty e-mail z 2020 r. 51,28% marketerów twierdzi, że przynajmniej czasami używa animowanych GIF-ów w swoich marketingowych wiadomościach e-mail.
Jak więc możesz wziąć udział w tej akcji? W tym poście na blogu omówimy:
- Czym jest GIF
- Korzyści (z inspirującymi przykładami)
- Wady animowanych GIF-ów
- Jak tworzyć animowane GIF-y
- Obsługa klienta poczty e-mail i czasy ładowania
Co to jest GIF?
GIF, co oznacza Graphics Interchange Format, to format obrazu opracowany przez firmę CompuServe w 1987 roku. Ze względu na szerokie wsparcie w przeglądarkach i klientach poczty e-mail, GIF są popularnym formatem obrazów od początków Internetu.
Co ważniejsze, GIF-y można animować. Podobnie jak w przypadku flipbooka, GIF-y szybko wyświetlają serię obrazów, tworząc iluzję ruchu. We wczesnych latach Internetu GIF-y (oraz znaczniki markizy i migające) były główną metodą dodawania ruchu do strony internetowej.
Od lat 90. wiele się zmieniło. Animowane GIF-y przeżywają renesans zarówno w sieci, jak i w e-mail marketingu. Chociaż wciąż trwa debata na temat tego, jak wymawiasz „GIF”, większość zgodzi się, że GIF-y mogą być doskonałym narzędziem marketingowym.
Korzyści płynące z animowanych GIF-ów w wiadomościach e-mail
Niezależnie od tego, czy wolisz twarde „G”, czy lubisz rymować GIF z określoną marką masła orzechowego, przyjrzyjmy się, dlaczego GIF-y są tak przydatne w e-mailach.
Przyciągnij uwagę subskrybentów
Dodanie ruchu do wiadomości e-mail za pomocą GIF-a to świetny sposób na przyciągnięcie uwagi subskrybentów, skierowanie ich na działanie, które chcesz, aby wykonali, lub przewinięcie ich, aby upewnić się, że otrzymają całą wiadomość.
Google używa uroczego GIF-a, aby uczcić swoich subskrybentów.
Grammarly wykorzystuje subtelną animację, aby jeszcze bardziej zwrócić uwagę na swoją ofertę.
Xfinity umieszcza swój GIF w wiadomości e-mail, aby przyciągnąć subskrybentów i zachęcić ich do przewijania.
Użyliśmy fałszywego GIF-a wideo, aby zwrócić uwagę na nasz film i zainteresować subskrybentów kliknięciem, aby zobaczyć więcej.
Pochwal się swoimi produktami i usługami
Wiesz, że Twój produkt jest świetny. Upewnij się, że Twoi subskrybenci też o tym wiedzą. Nie ma nic lepszego niż animowany GIF, aby pokazać, jak działa Twój produkt lub usługa.
ILIA Beauty prezentuje swój produkt w akcji z prawdziwymi ludźmi.
Webflow pokazuje swój produkt w akcji, dzięki czemu subskrybenci wiedzą, czego mogą się spodziewać.
Magic Spoon prezentuje ich różne smaki i niesamowity design opakowania.
Uprość złożony pomysł
Jeśli obraz jest wart tysiąca słów, to animowany obraz jest prawdopodobnie wart jeszcze więcej. Użyj animowanego GIF-a, aby zilustrować złożony pomysł lub pokazać subskrybentom, że sprawy są jeszcze łatwiejsze, niż im się wydaje.
Baggu przeniósł proste wskazówki dotyczące sprzątania na wyższy poziom, animując je. Tworząc cztery różne animacje, subskrybenci muszą przewinąć, aby zobaczyć całą historię.
Znalezienie spokoju brzmi proste. Ale w ciągu ostatniego roku wszyscy zdaliśmy sobie sprawę, jakie to może być trudne. Headspace pokazuje, jak znaleźć spokój z GIF-em lepiej, niż ktokolwiek mógłby wyjaśnić słowami.
Drażnij coś nowego lub wkrótce
Czy masz jakąś nową zawartość lub produkt, który zamierzasz wydać? Czy wkrótce pojawi się świetna oferta? Użyj animowanego GIF-a, aby wzbudzić zainteresowanie Twoim produktem lub wzbudzić jego zainteresowanie — i niech subskrybenci będą szukać Twojej następnej wiadomości e-mail.
Apple dokucza przedłużonej wyprzedaży w Czarny piątek i zachęca subskrybentów do „zapisywania dat” na zakupy, aby nie przegapić okazji.
Rower elektryczny Linusa jest właśnie wspomniany w cieniu tego e-maila. Abonenci będą musieli kliknąć, aby zobaczyć rzeczywisty produkt.
Tinker zapowiada zarówno wyprzedaż w Czarny piątek, jak i zegarek z limitowanej edycji z tym animowanym GIF-em, aby subskrybenci wypatrywali kolejnego e-maila z dodatkowymi informacjami.
Wady animowanych GIF-ów
Choć animowane GIF-y są wspaniałe, nie są pozbawione wad.
Brak dostępności
Animowane pliki GIF mogą stanowić problem pod względem dostępności z różnych powodów.
Częstotliwość migania treści w zakresie od 2 Hz do 55 Hz może zaszkodzić użytkownikom z epilepsją światłoczułą. Ponadto użytkownicy niedowidzący mogą mieć trudności z czytaniem lub przeglądaniem zawartości GIF, zanim animacja się zmieni. Upewnij się więc, że animowane pliki GIF mają płynne przejścia lub nie są animowane z jednej klatki do drugiej z dużą szybkością.
A ponieważ pliki GIF są plikami graficznymi, zawsze należy dołączyć odpowiedni tekst alternatywny dla użytkowników korzystających z technologii wspomagających, takich jak czytniki ekranu. Obrazy są z natury niedostępne dla wielu osób, więc dostarczenie kopii i kontekstu pozwala im lepiej zrozumieć Twój przekaz.
 | Twórz dostępne, integracyjne e-maile dla wszystkich swoich subskrybentów Uzyskaj szczegółowe informacje i porady, których potrzebujesz, aby pisać, projektować i kodować wiadomości e-mail, z których może korzystać każdy — niezależnie od jego umiejętności. Dowiedz się, jak → |
Słaba przezroczystość tła
Jeśli chcesz dodać więcej kolorów lub trochę przezroczystości tła do animowanych treści, animowany GIF może nie być dobrym rozwiązaniem.
GIF-y nie są wdzięczne, jeśli chodzi o przezroczyste tła. Ale nie obawiaj się, możesz przynieść animowaną alternatywę dla wiadomości e-mail w postaci animowanego PNG (APNG). Pamiętaj, aby zapoznać się z tymi samymi wskazówkami i sztuczkami dotyczącymi kompresji, które dzielimy w następnej kolejności, ponieważ APNG również lubi gromadzić kilobajty (KB).
A jeśli szukasz kolejnej alternatywy dla animowanych GIF-ów, możesz chcieć poznać animacje CSS.
Jak zrobić animowany GIF na e-mail
Tworzenie GIF-ów można wykonać na wiele sposobów. Możesz użyć kreatorów internetowych, które umożliwiają animację wybranych zdjęć lub przekształcenie wideo w animowany GIF. Możesz też użyć oprogramowania, takiego jak Adobe Photoshop lub Adobe Animate, aby przenieść niestandardowe projekty.
Mój preferowany sposób tworzenia animowanych GIF-ów to praca w programie Adobe Animate. Wynika to z lat pracy we Flashu w tamtych czasach. Gdy Flash przeszedł na emeryturę, Adobe Animate przejął kontrolę, zachowując niektóre funkcje Flasha, jednocześnie wprowadzając więcej opcji wyjściowych, takich jak HTML5, wideo i animowany GIF.
Zajmę się więc tworzeniem animowanego GIF-a w programie Adobe Animate.
Tworzenie w programie Adobe Animate
Krok 1: Utwórz nowy plik i wprowadź wymiary
Aby utworzyć GIF w programie Adobe Animate, najpierw utwórz nowy plik i wprowadź żądane wymiary. Wskazówka dla profesjonalistów: stwórz animację w rozmiarze dwukrotnie większym na wyświetlaczu siatkówki, tak jak w przypadku obrazów statycznych.
Krok 2: Importuj grafikę do animacji
Możesz zaprojektować animację bezpośrednio na płótnie, korzystając z narzędzi do rysowania i kształtów oprogramowania, tworząc warstwę dla każdego elementu. Jeśli stworzyłeś projekt animacji w programie Adobe Illustrator, możesz po prostu skopiować i wkleić grafikę wektorową na płótnie. W przeciwnym razie możesz zaimportować grafikę do programu Adobe Animate, przechodząc do pliku > importuj > importuj na scenę. A jeśli importujesz grafikę, która będzie wielokrotnie używana, możesz „zaimportować do biblioteki”.
Krok 3: Stwórz swoją animację
Teraz możesz użyć osi czasu, aby stworzyć swoją animację. Z takim oprogramowaniem istnieje wiele możliwości i trudno byłoby omówić je wszystkie w jednym poście na blogu. Istnieje jednak wiele zasobów z wieloma pomocnymi przewodnikami na YouTube, w samouczkach online Adobe oraz w samym oprogramowaniu.
Zalecam zwrócenie szczególnej uwagi na treści wokół symboli, animacji i łatwości. Tylko dzięki tym trzem funkcjom możesz stworzyć bardzo wciągającą animację, która pomoże przyciągnąć uwagę, przekazać wiadomość i zachwycić odbiorców. A wszystko to wnosząc do Twoich e-maili wiadra osobowości marki.
Symbolika
Symbol to grafika, przycisk lub klip filmowy, który tworzysz raz, a następnie wykorzystujesz ponownie, wybierając go z biblioteki.
Po utworzeniu symbolu możesz go ponownie użyć w swojej animacji — nazywa się to instancją. Jeśli miałbyś edytować swój symbol, na przykład zmienić kolor, ta zmiana zostałaby wprowadzona we wszystkich instancjach (podobnie do częściowych wiadomości e-mail). Ale jeśli miałbyś edytować instancję, twoja zmiana miałaby zastosowanie tylko do tej jednej instancji.
W przypadku animowanych GIF-ów sugeruję jedynie konwersję elementów projektu na symbole graficzne. Zarówno klipy filmowe, jak i przyciski mają dołączoną własną oś czasu, dzięki czemu można je animować niezależnie od głównej osi czasu. Ponieważ jednak animacje utworzone poza główną osią czasu nie są honorowane podczas eksportowania animacji jako GIF, warto trzymać się symboli graficznych, które są animowane tylko na głównej osi czasu.
Animacja
Animowanie to sposób, w jaki przenosisz się z jednego stanu do drugiego. Możesz użyć animacji kształtu, ruchu lub klasycznych.
Animacji kształtu można używać tylko z kształtami lub elementami, które zostały narysowane na kanwie lub wektorach zaimportowanych przy użyciu preferencji importera AI (a nie jako bitmapy). Dzieje się tak, ponieważ animacja kształtu umożliwia zmianę kształtu obiektu. Na przykład: możesz dodać okrąg do jednej klatki kluczowej na osi czasu, dodać kwadrat do innej, a następnie przekształcić okrąg w kwadrat z animacją kształtu.
Animacje ruchu są wykorzystywane do tworzenia animacji ruchów, określając różne wartości pomiędzy pierwszym a ostatnim ramek. Za pomocą tego rodzaju animacji można zmieniać właściwości obiektu, w tym położenie, rozmiar, kolor, efekty, filtry i obrót.
Animacja klasyczna jest bardzo podobna do animacji ruchu. Został przeniesiony z Flasha i jest zachowany w programie Animate jako dodatkowa opcja. Jest to mój preferowany sposób stosowania animacji ruchu, ponieważ techniki wygładzania (omówione poniżej) są nieco prostsze w zastosowaniu.
Łatwość
Easing idzie w parze z animacją. Jeśli przenoszenie obiektu z jednej pozycji do drugiej za pomocą osi czasu jest ciastem, to łagodzenie jest lukrem!
Korzystając z funkcji uproszczenia programu Animate, można przyspieszyć lub spowolnić animację na początku lub na końcu. Lub dodaj trochę odbicia, gdy animacja się skończy. To naprawdę pomaga nadać twojej animacji trochę osobowości.
Łatwość zastosowana do tej animacji szybko rozpoczyna animację i zwalnia na końcu.
Tutaj zastosowałem łatwość odbicia do mojej animowanej.
Aby uzyskać informacje o tym, jak zastosować wygładzanie, obejrzyj ten film na YouTube.
Krok 4: Eksportuj animowany GIF
Zapisywanie animacji z Adobe Animate jako GIF jest proste i przyjemne. Po prostu przejdź do Plik> Eksportuj> Eksportuj animowany GIF.
Zmniejszenie rozmiaru pliku
Niezależnie od tego, w jaki sposób tworzysz animowany plik GIF — za pomocą programu Adobe Animate lub czegoś innego — utrzymywanie małego rozmiaru pliku ma kluczowe znaczenie w przypadku poczty e-mail. Jest kilka rzeczy, które warto wziąć pod uwagę, aby pomóc Ci zachować jak najjaśniejsze animacje.
Kompresja
Narzędzia takie jak Animate i Photoshop mają ograniczone opcje kompresji plików GIF; często lepiej jest użyć zewnętrznego oprogramowania zamiast kompresji. Polecam program ImageOptim, który można pobrać bezpłatnie, lub EZgif, bezpłatne internetowe narzędzie do optymalizacji GIF-ów, aby zmniejszyć rozmiar pliku do optymalnej wagi. Osobiście lubię utrzymywać swój plik poniżej 1 megabajta (MB), ale optymalny rozmiar pliku będzie się różnił i zależy od czasu ładowania poczty e-mail, który omówimy w dalszej części tego wpisu na blogu.
Płaski kolor
Włączenie fotografii lub gradientów do animacji zwiększa wagę ze względu na ilość kolorów i odcieni, które zawierają. GIF może zawierać tylko 256 kolorów — w porównaniu do JPEG, który może zawierać do 16 milionów — co często powoduje, że jakość spada. Kluczem jest więc prostota.
Ograniczone ramki
Im krótsza animacja, tym lepiej. Każda klatka, którą zawiera Twoja animacja, zwiększa wagę GIF-a. Ponieważ animacja powinna naprawdę komplementować kopię, warto ograniczyć czas odtwarzania animacji i zachęcić czytelników do przejścia w dół wiadomości e-mail.
Jeśli po zapisaniu i skompresowaniu zauważysz, że Twój GIF ma zbyt dużą wagę, możesz usunąć klatki za pomocą programu Photoshop lub EZgif.
Sprawdzanie animowanego GIF-a
Po zakończeniu tworzenia GIF-a możesz chcieć uzyskać opinię lub zatwierdzenie przed umieszczeniem go w wiadomości e-mail. Dzięki narzędziu do współpracy w czasie rzeczywistym, takim jak Litmus Proof, możesz scentralizować komentarze i zatwierdzenia wszystkich.
Implementowanie animowanych GIF-ów w wiadomości e-mail
Gdy już przygotujesz plik GIF, możesz dołączyć go do wiadomości e-mail w taki sam sposób, w jaki dodajesz dowolny inny plik obrazu: