Chcesz stworzyć atrakcyjne, skuteczne kampanie mailingowe, które będą łatwe do wdrożenia oraz dotrą do szerszego grona odbiorców? A może masz już doświadczenie z email marketingiem, ale chcesz poszerzyć swoją wiedzę o to, jak ulepszać wiadomości, żeby konsument chętniej je odczytywał. Dzięki temu artykułowi dowiesz się jak dobrze projektować mailingi dla swoich odbiorców, aby były lekkie, czytelne na wszystkich urządzeniach oraz osiągały lepszą dostarczalność.
Problematyka tworzenia mailingów
Mailingi HTML bazują na dwóch podstawowych technologiach, które wykorzystuje się do tworzenia stron internetowych: HTML & CSS.
Jednak języki te nieustannie ewoluują, są poprawiane i ulepszane wspólnie z twórcami przeglądarek internetowych, takich jak np. Firefox czy Safari.
Zmiany są opracowywane w ramach poszczególnych specyfikacji, które następnie są kolejno implementowane przez przeglądarki internetowe.
W przypadku klientów pocztowych (które mogą mieć formę: aplikacji desktopowych, mobilnych lub webowych) brak jest jednej, standaryzowanej specyfikacji w odniesieniu do mailingów. Niektóre klienty pocztowe usuwają część kodu, inne z kolei dodają taki, którego nie można w żaden sposób nadpisać. Możliwości HTML’a i CSS’a w takich warunkach są bardzo ograniczone. Prowadzi to do następujących wniosków:
– Praktycznie NIE da się zakodować mailingu, który będzie wyglądał na wszystkich klientach pocztowych w 100% identycznie.
– Wszystkie niestandardowe rozwiązania, takie jak responsywność, obrazki w wysokiej rozdzielczości dla ekranów retina itp. wymagają dodatkowych testów dla każdego klienta pocztowego.
O czym warto pamiętać podczas projektowania mailingów?
Fonty
Użycie wybranegoo przez siebie (customowego) fontu w taki sposób, aby działał w każdym kliencie pocztowym w taki sam sposób, jest możliwe tylko w mailingach graficznych, gdzie teksty są prezentowane w postaci obrazków. Nie są one wtedy jednak możliwe do zaznaczenia, a co za tym idzie, nie są również możliwe do skopiowania. Obrazek zajmuje więcej przestrzeni dyskowej niż tekst, więc waga mailingu też staje się zdecydowanie większa.
Niektóre klienty pocztowe, takie jak Mozilla Thunderbird lub Apple Mail co prawda wspierają customowe fonty, ale tylko jeśli są one zainstalowane na komputerze użytkownika. Wynika z tego, iż podczas projektowania mailingu tekstowego nie można polegać na customowych fontach. Można je stosować, ale wyłącznie jako formę ulepszenia mailingu, która wyświetli się nielicznej grupie odbiorców.
Jeśli nie ma możliwości użycia własnego fontu, to zostanie zastosowany (automatycznie) tzw. font systemowy. Należy mieć na uwadze to, że w różnych systemach operacyjnych fonty systemowe mogą się między sobą różnić.
Bezpieczne fonty, które są dostępne od momentu instalacji w większości systemów operacyjnych, to na przykład:
szeryfowe: Times New Roman, Georgia
bezszeryfowe: Arial, Helvetica, Tahoma, Verdana
Warto również wiedzieć, że klient pocztowy może samodzielnie nadpisać kod definiujący font w mailingu i użyć innego, własnego fontu. Tak na przykład robi Outlook Online, który wyświetla teksty za pomocą fontu Segoe UI.
Responsywność
W czasach ‘mobile first’ przygotowywanie mailingu, który ma stałą szerokość, nie jest najbardziej optymalnym rozwiązaniem. Co prawda klienty pocztowe zainstalowane na urządzeniach mobilnych w pewien sposób radzą sobie z tym, poprzez przeskalowanie grafiki, czy zmniejszenie rozmiaru fontów, to jednak ostateczny efekt wizualny może nie być taki jakiego byśmy sobie życzyli.
Im mniej kolumn tym lepiej
…a najlepiej jedna. Jednym z największych utrudnień związanych z responsywnością jest fakt, że spora część klientów pocztowych całkowicie wycina fragment kodu, który jest odpowiedzialny za zmianę wyglądu w zależności od rozdzielczości ekranu (tzn. media queries). Projektując układ wielokolumnowy, warto pamiętać o tym, że:
– widok wielokolumnowy (2 – 3 kolumny) powinien być zaprojektowany w taki sposób, aby możliwe było zmieszczenie wszystkich kolumn nawet na urządzeniach mobilnych. W praktyce jest to bardzo trudne. Dlatego najlepiej maksymalnie, jak to tylko możliwe, ograniczyć liczbę kolumn.
– Ponadto, najlepiej nie umieszczać wszelkiego rodzaju ozdobników w jednej linii (w poziomie) z treścią. Uzyskanie takiego efektu wizualnego może wymagać zastosowania kilku kolumn.
Wymiary mailingu
Najbardziej klasyczna szerokość mailingu to 600px i dobrze jest się jej trzymać. Zwłaszcza, że treść mailingu powinna zmieścić się też na mniejszych rozdzielczościach mobilnych (320 – 400px).
Zaleca się również, aby nie przesadzać z wysokością i objętością treści w mailingu. Na przykład Gmail ma określoną maksymalną długość kodu dla pojedynczej wiadomości. Po jej przekroczeniu reszta kodu jest usuwana. Jeśli usuniemy część kodu HTML i pozostawimy niedomknięte znaczniki, może to doprowadzić do poważnych błędów w wyświetlaniu całej wiadomości!
Tła
Tła w mailingach tekstowych mogą być jedynie jednokolorowe. Na przykład gradientu, czy tła obrazkowego można używać wyłącznie z fallbackiem w postaci jednego koloru, który zostanie zastosowany w sytuacji braku wsparcia dla tła obrazkowego.
Aby uzyskać tło obrazkowe (lub gradientowe) pod tekstem, które wyświetli się w większości klientów pocztowych należy posłużyć się grafiką z tekstem. Wadą tego rozwiązania (pomijając wspomniany wcześniej brak możliwości zaznaczenie tekstu) jest to, dopóki użytkownik nie zezwoli na ich pobranie, to spora część klientów pocztowych początkowo blokuje wyświetlanie obrazków.
Inspiracje:
Uber
Apple
Discord
Checklista Zlecasz mailing? Sprawdź krok po kroku, czy wszystko uwzględniłeś/aś. Checklista zakłada, że zapoznałeś/aś się z naszym artykułem o mailingach. Przy projektowaniu (opracuj projekt, który będzie odpowiedni na desktop oraz mobile):
rekomendowana szerokość
liczba kolumn
waga
fonty
tło w miejscu kodowania
Podstawowe elementy mailingu:
nagłówek
preheader
treść główna
CTA
stopka i jej wszystkie elementy
Przy zleceniu zakodowania mailingu agencji:
Sprawdź krok po kroku powyższą check listę, dotyczącą projektu graficznego 🙂
Załącz lub opisz specyfikację techniczną.
Załącz projekt w formacie psd oraz podgląd w png/jpg.
Określ, które elementy mailingu powinny być podlinkowane, wyślij te linki.
Określi termin wykonania mailingu.