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.
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.
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.
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.
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.
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.
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ść.
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.
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.
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.
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.
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.
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ć.
Opracowanie: Anastazy Kubiak, Sendingo
Edycja: Hanna Niełacna, Sendingo
Edycja: Jakub Korczyński, Sendingo
Edycja i grafika: Mateusz Tokarski, Sendingo
Copyright © 2013 Sendingo, VeroStilo
