Responsywne e-maile

Responsywne e-maile
Znamy już zalety i wady responsywnych stron. Wiemy, że mailingi też korzystają z kodu HTML. Jasne było, że za chwilę pojawią się tacy, którzy będą chcieli tworzyć e-maile, które dopasowują swój wygląd do wielkości ekranu urządzenia, na jakim są prezentowane. Hurra - chciałoby się krzyknąć!
Tomasz Zwierzchoń Tomasz Zwierzchoń
O autorze
1 min czytania 2013-09-30

grafika: fotolia.pl

Niestety (czysta) technika RWD znana ze stron internetowych nie będzie wszędzie działać. Na jednej z konferencji można nawet było usłyszeć takie zdanie, wypowiedziane przez prelegenta — „Jedyny powód, by stosować reposonsive e-mail design to sprawienie radości użytkownikom iPhone’ów” — jako potwierdzenie, że nie warto zaprzątać sobie tym głowy.

Zobacz również

I jeśliby nawet (co nie jest prawdą) mielibyśmy sprawiać radość tylko tej grupie użytkowników, to warto ich mile połechtać. Sprawić by łatwiej im się czytało.

Szczęśliwie inni użytkownicy też mogą się cieszyć z wygodniejszych e-maili.

LinkedIn logo
Na LinkedInie obserwuje nas ponad 100 tys. osób. Jesteś tam z nami?
Obserwuj

Wsparcie dla media queries (podstawy RWD) przedstawiają poniższe tabele:

Słuchaj podcastu NowyMarketing

źródło: www.campaignmonitor.com/guides/mobile

NowyMarketing logo
Mamy newsletter, który rozwija marketing w Polsce. A Ty czytasz?
Rozwijaj się

Czyli część urządzeń i programów pocztowych nie wspiera techniki dopasowania wyglądu. Te urządzenia i programy wyświetlą podstawowy widok e-maila.

Są próby by ten problem obejść.

Dzięki zurb.com/playground/responsive-email-templates możemy cieszyć się „responsywnymi” szablonami tam, gdzie wcześniej było to niemożliwe. Z jednym wyjątkiem, choć istotnym — nie wspierają Outlooka. Choć w komentarzach można doszukać się sposobu i na poradzenie sobie z nim.

Projektowanie responsywnych e-maili

Warto zacząć tak samo jak sugerowałem w poprzednim, nagradzanym 🙂 cyklu, od urządzeń mobilnych.

Projektując na urządzenia mobilne zwróćmy uwagę na:

  • Jedno-kolumnowy układ prezentuje się najczytelniej na smartfonie;
  • Ukrywanie niepotrzebnych elementów. Linki do Twittera czy Facebooka czasami nie są konieczne;
  • Odwrotną piramidę — najważniejsze wiadomości/elementy na górze e-maila. Tak by nie trzeba było przewijać.
  • Wielkość linków i przycisków — Apple zaleca minimum 44 x 44 piksele.

Dodatkowo (uwaga, żargon techniczny):

  • Zwróćmy uwagę na mnogość rozdzielczości (szczególnie w urządzeniach z Androidem). Dobrze pomieszać technikę Fluid z break pointami z media query;
  • Wykorzystajmy lepsze obrazki na urządzeniach z „Retiną”.

Dobry przykład wart jest więcej niż 1000 słów

Warto spojrzeć np. na preview.smartfocusdigital.com. Po wczytaniu sugeruję zmniejszać szerokość przeglądarki (jeśli robimy to na komputerze).

Na koniec

Podsumowując ten mini artykuł. Stosujmy responsywne e-maile. Zależy nam chyba na czytelności i ładnie podanej zawartości, prawda? Nawet jeśli nie wszyscy ją zobaczą. 

—