Jeśli regularnie wysyłasz newslettery swoim klientom, a sam miałeś okazję otwierania wiadomość e-mail poprzez urządzenie mobilne, doskonale zdajesz sobie sprawę z tego, jak czują się Twoi subskrybenci. E-mail niedostosowany do smartfonów rozbija się na wiele kolumn, a rozmiar czcionki zmniejsza się do tego stopnia, że tekst staje się zupełnie nieczytelny. Oczywiście użytkownicy mogą powiększać ekran i przesuwać go raz w lewo, raz w prawo. Ale sam przyznasz, że jest to dość irytujące. Nie dziwią więc statystyki, że nawet 80% użytkowników od razu usuwa otrzymane newslettery, jeśli nie są dostosowane do urządzeń mobilnych.

W poprzednim wpisie – Responsywne newslettery w sklepie internetowym – próbowaliśmy Cię przekonać (mamy nadzieję, że skutecznie) o słuszności zastosowaniu RWD w wysyłanych newsletterach. Teraz pora na przedstawienie kilku najważniejszych zasad, związanych z tworzeniem responsywnych e-maili.

1. Układ jednokolumnowy

Prostota ma siłę, dlatego w tworzeniu responsywnych e-maili weź pod uwagę układ jednokolumnowy. Wyświetlana w ten sposób wiadomość najlepiej sprawdza się na urządzeniach mobilnych.

2. Zwięzła treść

Skoro Twój newsletter ma się wyświetlać na mniejszym ekranie, musisz zadbać o zwięzłą i jasną treść. Do minimum ogranicz to, co zbędne, a skoncentruj się na kwestiach najważniejszych. Dzięki temu oszczędzisz użytkownikom ciągłego przewijania wiadomości.

3.  Większa czcionka

Jeżeli udało Ci się zachować zwięzłość treści, powiększ czcionkę. Najlepiej sprawdzi się rozmiar 14px dla standardowego tekstu oraz 22px dla nagłówków. Dzięki temu tekst będzie dla użytkownika czytelniejszy – bez konieczności powiększania ekranu.

4. Widoczne CTA                  

Pamiętaj, że celem newsletterów jest wywołanie określonego zachowania odbiorców maili. Dlatego Twoja wiadomość powinna posiadać klikane przyciski CTA (call-to-action). Co więcej, muszą posiadać odpowiedni rozmiar, by łatwo w nie kliknąć. Za optymalny rozmiar buttonów uważa się 44 x 44px.

Zwróć również uwagę na to, by zachować pomiędzy przyciskami odpowiednią odległość. Jeżeli będą położone zbyt blisko siebie, możliwe iż nie trafią w odpowiedni button.

5. Zmień hierarchię

To co najważniejsze powinno znaleźć się na samej górze. Pamiętaj o tym, planując tworzenie responsywnych e-maili na urządzenia mobilne. Uwzględnij hierarchię pionową, jak najwyżej umieszczając także CTA – w ten sposób nie umknie to żadnemu użytkownikowi.

6. Dostosowane zdjęcia

Jeżeli mail chcesz opatrzyć zdjęciami, upewnij się, że grafika ma odpowiedni rozmiar. Niedostosowana będzie wyświetlać się na całej szerokości, zmuszając użytkownika do zmniejszania lub przewijania ekranu.

Dobrym podsumowaniem zasad tworzenia responsywnych e-maili będzie poniższa infografika:

I na koniec jeszcze jedno – jeżeli chcesz, by e-mail marketing dał zamierzone efekty, musisz pamiętać o tym, by strony, do których kierują przyciski CTA także były tworzone zgodnie z warunkami Responsive Web Design.