Polscy internauci zwracają się ku rozwiązaniom mobilnym. Transmisja danych w sieciach mobilnych jest od kilku lat najdynamiczniej rozwijającą się usługą. W 2020 roku przesłano łącznie 5082 PB danych. Był to wynik o prawie 40,7% lepszy od odnotowanego rok wcześniej. Na jednego Polaka przypadało średnio 133 GB.
- 72% Polaków używa smartfonów
- 49% posiadaczy smartfonów używa ich do sprawdzania poczty e-mail
- 25% transakcji online dokonywanych jest na telefonie
Już ponad 60% Polaków wysyła i odbiera maile przede wszystkim za pośrednictwem smartfona, co – biorąc pod uwagę rosnące wskaźniki korzystania z urządzeń mobilnych prowadzi do prostego wniosku – ten odsetek także będzie rosnąć, dlatego marketerzy muszą dostosować swoje narzędzia, w tym mailingi i newslettery do wersji mobile. Na co zwracać uwagę, projektując e-maile mobile friendly, czyli przede wszystkim responsywne? Oto 5 podstawowych patentów na e-mail mobile-friendly.
*raport IAB Polska Mobile 2018
E-mail mobile-friendly – jak skonstruować?
1. Chwytliwy tytuł i preheader
Chwytliwy tytuł to krótki tytuł. Ta dewiza sprawdza się nie tylko w mediach, ale też w e-mail marketingu. I nie chodzi wyłącznie o to, że krótki tytuł „sam wpada w oko”, ale przede wszystkim o kwestie techniczne. Najchętniej wykorzystywaną aplikacją pocztową mobile jest aplikacja Gmaila, standardowo instalowana na urządzeniach z Androidem (ok. 47% użytkowników*). Programy pocztowe w telefonach koncentrują się przede wszystkim na eksponowaniu nadawcy. Taki zabieg pozwala użytkownikom od razu przesiewać maile i skupiać się na wiadomościach od konkretnych nadawców.
*Rozkład rynku mailowego w Polsce 2019
Jednakże ta forma wyświetlania wiadomości sprawia, że warto poświęcić chwilę na takie skonstruowanie tematu i preheadera, aby przyciągnąć uwagę użytkownika. O czym pamiętać?
- W aplikacji Gmail wyświetla się do 33 znaków (w zależności od szerokości telefonu). Pamiętajmy, że nieodebrane wiadomości mają temat wytłuszczony, a bold zabiera więcej miejsca niż wersja regular (więc 33 znaki to już ryzyko ucięcia tematu).
- Temat powinien być krótki, na maksymalnie 5 słów.
- Przyciągajmy uwagę, np. poprzez bezpośredni zwrot i wykorzystanie piktogramów.
- Preheader powinien być skonstruowany tak, aby nie przekraczał 33 znaków (font o rozmiarze mniejszym niż ten użyty w temacie).
- Treść preheadera musi być skorelowana z tematem, a przekaz być konkretny (preheader ma wpływ na otwieralność mailingu).
2. Prosty układ
Świetny tytuł i chwytliwy preheader to nasz oręż do tego, by skłonić użytkownika do otwarcia maila. Kolejna bitwa toczyć się będzie już na polu wiadomości, której podstawową cechą musi być przejrzystość.
Projektując e-mail w wersji mobile, musimy wziąć pod uwagę zasadę, że im mniej scrollowania, tym lepiej. A zatem tworzymy układ jednokolumnowy (lub dwukolumnowy, ale wówczas warto dokładnie przeanalizować sposób przełamania tabeli, co dzieje się najczęściej przy szerokości 480 px).
Budowanie mailingu na tabelach to zalecana forma, gdyż gwarantuje utrzymanie optymalnej szerokości maila u różnych klientów poczty. Najlepiej na urządzeniach mobilnych skalują się mailingi opracowane dla szerokości 600 px. Warto pamiętać o zastosowaniu w kodzie media queries, które pozwalają m.in. na zastosowanie odpowiedniego pliku lub kodu CSS w zależności od wskazanej rozdzielczości ekranu, na którym użytkownik otwiera e-mail.
3. Klasyczne fonty
Choć dla wielu projektantów zastosowanie oryginalnego fontu może wydać się kuszące, standardowe rodzaje są o wiele bezpieczniejsze (Arial, Verdana, Tahoma, Times New Roman) – dzięki temu mamy gwarancję, że treść wyświetli się prawidłowo w różnych aplikacjach. Optymalny rozmiar fontu to 14 – 22 pkt., ale – uwaga – warto przetestować wszystkie rodzaje fontów, gdyż 14 pkt. zapisane Verdaną i Times New Roman mają różną wysokość.
4. Ważny pierwszy widok
E-mail w założeniu ma u użytkownika wywołać jakąś reakcję, wzywając go do wykonania konkretnego działania. Pamiętając o zasadzie, że im mniej scrollowania, tym lepiej, przyciski CTA należy zamieścić w pierwszym widoku.
Ważne, aby zachować pożądaną wielkość (minimum 44 x 44 px). Pamiętajmy, że w wersjach mobilnych przyciski nie zmienią koloru po najechaniu, więc powinny być zaprojektowane tak, aby użytkownik od razu wiedział, że ma w nie kliknąć. Podobnie rzecz się ma z wszystkimi innymi klikalnymi elementami, np. linkami – warto je więc wyróżnić (kolorystycznie, poprzez podkreślenie itp.).
5. Prosta grafika
W responsywnym mailingu zdjęcia są skalowane, dlatego wybierajmy grafiki bez nadmiernych detali, tak, aby dostosowane do wersji mobilnej nadal były czytelne. Tło powinno mieć jednolity kolor, a zastosowane grafiki rozszerzenie JPG, PNG lub GIF oraz opis za pomocą parametru ALT.
Tekst alternatywny pozwala użytkownikom zidentyfikować fragmenty mailingu z obrazem w sytuacji, gdy klient pocztowy nie pobiera automatycznie obrazków. Widząc odpowiedni tekst alternatywny, użytkownik może podjąć dalszą akcję, a więc pobrać obrazki. Jednak jeśli tego nie zrobi – dzięki odpowiednim opisom mailing pod względem merytorycznym będzie równie wartościowy.
Pamiętajmy też, aby nie projektować struktury wiadomości za pomocą obrazków. Dobrze, aby pliki graficzne zastosowane w mailingu miały prostą, numeryczną strukturę nazewnictwa: 01, 02, 03 itd. I jeszcze jedno – Java Scriptu nie kocha żaden klient pocztowy – zatem go nie stosujmy.
E-mail mobile-friendly: podsumowanie
W marketingowej rzeczywistości zmienną, która ma niebagatelne znaczenie dla powodzenia kampanii czy wysyłki newsletterów jest czas. Z tego powodu to właśnie marketerzy najchętniej korzystają z gotowych rozwiązań i sprawdzonych szablonów, które od początku są konstruowane tak, aby realizować konkretne marketingowe założenia. Oczywiście można samodzielnie (jeśli ktoś potrafi) kodować mailingi w HTML. Można to też zlecić. Można jednak skorzystać ze skutecznych narzędzi np. kreatora Drag & Drop w MessageFlow, które są: gotowe do użycia, przetestowane na wielu klientach pocztowych (konieczne przy każdym mailingu), proste, intuicyjne w obsłudze i oczywiście responsywne.
