Hardcore Responsive Web Design

Responsywne wiadomości w Email Marketingu

Kiedy boli Cię ząb, idziesz do dentysty. Specjalisty, który ma Ci pomóc. W końcu sam bolącego zęba sobie nie wyrwiesz? Siadasz na fotelu, nie zadajesz zbędnych pytań, nie proponujesz własnej metody leczenia. Czekasz na efekty…

Można powiedzieć, że podobny model zachowań obowiązuje w naszej relacji z Klientem. Trzeba przyznać, że powierzając nam swój biznes, obdarzają dużym kredytem zaufania. W zamian staramy się dać najwyższej jakości ekspertyzę na podstawie badań, zdobytej wiedzy i codziennych doświadczeń. Szczególnie dumni jesteśmy w chwilach gdy skuteczne i modne technologie udaje się przenieść ze świata web designu na specyficzną dziedzinę email marketingu.

Responsive Web Design, o którym dzisiaj chcemy napisać szerzej, jest właśnie jedną z tych idei, która w ostatnich miesiącach zawładnęła umysłami webdeveloperów na całym świecie. W Polsce jeszcze raczkuje, ale to tylko kwestia czasu, kiedy projektowanie responsywne stanie się punktem wyjścia dla wszystkich twórców stron WWW i specjalistów od emali marketingu również w naszym kraju. Sprawdźmy więc - o co w tym wszystkim chodzi.

O co więc chodzi? Czym jest responsive web design?

Jedną z wielu zalet RWD jest m.in. wyeliminowanie uciążliwego przybliżania i oddalania oraz konieczność przewijania treści w osi poziomej.

Responsive Web Design to sposób konstruowania stron internetowych tak, aby witryna dynamicznie i automatycznie dopasowywała się do mobile'u. Ta technika jest odpowiedzią na ciągły wzrost udziału urządzeń przenośnych, za pomocą których Polacy używają Internetu a w szczególności zyskuje na znaczeniu w momencie, gdy nastała moda na bycie ciągle "online" bez względu na porę, lokalizację czy urządzenia, jakie w danym momencie mamy pod ręką.

Głównym założeniem projektowania responsywnego jest stworzenie takiego szablonu strony www czy aplikacji webowej, który automatycznie dostosowuje rozdzielczość ekranu w urządzeniu odbiorcy, a następnie formatuje treść w taki sposób, aby jej oglądanie było komfortowe i odpowiadało skali i kształtowi sprzętu. Wszystko zgodnie z zasadami user experience, w myśl których RWD będzie dostarczać użytkownikowi pozytywnych wrażeń estetycznych i funkcjonalnych.

Najczęstsze zabiegi RWD stosowane dla małych ekranów


zmiana sposobu wyświetlania menu

powiększenie elementów klikalnych, zarówno tekstowych jak i przycisków, aby można było łatwo trafić w nie palcem

schowanie zbędnych elementów odwracających uwagę lub zajmujących zbyt dużo miejsca

pomniejszenie dużych obrazów lub wyświetlenie odmiennej ich wersji dla małego ekranu

Kiedy używamy technik Responsive Web Design?

Z punktu widzenia kierunku, w jakim zmierza rynek oraz tendencji w projektowaniu, można by powiedzieć, że każdy nowy projekt powinien mieć wersję responsywną swojej strony internetowej oraz newsletterów.

Dlatego jeśli dopiero startujesz ze swoim projektem, powinieneś rozważyć opcję zastosowania w projektowaniu szablonu responsywnego. Dobrze zaplanowane wdrożenie RWD może bowiem sprawić, że marka będzie postrzegana jako nowoczesna, idąca z duchem czasu oraz dbająca o swojego odbiorcę. Jeśli więc zastosujesz się do wytycznych stosowanych w responsive web designie, pamiętając oczywiście o podstawowych zasadach stosowanych w email marketingu, istnieje duże prawdopodobieństwo, że Twój newsletter będzie postrzegany jako wzorcowy.

Zanim jednak podejmiemy decyzję o tym, czy chcemy zastosować RWD u siebie, dokonujemy analizy budżetu. Kiedy bowiem wdrażamy nowy system – w tym przypadku oparty na responsive web designie - pamiętajmy, że stworzenie i wprowadzenie jakiegokolwiek projektu będzie wymagało zwiększonego nakładu pracy, czasu i ilości testów. Dlatego jeżeli chcemy zrewitalizować istniejącą stronę internetową lub newsletter, warto najpierw sprawdzić udział użytkowników mobilnych i na tej podstawie dopiero stwierdzić, czy takie wdrożenie jest potrzebne.

Jeżeli jednak tworzymy projekt od podstaw, warto od razu postawić na responsywność - tak, aby odbiorca końcowy mógł wyświetlać i nawigować w łatwy i niezakłócony sposób od swojego pierwszego kontaktu z newsletterem czy stroną internetową - niezależnie od tego, z jakiego urządzenie korzysta. Wczesne podejście RWD choć z początku wygeneruje nieco wyższe koszty, za pewne będzie bardziej przyszłościowe i uniwersalne.

Czy warto stosować RWD w email marketingu?

Jak zawsze, kiedy zastanawiamy się nad zastosowaniem innowacyjnego i mało znanego rozwiązania, w naturalny sposób pojawia się pytanie - czy tego rodzaju zabiegi są nam w ogóle potrzebne? Chcąc znaleźć satysfakcjonującą odpowiedź, najlepiej sięgnąć do badań.


Jak pokazują światowe statystyki, tendencja jest wyraźna - czytanie poczty przenosi się na urządzenia mobilne. Dane pokazują, że łącznie urządzenia mobilne przewyższyły otwarcia wiadomości w aplikacjach dla desktop już w kwietniu 2012 roku. Należy jednak mieć na uwadze fakt, że przedstawione dane nie wykluczają sytuacji, że ten sam użytkownik sprawdził wiadomość kilka razy.

A więc, ten sam użytkownik mógł obejrzeć tą samą wiadomość, korzystając ze smartphona, aby potem wrócić do niej w pracy lub w domu na większym sprzęcie. Z badań przeprowadzonych przez firmę Litmus, w maju 2013 roku w przypadku pierwszej dziesiątki najczęściej używanych klientów poczty, aż 42% to otwarcia na urządzeniach mobilnych.

Jakich technik używać,
aby przygotować responsywny newsletter?

Po pierwsze Media Queries

Ta technika nadaje się do kodowania emaili podobnie jak do zastosowań typowych stron www. Jednak w przypadku mailingów liczymy się z ograniczeniami tego rozwiązania. Nie możemy użyć media query w nagłówku (head), ponieważ część klientów pocztowych automatycznie usuwa lub ignoruje ten fragment. Ciekawostką jest fakt, że media queries pratkycznie nie jest obsługiwane na popularnym w Polsce Windows Phone.

Podsumowując, ta technika jest przydatna aby wyświetlić wersję mobilną przystosowaną do wielkości mniejszych urządzeń, jednak pamiętajmy o projekcie wersji desktop, która musi uwzględniać, że mailing będzie wyświetlany na części smartphone'ów tak samo jak na desktopie.

Float nieobsługiwany

Jak wiemy, w mailingach nie stosujemy reguły float a wszystkie struktury kolumnowe musimy oprzeć na tabelach. Brak obsługi float można ominąć stosując <table align=left>. Tabele z tym atrybutem umieszczamy wtedy w komórce trzymającej treść. Aby sprawić, żeby tak wypozycjonowane tabele, znajdujące się obok siebie, ustawiły się jedna pod drugą, należy zmienić szerokość tabeli-rodzica za pomocą media-query.

W ten właśnie sposób skonstruowany jest mechanizm wyświetlania zdjęć z produktami w newsletterze Vero Stilo - klienta Sendingo, u którego po raz pierwszy zastosowaliśmy szablon oparty na idei Responsive Web Design.

Problemy z iOS

Możemy spotkać się z sytuacją, że nasza wiadomość zostanie wyświetlona tylko w części na urządzeniach Apple. Związane jest to z konfiguracją skrzynki w trybie POP oraz charakterystycznym błędem w tym systemie, który nie został usunięty również w ostatniej jego wersji. Efekt jest taki, że wiadomość zostaje wyświetlona tylko częściowo. Aby poprawnie odczytać email na urządzeniach mobilnych pod iOS, należy upewnić się, że sekcja <head> włącznie z kończącym tagiem </head> zawiera przynajmniej 1024 znaki. W tym celu można użyć pustej przestrzeni, lecz polecamy utworzyć klasę z fikcyjnym kodem css, której po prostu nie przypiszemy do żadnego z elementów kodu HTML, dzięki czemu kod nagłówka osiąga wymaganą objętość.

Newsletter RWD dla Vero Stilo

Kodowanie wiadomości na potrzeby email marketingu jest wystarczająco utrudnione ze względu na bardzo ograniczone wsparcie różnych aplikacji pocztowych dla kodu HTML oraz CSS. Co się jednak stanie, gdy dorzucimy do tego Responsive Web Design? W Sendingo mieliśmy okazję to sprawdzić. Wszystko zaczęło się w chwili, kiedy w agencji pojawił się nowy klient - firma Vero Stilo Leather z Wrocławia.

Przygotowania

Była to pierwsza w Sendingo próba przygotowania mailngu w technice RWD. Należało zatem zadbać o odpowiednie przygotowanie merytoryczne. Częściowo skorzystaliśmy z wczesnych eksperymentów takich firm jak Campaign Monitor, Email on Acid czy Zurb dzięki czemu wiedzieliśmy, jaki kierunek obrać. Trendy w kodowaniu w większości wyznaczane są dokonaniami zachodnich agencji interaktywnych. Warto więc śledzić, kto jest prekursorem najlepszych praktyk i na bieżąco śledzić wydawane przez nich publikacje. Nie warto w tym celu śledzić polskich źródeł ponieważ nasi specjaliści adaptują się do nowych trendów z co najmniej kilkumiesięcznym opóźnieniem.

Koncepcja

Pierwotny projekt nie był tworzony wg założeń metodologii RWD i okazał się dosyć trudny w implementacji. Luźne ramy czasowe pozwoliły jednak na serię eksperymentów. Zdecydowaliśmy, aby pomimo braku przygotowanego specyficznego projektu graficznego, zakodować i przystosować ten projekt dla potrzeb mobilnych klientów e-mail. Z tej przyczyny metoda naszych działań polegała na stworzeniu testowego elementu i szybkim testowaniu w klientach pocztowych. Z początku staraliśmy się odpowiedzieć na pytanie, co da się zrobić, a czego nie? W kolejnym etapie pozbywaliśmy się konkretnych błędów i dopieszczaliśmy detale w najbardziej problematycznych aplikacjach pocztowych.

Problemy

Aby uruchomić procedurę testów, konieczne jest posiadanie własnej bazy skrzynek i urządzeń testowych, które pozwolą szybko ocenić, czy kod działa tak, jak zaplanowaliśmy. Jednak nie zawsze mamy dostęp do wszystkich urządzeń, które chcielibyśmy sprawdzić. Trzeba wtedy zdać się na automatyczne parsowanie kodu zgodnie z regułami danego klienta pocztowego. Co jeszcze? Ze względu na brak wsparcia różnych atrybutów przez niektóre aplikacje pocztowe, funkcjonalność RWD może uniemożliwić w pewnych miejscach zachowanie idealnej zgodności z pierwotnym projektem. Zarówno zespół produkcyjny, jak i Klient muszą mieć tego świadomość wykazując nieco elastyczności w swoich oczekiwaniach.

 

Testy

Zawsze w przypadku przygotowywania nowego newslettera należy przyłożyć się do testów - szczególnie, kiedy w grę wchodzi nowy szablon tworzony w technice responsive design. Ilość testów i czasu, który należy temu poświęcić, znacząco się zwiększa.

W przypadku użycia <table align="left"> zwracamy uwagę na formatowanie maila w programach Outlook 2007/2010/2013, gdyż sprawiają one najwięcej problemów. Pomiędzy tabelami z parametrem align="left" Outlook dodaje przestrzeń, którą trudno wyeliminować. Czasami będzie to praktycznie niemożliwe. Dlatego należy wziąć to pod uwagę już podczas projektowania graficznego newslettera.

Działanie align="left" w Outlookach wymaga także użycia poniższego kodu, który pozwoli układać się zagnieżdżonym tabelom obok siebie, zgodnie z naszym zamierzeniem.

<p style="mso-table-lspace: 0; 
          mso-table-rspace: 0;">
    ...Zawartość komórki...
</p>

Powyższy kod należy dodać w każdej pierwszej komórce tabel z parametrem "align=left". Warto także upewnić się, że będzie to działać jak należy i umieścić poniższy kod w sekcji <head>:

table {
    border-collapse: collapse; 
    mso-table-lspace: 0px; 
    mso-table-rspace: 0px;
}

Kolejną ważną rzeczą, o której można zapomnieć przy kodowaniu newslettera, jest przełamanie strony dla druku, którą Outlook wstawia sam z siebie, jeżeli element jest zbyt duży. Wysokość, przy której nastąpi przełamanie elementu to 23,7 cala, czyli około 1790px. Przy dużej ilości produktów lub treści do przedstawienia, ta właściwość Outlooka może błędnie wskazywać, iż problem leży w naszym responsywnym kodzie. Jak rozwiązać ten problem? Bardzo prosto. Należy często zamykać i otwierać nową tabelę, służącą nam za wrapper lub container dla treści.

screenshoty

Podsumowanie

W dobie olbrzymiej ilości urządzeń o różnych przekątnych ekranów, powiększającej się ilości użytkowników tabletów oraz telefonów o większych ekranach, responsywny newsletter jest rozwiązaniem bardzo praktycznym. Dzięki RWD łatwiej osiągnąć nienaganne usability, user experience i estetyczną spójność. To podstawowe kryteria, jakimi musimy się kierować, projektując responsywne szablony newsletterów.

Największym błędem byłoby przekierowanie odbiorcy do skomplikowanej strony, nieprzygotowanej w żaden sposób do łatwego nawigowania w urządzeniu mobilnym. Responsywny newsletter powinien więc funkcjonować jako część większej całości. Kierować do responsywnej treści: czy to landing page'a czy sklepu internetowego. W ten sposób pokażemy, że myślimy o naszym końcowym odbiorcy i dbamy o jego komfort.

Bibliografia

  1. Applying fluid layouts to HTML email design, [w:] Campaing Monitor
    http://www.campaignmonitor.com/blog/post/3564/applying-fluid-layouts-to-html-email-design/
    Dostęp z dnia 15 czerwca 2013
  2. Chapman C., Creating HTML Emails: An Overview for Web Designers
    http://sixrevisions.com/web_design/creating-html-emails
    Dostęp z dnia 23 lipca 2013
  3. Email Client Market Share
    http://emailclientmarketshare.com/
    Dostęp z dnia 18 czerwca 2013
  4. Jordan J., Email Client Market Share: New Stats
    https://litmus.com/blog/email-client-market-share-stats-infographic-june-2012
    Dostęp z dnia 22 czerwca 2013
  5. Klann M., Emailology: Two Ways to Ensure that Your Entire Email Is Rendered by Default in the iPhone & iPad
    http://www.emailonacid.com/blog/details/C13/ensure_that_your_entire_email_is_rendered_by_default_in_the_iphone_ipad
    Dostęp z dnia 15 lipca 2013
  6. Kubiak A. Responsive Email Templates
    http://www.slideshare.net/sendingo/responsive-email-templates
    Dostęp z dnia 23 lipca 2013
  7. Multi-line Personalization Help, [w:] Campaign Monitor
    https://www.campaignmonitor.com/forums/viewtopic.php?id=5460
    Dostęp z dnia 1 czerwca 2013
  8. Responsive email design, Optimizing images for mobile
    http://www.campaignmonitor.com/guides/mobile/optimizing-images/
    Dostep z dnia 20 czerwca 2013
  9. Ross E., Build responsive emailsm
    http://www.netmagazine.com/tutorials/build-responsive-emails
    Dostęp z dnia 1 lipca 2013
  10. The inconvenient truth about div tags in HTML emails
    http://www.campaignmonitor.com/blog/post/3472/div-tags-in-html-email-newsletters/
    Dostęp z dnia 3 czerwca 2013

Chcesz sprawdzić jakie techniki email marketingowe pomogą efektywności Twojego sklepu? Umów się na kilkutygodniowy pilotaż obsługi email marketingowej i zobacz ile dodatkowej sprzedaży uda Ci się wygenerować.