W czerwcu 2012 r. opublikowaliśmy infografikę „E-mail marketing w liczbach”, która pokazywała preferencje odbiorców newsletterów. Można z niej wyciągnąć wiele interesujących wniosków, w tym jeden szczególnie istotny dla tego artykułu. Otóż okazuje się, że w ciągu ostatniego roku niezwykle dynamicznie wzrasta udział urządzeń mobilnych, wykorzystywanych do sprawdzania poczty e-mail.
Z tego artykułu dowiesz się:
- jak odbiorcy sprawdzają pocztę na smartfonach,
- jak projektować newslettery na urządzenia mobilne,
- na czym polega responsive e-mail design.
Na koniec pierwszego kwartału 2012 r. ponad 6% wszystkich sprawdzonych e-maili zostało wysłanych za pomocą urządzeń mobilnych. Większość z tego stanowią urządzenia ze stajni Apple, ale nie brakuje także tych działających w oparciu o system Android. Powyższe dane jasno wskazują, iż w najbliższym czasie marketerzy wykorzystujący e-mail marketing w swoich działaniach powinni poważnie zastanowić się, jak je zmodyfikować, aby były one efektywne również dla użytkowników sprawdzających pocztę na swoich urządzeniach mobilnych. Poniższy artykuł ma być niejako przewodnikiem po zbliżających się zmianach.
Nasi użytkownicy
Wielu marketerów przyzwyczaiło się do tego, że ich kampanie newsletterowe otwierane są przez użytkowników w konkretnych dniach tygodnia i o konkretnej godzinie. W oparciu o to przekonanie optymalizują więc czas wysyłek kolejnych kampanii. Oczywiście, takie działanie jest dobre i na razie nie sugeruję bynajmniej jego zmiany. Należy jednak pamiętać, że osoby wykorzystujące urządzania mobilne do sprawdzania poczty mogą zachować się nieco inaczej.
Słuchaj „Marketer+” Podcast
Po pierwsze, pamiętaj, że większość ludzi nie rozstaje się ze swoim telefonem prawie przez cały dzień, a to oznacza, że ponad połowa z nich wykorzystuje te urządzenia do sprawdzenia poczty w łóżku – zarówno zaraz po przebudzeniu, jak i zaraz przed pójściem spać. Co więcej, bardzo często wykorzystują oni smartfony do sprawdzania poczty w tak zwanym międzyczasie: na przystanku autobusowym, w łazience, siłowni itp. W skrócie – robią to dla zabicia czasu! Dlatego też w takich sytuacjach z przyjemnością przeczytają jakieś nowości w newsletterze, na który się zapisały i który właśnie odebrały za pomocą swojego smartfona.
Druga sprawa dotyczy tego, jak nasi odbiorcy sprawdzają pocztę. Okazuje się, że wiele osób wykorzystujących urządzenia mobilne tak naprawdę jej nie sprawdza. Oni filtrują wiadomości w oczekiwaniu na coś wartościowego. W praktyce sprowadza się to do kasowania nieinteresujących ich treści i pozostawiania w skrzynce odbiorczej tylko tego, co może ich zainteresować. Oczywiście część z tych e-maili jest czytana od razu na smartfonie, a część dopiero na tradycyjnym urządzeniu desktopowym.
Co robić?
Wielu marketerów obecnie nie myśli o zmianie podejścia przy projektowaniu newsletterów i mailingów na takie, które będą lepiej działać na urządzeniach mobilnych, gdyż twierdzą, że na razie nie ma takiej konieczności. Jest w tym jakieś ziarenko prawdy, choć tak naprawdę optymalizacja newsletterów pod urządzania mobilne – znana szerzej jako responsive e-mail design – nie wpłynie negatywnie na naszych „zwykłych użytkowników”. Dlatego warto przyjrzeć się temu zjawisku dokładniej.
Zanim otworzę e-maila
Większość użytkowników urządzeń mobilnych sprawdza pocztę za pomocą wbudowanej aplikacji dostępnej w smartfonie lub aplikacji Gmaila. Co za tym idzie, marketer musi zdawać sobie sprawę, że nadawca wiadomości nigdy nie był tak ważny jak teraz. Wynika to z faktu, iż użytkownik widzi dużo wyraźniej nadawcę za sprawą większej czcionki, jaką wykorzystują programy pocztowe do jego wyświetlenia. Natomiast temat wiadomości jest już nieco słabiej widoczny. Jednocześnie jak nigdy okazuje się, że tworzenie preheadera jest bardzo istotne w wiadomości.
[opis]Ilustracja 1. Zastosowanie preheadera[/opis]
[zrodlo] Materiały własne[/zrodlo]
Preheader to pierwsze zdania wiadomości, jakie wczytywane są w programach pocztowych dostępnych na urządzeniach mobilnych oraz np. poczcie Gmail. Problem w tym, że w wielu przypadkach pierwszym zdaniem jest: „Jeżeli nie widzisz tego e-maila poprawnie, kliknij tutaj”. Z punktu widzenia kreacji e-maila ważne jest, aby w jego górnej części znajdował się podgląd wiadomości w przeglądarce, ale niekoniecznie powinien to być tekst, który zachęca do jej otwarcia. W każdym razie warto przy pomocy zdolnego kodera HTML przygotować specjalny fragment kodu, który automatycznie zastąpi pobieranie pierwszego zdania wiadomości i wyświetli preheader o treści, która będzie miała dobre działanie marketingowe.
Tworząc preheader, warto pamiętać, że podobnie jak temat wiadomości powinien on mówić językiem korzyści i prezentować główną ofertę/news, jaki mamy do zaprezentowania. Ważne, aby nie było to powtórzenie treści tematu wiadomości, a jego rozwinięcie. Co więcej, jeżeli korzystasz z dobrego systemu do e-mail marketingu, możesz wykorzystać personalizację zarówno tematu wiadomości, jak i preheadera – dzięki temu efekty Twoich działań będą jeszcze lepsze. Warto pamiętać, aby preheader nie był za długi, maks. powinien liczyć 20 słów, a także by nie był za krótki – wtedy automatycznie pojawi się w tym miejscu pierwsze zdanie naszego e-maila. Najlepiej więc sprawdzić to przed wysłaniem finalnej kampanii.
Z punktu widzenia przygotowania kodu HTML warto zwrócić szczególną uwagę na to, aby czcionka prehedera była w kolorze tła, a jej rozmiar wynosił 1 px. Zdanie to nie będzie widoczne w treści maila, ale zostanie odczytane przez program pocztowy i wyświetli się właśnie jako preheder.
I otworzył e-maila
Super – udało Ci się namówić Twojego odbiorcę, aby otworzył wiadomość na swoim smartfonie. Co zatem zrobić, aby była ona efektywnie przez niego przetworzona?
Przede wszystkim musisz pamiętać o tym, że odbiorca Twojej wiadomości nie używa w tym momencie myszki, a jedynie palca. Co za tym idzie, jeżeli ma efektywnie kliknąć w jakiś element wiadomości, powinien być on odpowiedniej wielkości. Z mojego doświadczenia wynika, że najlepiej sprawdzają się duże, podlinkowane obrazki. Na pewno musisz zapomnieć o linkach tekstowych (no, chyba że linkiem jest cały tekst) w wiadomości i przyjąć minimalną wielkość przycisku call to action, która wynosi 44 x 44 px. Nie możesz także zapominać o tym, aby przyciski były odpowiednio od siebie oddalone.
Skoro już mowa o skali: ekrany smartfonów są nieco mniejsze od zwykłych monitorów. Oczywiście przekłada się to wprost na to, jak będziesz projektował swój newsletter. Zazwyczaj przygotowując go dla zwykłych użytkowników, rekomendowana szerokość wiadomości to 600-650 px. W przypadku większości smartfonów wszystko zostanie przeskalowane do szerokości ok. 320 px, czyli będzie dwa razy mniejsze!
W zawiązku z powyższym projektując szablon newslettera, powinieneś starać się tak go przygotować, aby miał on jedną kolumnę z główną treścią. Pamiętaj, aby treść była napisana w myśl złotej zasady: krótko, zwięźle i na temat. Użyj odpowiednio dużego i wyraźnego obrazka w celu zwizualizowania oferty, a także wyraźnego buttona call to action. Niestety, nie wszystkie programy pocztowe automatycznie pobierają obrazki z wiadomości. Dlatego nie zapomnij o tym, że warto przygotować odpowiednie ALT-y, które będą namawiały do dociągnięcia obrazków lub będą przekazywały odpowiednią treść komunikatu marketingowego.
Nie możesz też zapomnieć o odpowiednim rozmiarze czcionki. Dla śródtytułów, nagłówków itp. nie stosowałbym czcionki mniejszej niż 22 px. W przypadku treści właściwych użyłbym minimum czcionki w wielkości 14 px.
Wersja testowa
Mimo iż większość programów pocztowych potrafi już obsługiwać format HTML i wyświetlać go całkiem zwinnie, to nie zapominaj, by do wersji HTML zawsze stworzyć tekstową wersję wiadomości. Dzięki temu w łatwy sposób możesz dotrzeć do osób, które na swojej komórce nie mogą odczytać danej wiadomości, a jednocześnie nie wymaga to od Ciebie wykonania więcej niż jednego ekstra kliknięcia na etapie tworzenia szablonu. A skoro już jestem przy tym, to podzielę się swoim spostrzeżeniem. Zauważyłem bowiem, że wielu marketerów na Zachodzie używa linku do wersji mobilnej e-maila w nagłówku wiadomości. Najczęściej jest to link do wersji tekstowej, który jest bardzo trudny do kliknięcia. Odradzam to jednak i radzę skupić się na lepszym wykorzystaniu tego, co daje nam obecnie CSS 3.
[opis]Ilustracja 2. Widok tego samego maila w wersji HTML i tekstowej[/opis]
[zrodlo]Materiały własne[/zrodlo]
Responsive e-mail design
Jeżeli zależy Ci na zmaksymalizowaniu efektywności Twoich kampanii newsletterowych, zarówno tych skierowanych do użytkowników smartfonów, jak i tych, którzy sprawdzają pocztę w standardowy sposób, powinieneś pomyśleć o skorzystaniu z responsive e-mail design. W praktyce sprowadza się to do używania technologii CSS 3 oraz właściwości @media do wykrywania wielkości ekranu, na jakim dana wiadomość jest odczytywana. Sprowadza się to do pewnego założenia: jeżeli ekran danego urządzenia ma wymiar taki a taki, pokazuj treść A ostylowaną w sposób do niego przystosowany. Jeżeli ekran ma inną wielkość, pokaż treść B ostylowaną w inny sposób.
Najprostszym zastosowaniem tej technologii jest przygotowanie dwóch obrazków, które będziemy wyświetlać w zależności od wielkości ekranu. Dodatkowo funkcja CSS 3 pozwala na ukrywanie pewnych obszarów wiadomości. W praktyce urządzeniom mobilnym powinniśmy wyświetlać zazwyczaj jedną główną ofertę, pomijając oferty uzupełniające.
Oczywiście, @media nie obsługują wszystkie programy pocztowe czy przeglądarki – ale w takim wypadku zawsze zostanie wczytana podstawowa wersja wiadomości. Jeżeli zostanie ona dobrze przygotowana, powinna spełnić chociaż w części pokładane w niej nadzieje. Tak czy inaczej, warto, aby Twój koder zapoznał się z najnowszymi możliwościami w zakresie kodowania malingów.
Na koniec
Niezależnie od tego, jak wielu Twoich użytkowników wykorzystuje dzisiaj urządzenia mobilne do sprawdzania poczty elektronicznej, możesz być pewny, że w najbliższym czasie ta liczba na pewno wzrośnie. Dlatego już dziś możesz się do tego przygotować. Być może na początku stopniowo, bez większej rewolucji – ale na pewno warto się nad tym pochylić.
Życzę udanych wysyłek!
[kreska]Warto doczytać:
1. „Infografika: E-mail marketing w liczbach”, http://marketingowiec.pl/artykul/coraz-czesciej-sprawdzamypoczte-na-urzadzeniach-mobilnych-czyli-e-mail-marketing-wliczbach-infografika.
2. „Raport: Technologia CSS w aplikacjach pocztowych 2012”, http://www.freshmail.pl/css.