Responsywność a email marketing

Jedną z ważnych cech każdej kampanii email marketingowej jest to, jak wiadomości zostaną wyświetlone użytkownikom. Muszą być skalowalne, tj. wyglądać dobrze niezależnie od rozmiaru i rozdzielczości ekranu. Responsywność a email marketing to jednak czasem niełatwy dylemat. Przygotowaliśmy 6 porad, jak należy dbać o responsywność mailingów.

Na czym polega responsywność

Responsywność jako pojęcie to nic innego, jak automatyczne dopasowywanie wyświetlanych treści do danej rozdzielczości ekranu. Dzięki niej oglądając YouTube na telefonie, komputerze i telewizorze widzisz interfejs dostosowany pod konkretne urządzenie. 

Wszystkie aplikacje, strony www, reklamy i kampanie email marketingowe powinny być responsywne. Powodów jest kilka:

• użytkownik musi być w stanie przeczytać treść i zobaczyć obrazy, w innym przypadku - opuści Twoją stronę, zamknie email i być może nigdy nie zostanie klientem Twojej firmy;
• firmy, które dbają o responsywność, są oceniane jako bardziej profesjonalne, co więcej - odnotowują niższy współczynnik wyjścia i dbają o customer expierience;
• użytkownik może wygodnie przeglądać treść niezależnie od tego, z jakiego urządzenia korzysta.

Przygotowaliśmy 6 prostych tricków, dzięki którym dowiesz się więcej o responsywności i zaimplementujesz ją w Twoich kampaniach.

Trick 1 – Responsywność to rozmiary czcionek i obrazów oraz viewport

Oczywistym jest, że zależnie od wielkości i rozdzielczości ekranu, rozmiar poszczególnych elementów powinien zmieniać się tak, aby były one czytelne. Nie każdy wie jednak, że to nie wszystko.

Jednym z filarów responsywności jest tak zwany viewport. W specyfikacji przeglądarek i aplikacji oznacza obszar, który jest widoczny na ekranie bez przewijania w żaden z boków. Dobry responsywny design nie wymaga przewijania ekranu w poziomie. Od wielu lat użytkownicy są do tego przyzwyczajeni i mogą pominąć treść, która nie mieści się na ekranie.

Rozmiary obrazów czy filmików dobrze jest określać w procentach (zamiast pikselach) lub ustawiać im atrybut maksymalnej oraz minimalnej szerokości i wysokości. Jeśli kodujesz samodzielnie lub zamawiasz u programisty szablony wiadomości warto o tym pamiętać, przy gotowych narzędziach (jak np. nasz FreshMail Designer) zazwyczaj platforma zapewnia dbałość o te parametry multimediów.

Trick 2 – Sprawdź każde urządzenie

Nie musisz posiadać wielu komputerów ani smartfonów pod ręką, aby sprawdzić, jak Twoja strona lub email wyglądają na różnych ekranach.

Popularne przeglądarki, jak Firefox i Chrome, posiadają wbudowane emulatory różnych urządzeń. W Google Chrome wystarczy otworzyć konsolę przyciskiem F12 i kliknąć ikonę urządzeń. Nad podglądem znajdziesz rozwijaną listę z kilkoma predefiniowanymi urządzeniami do wyboru, możesz też edytować, jakie urządzenia tam widzisz i dodawać nowe. Odpowiednik w Firefoxie aktywujesz wciskając Ctrl+Shift+M.

Istnieją też bezpłatne dodatki do przeglądarek oraz osobne narzędzia zapewniające podgląd na wielu urządzeniach. Znajdziesz je w sklepach z dodatkami danej przeglądarki.

We FreshMailu również posiadamy możliwość podglądu email na różnych urządzeniach.

Trick 3 – Nowe formaty multimediów

Grafiki cyfrowe dzielimy na rastrowe i wektorowe. Obrazy w formatach wektorowych mają rozszerzenia takie jak .svg, .ai czy .eps. Wiele programów graficznych zapisuje w nich projekty, natomiast w kontekście Internetu najbardziej interesujący jest zdecydowanie format SVG.

Obrazy zapisane w tym formacie cechują się małym rozmiarem pliku i znakomitą skalowalnością. Wyglądają dobrze zarówno po powiększeniu, jak i po pomniejszeniu. Wszystkie nowoczesne przeglądarki na szczęście już go obsługują.

Przy bardziej tradycyjnych multimediach, staraj się zapisywać obrazy w formacie .png zamiast .jpg. PNG zawiera więcej danych i stosuje bezstratną kompresję – w efekcie jego skalowanie przynosi lepsze wizualnie rezultaty. Użycie formatu JPG przy zmianie rozmiaru często powoduje tzw. ziarno, czyli regularne kropki widoczne na całym obrazie. Istniejące zdjęcia i obrazki możesz przekonwertować za darmo w dowolnym programie graficznym, po prostu otwierając je i zapisując w nowym formacie. 

Warto również pamiętać, że zarówno SVG jak i .png są lżejsze, a więc zwiększają prawdopodobieństwo, że nie trafisz do skrzynki SPAMu i zwiększysz swoją dostarczalność.

Trick 4 – Wyślij maila najpierw do siebie

Przy kampaniach email marketingowych spróbuj najpierw wysłać wiadomość do siebie lub współpracowników. Zobacz ją na Waszych urządzeniach, a jeśli nie masz zbyt wielu pod ręką, skorzystaj z naszego Tricku 2 i wykorzystaj emulację.

W ten sposób upewnisz się, jak Twoje treści wyglądają na różnych ekranach przed wysyłką do faktycznych odbiorców.

Narzędzia do email marketingu oferują często taką opcję jako krok przy tworzeniu kampanii. We. FreshMailu pokazujemy też podgląd na różnych urządzeniach od razu na ekranie tworzenia kampanii.

Trick 5 – Uwzględnij Outlooka

Istnieje specjalny typ oprogramowania, który służy do odbierania i wysyłania wiadomości – tzw. klient poczty elektronicznej. Najbardziej znanym jest Microsoft Outlook, często spotyka się także ThunderBirda czy iMail.

Niestety, aplikacje te bardzo różnie podchodzą do tematu renderowania, czyli przetwarzania kodu HTML i CSS na obraz widoczny na ekranie. Outlook nie używa silnika Edge ani Internet Explorera, tylko Microsoft Worda, który nigdy nie był projektowany jako czytnik emaili i czasem jest to widoczne.

Kiedy zamawiasz lub tworzysz własne szablony emaili, zadbaj o to, aby wiadomości dobrze wyglądały w Outlooku. Jeśli korzystasz z platform email marketingowych, przy wyborze sprawdź czy oferują szablony dostosowane pod Outlooka. 

Na wiadomościach dostosowanych pod klientów poczty czasem mogą występować drobne różnice – nie ma w tym nic złego! Chodzi jedynie o to, aby wszystko mieściło się na ekranie i wyglądało estetycznie. Jeśli temat Cię interesuje, koniecznie zajrzyj do naszego artykułu o Outlooku i jego specyfice. 

Trick 6 – Mierz siły na zamiary

Na świecie jest już ponad 24,000 modeli smartfonów z Androidem. Doliczając różne modele komputerów oraz sprzęty firmy Apple, można zdecydowanie stwierdzić, że jest ich zbyt wiele do samodzielnych testów na każdym.

Sprawę ułatwia nieco standaryzacja rozdzielczości ekranu, których jest – tylko lub aż – 55 popularnych. Nawet odrzucając te starsze lub stworzone pod telewizję, musisz stale pamiętać od kilkunastu do kilkudziesięciu różnych rozdzielczościach.

Wybierając dobrej klasy platformę email marketingową, skorzystasz nie tylko z możliwości budowania list subskrybentów, ale także z wbudowanych szablonów. Ich wygląd może być różny – istotne jest to, że pracują nad nimi latami profesjonalni programiści. Mądrze wybrane narzędzie email marketingowe pozwoli Ci nie przejmować się zbytnio responsywnością czy Outlookiem.  

Podsumowanie.

• Responsywność oznacza poprawne skalowanie się Twoich treści na różnych rozdzielczościach ekranów.
• Warto testować maile na wielu urządzeniach, fizycznych lub emulowanych.
• We FreshMailu posiadamy wbudowany podgląd na ekranie kampanii.
• Dobrym pomysłem jest stosowanie formatów PNG i SVG zamiast JPG, ponieważ lepiej się skalują.
• Zadbaj, aby Twoje szablony lub narzędzie do email marketingu obsługiwało popularne klienty poczty jak np. Outlook.