Litmus Live: jak projektować e-maile, które działają

Codziennie wysyła się średnio 333 mld e-maili, więc e-mail marketing to pole mocnej konkurencji. E-maile są tanie, dlatego raczej zostaną z nami na bardzo długo. Jeśli jeszcze nie opanowałeś tworzenia dobrych e-maili, najwyższy czas to zrobić.

Poza liczbą konkurentów e-mail marketerzy mają na swojej drodze także inne wyzwania.

Z czym mierzą się dziś e-mail marketerzy

• Więcej klientów poczty i urządzeń niż kiedykolwiek. Według Statisty liczba użytkowników poczty e-mail w 2022 roku wynosi około 4,3 mld. To mnóstwo urządzeń i różnych klientów poczty, do których trzeba się dopasować.
• Zmęczenie e-mailami i coraz słabsza uwaga odbiorców.
• Preferencje ustawiane przez użytkowników, takie jak tryb ciemny. W 2020 roku Android Authority przeprowadził badanie, z którego wynika, że prawie 82% użytkowników Androida woli tryb ciemny.
• Automatyczne boty odsiewają wiadomości i filtrują skrzynki odbiorcze.
• Przybywa spamu i e-maili phishingowych. Statista podaje, że we wrześniu 2021 roku około 88,88 mld ze 105,67 mld e-maili stanowił spam.
• Zapory sieciowe domyślnie blokują lub modyfikują e-maile.

A to dopiero początek listy. Nie traktujmy jej jednak jak przeszkody na drodze do skutecznej kampanii e-mailowej. Wręcz przeciwnie: pozwala marketerom rozwijać umiejętności i tworzyć treści najwyższej jakości.

3 zasady projektowania e-maili, których musisz się trzymać

Projektowanie e-maili opiera się na trzech filarach:

• Dostępność.
• Responsywność.
• Estetyka.

Przyjrzyjmy się każdemu z nich.

Dostępność. Kiedyś, mówiąc o dostępnych e-mailach, mieliśmy zwykle na myśli to, że e-mail powinien mieć teksty alternatywne (alt), dać się szybko przejrzeć i używać czytelnych krojów i rozmiarów czcionek. Dziś oczekujemy też zwięzłości i wyraźnej hierarchii, optymalnego kontrastu i przemyślanego wykorzystania pustej przestrzeni.

Responsywność. Dawniej od responsywnego e-maila wymagano głównie tego, by zmieniał rozmiar i poprawnie wyświetlał się na ekranach o różnych rozdzielczościach. Wraz z rozwojem e-mail marketingu pojawiły się nowe wymagania. Dziś e-maile muszą uwzględniać tryb ciemny, blokowanie obrazów i optymalne wyświetlanie na urządzeniach mobilnych.

Estetyka. Pamiętaj, że e-mail ma nie tylko przyciągać wzrok, ale też być pełnowartościowym produktem.

Zanim zajmiesz się projektem, zrób audyt platform e-mailowych

Platformy e-mailowe rozwijają się dziś tak szybko, że łatwo zostać w tyle i stracić rękę na pulsie. Naprzód idą nie tylko platformy, ale i Twoja firma. A jeśli przyciągasz wielu nowych subskrybentów, mogą oni zmienić reguły Twojej gry w e-mail marketingu: na przykład korzystać z innego klienta poczty niż ten, do którego przywykłeś, albo częściej czytać e-maile na telefonie niż na komputerze. Wszystkie te czynniki mogą bezpośrednio wpływać na projekt e-maili.

Żeby być na bieżąco ze zmianami, e-mail marketerzy powinni co roku przeprowadzać audyt i:

• Ustalić, z jakich klientów poczty najczęściej korzystają odbiorcy.
• Śledzić proporcje użytkowników komputerów i urządzeń mobilnych.
• Śledzić proporcje darmowych i firmowych adresów e-mail.

Przykładowy audyt

Wyobraźmy sobie, że pracujesz w sektorze B2B i audyt pokazał, że większość Twoich odbiorców:

• korzysta z Outlooka lub Gmaila;
• ma firmowe adresy e-mail;
• czyta e-maile na komputerze.

W takim przypadku przy projektowaniu e-maili warto wziąć pod uwagę między innymi:

• Priorytet dla klientów poczty na komputery. Nie znaczy to, że masz całkiem zapomnieć o wersjach mobilnych. Po prostu włóż więcej wysiłku w to, by wersje na komputer były jak najbardziej dopracowane.
• Zapory sieciowe (blokowanie obrazów). Niestety nie masz na to wpływu. Najlepsza rada: twórz e-maile, które mają sens nawet bez obrazów.
• Klienty poczty, które słabo renderują CSS. Kolory, tabele, przyciski i inne elementy e-maila mogą wyglądać inaczej, niż zaplanowałeś. To bardzo ważne, by uwzględnić to przy projektowaniu.

O czym pamiętać przy projektowaniu szablonów e-maili HTML

Tabele – myślenie w ramkach

Tabele to fundament solidnego i responsywnego projektu e-maila, ponieważ:

• dają najbardziej przewidywalne renderowanie e-maila (w porównaniu z floatami, paddingami, marginesami i wyrównaniem). Informacje podane w formie tabeli łatwiej się odbiera. Wyobraź sobie przykład poniżej bez poziomych linii – trudno byłoby się w tym e-mailu odnaleźć.

• łatwiej je zaprojektować i kontrolować na urządzeniach mobilnych – kolumny składają się w wiersze. W przeciwieństwie do CSS tabele HTML dobrze działają w klientach poczty i nie zamienią Twojego pięknego układu w coś zupełnie innego.

Optymalizacja pod tekst

Dobra praktyka: nie przekazuj tekstu i przycisków za pomocą obrazów. Obrazy często są blokowane albo się nie pobierają. Jeśli łączysz tekst z obrazem, główna oferta pozostaje czytelna, nawet gdy obraz zostanie zablokowany. To najlepsze, co możemy zrobić, żeby dotrzeć do jak największej liczby klientów.

Dodatkowo:

• zapytania o media (media queries) lub automatyczne skalowanie pomagają lepiej wyświetlać tekst na urządzeniach mobilnych;
• przyciski HTML dopasowują się do trybu ciemnego i wyróżniają się lepiej niż obrazy.

W pierwszym przykładzie odbiorca wciąż może przeczytać ofertę, zainteresować się nią i wejść na stronę po szczegóły. W drugim – nie, więc traci szansę, by poznać ofertę i coś kupić. Tracą na tym obie strony: i odbiorca, i firma.

Jakich obrazów używać w szablonie e-maila

PNG

To bardzo przydatny format do nowatorskich projektów i do omijania nieprzewidywalnego CSS.

Daje takie możliwości stylizacji jak:

• Przezroczystość/gradient

• Cienie

Obrazy PNG można też ciąć na fragmenty, które oddzielają sekcje e-maila, zwłaszcza przy przejściach między różnymi kolorami tła.

Przydaje się to do wizualnego rozdzielania treści, wyróżniania informacji i poprawy czytelności.

GIF-ów nie trzeba już unikać:

• są lepsze od Flasha, którego klienty poczty nigdy nie obsługiwały i który całkiem wycofano;
• zapętlenie daje płynną animację. Jeśli zrobisz wszystko dobrze, odbiorcy nawet nie zauważą, że GIF się powtarza;
• mniej kolorów = mniejsze pliki, więc Twoje e-maile będą szybciej się ładować.

Ilustracje cyfrowe to w 2022 roku również obowiązkowy element projektowania e-maili. Ilustracja cyfrowa to rodzaj grafiki tworzonej za pomocą narzędzi cyfrowych. Nie myl jej z obrobionym zdjęciem: ilustracje cyfrowe powstają od zera.

Mają takie zalety:

• są uniwersalne, łatwo je skalować, edytować i wykorzystywać ponownie. Dzięki temu tworzenie grafik do e-maili zajmuje dużo mniej czasu;
• przekazują styl marki, nawet gdy elementy CSS zachowują się nieprzewidywalnie. Elementy CSS mogą zmienić kolor (i zepsuć Twój pierwotny zamysł), a ilustracje cyfrowe wyglądają tak samo bez względu na to, w jakim kliencie poczty subskrybenci czytają Twoje e-maile.

Żeby jak najlepiej wykorzystać ilustracje cyfrowe, skorzystaj z tych wskazówek:

• Dodaj cień, obrys lub odstęp (w przypadku JPEG). Ilustracja nabierze wtedy bardziej realistycznego wyglądu.
• Wybieraj kolory o średnich tonach, żeby obrazy nie zlewały się z tłem w trybie ciemnym. Wtedy będą wyglądać świetnie bez względu na to, w jakim trybie subskrybent czyta e-mail.

CSS (kaskadowe arkusze stylów) to część kodu e-maili HTML, która odpowiada za wygląd e-maila: czcionki, kolory, odstępy itd. To bardzo wygodne, ale podchwytliwe narzędzie: w niektórych klientach poczty CSS może wyświetlać się niepoprawnie i zamienić Twój e-mail w coś zupełnie innego, jak w przykładzie poniżej.

Dlatego zachowaj ostrożność i testuj e-maile z CSS w różnych klientach poczty, żeby uniknąć przykrych niespodzianek.

Najważniejsze wnioski

• Stawiaj na pierwszym miejscu potrzeby klientów poczty, z których korzystają Twoi subskrybenci, i projektuj pod nie. Nie trać czasu na rzeczy, które okazują się zbędne.
• Oszczędzaj czas i zasoby (twórz solidne szablony do powtarzalnych scenariuszy). Zyskasz więcej czasu na inne ważne zadania.
• Przyjmuj zmiany w świecie e-maili, takie jak responsywność i tryb ciemny, i dostosowuj się do nich. Musisz iść z duchem czasu, żeby Twoje e-maile były aktualne.
• Nie bój się uczyć zespołów deweloperów i projektantów – wnosisz kluczową wiedzę i doświadczenie. Pamiętaj, że wszyscy macie ten sam cel i osiągniecie go tylko razem.

Litmus Live to trwająca 2 dni konferencja marketingowa, która gromadzi mnóstwo ekspertów od marketingu cyfrowego. Zrobiliśmy notatki podczas wykładu Alego Mahada „Dostępny, responsywny i piękny projekt e-maili w 2022 roku”, dorzuciliśmy trochę liczb i własnych pomysłów i zamieniliśmy ten materiał w artykuł, który pomoże Ci odnaleźć się w projektowaniu e-maili.

Stwórz szablon e-maila w Blocks i wypróbuj te techniki!

Jeśli chcesz dowiedzieć się więcej o innych konferencjach i targach e-mail marketingu, przeczytaj nasz artykuł o nadchodzących konferencjach e-mail marketingu w 2023 roku.