Responsive design

Urządzenia mobilne stały się częścią naszej rzeczywistości i zaczynają dominować wśród użytkowników Internetu. Codziennie używamy kilku różnych urządzeń do interakcji (do obsługi poczty, komunikatorów oraz sieci społecznościowych), wyszukiwania informacji, robienia zakupów oraz rozrywki.

Według raportu Polska.Jest.Mobi 2015:

• 58% Polaków powyżej 15 roku życia posiada smartfon
• 21% Polaków powyżej 15 roku życia posiada tablet

Tak duża i stale rosnąca popularność urządzeń o różnej wielkości ekranów sprawia, że przygotowanie projektu strony pod kątem komputerów stacjonarnych oraz jej alternatywnej wersji dla smartfonów nie jest już wystarczające. Strony internetowe powinny automatycznie dopasowywać się do różnych wielkości ekranów urządzeń mobilnych. Właśnie z tą myślą wymyślono koncepcję projektowania stron responsywnych.

Czym jest responsive design?

Responsywny design to podejście do projektowania, które zakłada, że strona dopasuje się do wielkości urządzenia, na którym jest wyświetlana.

Dlaczego potrzebujesz stron responsywnych?

Odpowiedź na to pytanie jest całkiem prosta. Jeżeli chcesz dotrzeć z przekazem do odbiorców, musisz dostosować wygląd wiadomości do urządzeń, z których korzystają. Większość osób sprawdza maile za pomocą urządzeń mobilnych, jak smartfon czy tablet. Twoja rolą jest zapewnienie im wygody korzystania ze strony, bez względu na urządzenie, na którym ją odwiedzają.

Szablon wiadomości oraz dedykowany landing page to najważniejsze elementy kampanii e-mail marketingowej. Jeżeli są one odpowiednio zaprojektowane, użytkownicy są bardziej skłonni do wykonania pożądanej przez Ciebie czynności, np. przejścia do strony docelowej, zapisania się na newsletter, pobrania e-booka czy zakupu produktu.

Responsywny szablon oraz strona docelowa umożliwią użytkownikom wykonanie call to action w dowolnym momencie, na każdym urządzeniu. W dzisiejszych czasach nie możesz sobie pozwolić na utratę użytkowników urządzeń mobilnych.

Efekt ROPO

Obecnie bardzo trudno jest oddzielić zakupy online od offline. Według badania przeprowadzonego niedawno przez firmę Forrester, aż 88% konsumentów szuka informacji o produkcie w Internecie, zanim dokona zakupu w sklepie stacjonarnym. Skrzynka odbiorcza oraz strona internetowa są miejscami, w których konsumenci mogą obejrzeć produkty i zdobyć informacje na ich temat, jednak sprzedaż (konwersja) często ma miejsce w tradycyjnym sklepie.

Odpowiednio zaprojektowany, responsywny e-mail oraz landing page pomoże Ci odwrócić ten proces. Użytkownik korzystający z urządzenia mobilnego może wejść na stronę Twojego produktu w trakcie zakupów w sklepie stacjonarnym i porównać ofertę. Jeżeli zapewnisz najwyższej jakości doświadczenie zakupowe, duży wybór produktów oraz konkurencyjne ceny, będziesz miał duże szanse na zachęcenie klienta do zakupu.

Różnice w doświadczeniu użytkownika na urządzeniach mobilnych i stacjonarnych.

Istnieje kilka podstawowych różnic dotyczących doświadczenia użytkownika na urządzeniach mobilnych i stacjonarnych, o których warto pamiętać podczas projektowania:

1. Rozmiar ekranu jest ograniczony
Na stronie przeznaczonej dla urządzeń mobilnych nie musisz zamieszczać wszystkich informacji – wybierz te najważniejsze. Użytkownicy często opuszczają strony „przeładowane” zbyt dużą ilością elementów.

2. Pisanie sprawia więcej trudności
Konieczność uzupełniania dużej ilości pól może sprawić, że użytkownicy zrezygnują z wypełnienia formularza zapisu. Pola wyboru oraz rozwijane listy mogą okazać się lepszym pomysłem. Pamiętaj, że Twoja strona docelowa powinna ułatwiać proces konwersji.

3. Przyciski są mniejsze
Zgodnie z prawem Fittsa, małe obiekty spowalniają działania użytkownika, ponieważ musi on poświęcić więcej uwagi na ich właściwe wykorzystanie. Zadbaj o to, by Twój projekt był przyjazny dla użytkownika. Dostosuj rozmiar przycisku do wielkości palca, co pozwoli mu szybko wykonać pożądaną akcję.

4. Obrazy ładują się wolniej
Zmniejsz rozmiar obrazów i popraw szybkość ładowania strony. Ograniczysz wykorzystanie procesora i pamięci, które w przeciwnym wypadku musiałyby zostać wykorzystane do zmiany rozdzielczości obrazów.

Najpierw wersja mobilna („Mobile first”)

Projektowanie w pierwszej kolejności z myślą o wersji mobilnej jest ciekawym podejściem. Zakłada ono tzw. progresywne ulepszanie: zaczynasz projekt z myślą o urządzeniu z najmniejszym rozmiarem ekranu i stopniowo rozbudowujesz projekt pod katem większych urządzeń. Ponieważ masz do dyspozycji niewiele przestrzeni, dodajesz do projektu wyłącznie najważniejsze elementy. Takie podejście pozwala uniknąć nadmiaru elementów oraz skutkuje lepszym układem strony i lepszym doświadczeniem użytkownika.

Zwrot z inwestycji

Każdy marketer musi stale mierzyć zwrot z inwestycji (ang. return on investment, ROI). Oto 4 konsekwencje wynikające z zastosowania projektów responsywnych:

1. Ulepszone doświadczenie użytkownika
Użytkownicy mogą korzystać z Twojej strony docelowej z dowolnego miejsca, bez konieczności zwężania okna przeglądarki, skalowania lub skrolowania wiadomości w każdą stronę. Dzięki większym, lepiej rozmieszczonym przyciskom CTA, wiedzą dokładnie, gdzie kliknąć, by wykonać pożądaną akcję.

2. Większy współczynnik konwersji
Zastosowanie responsywnego designu wyraźnie zwiększa współczynnik konwersji. Dzięki dopasowaniu sposobu sprzedaży produktu do tego, jak użytkownicy robią zakupy, możesz zwiększyć obrót. Będziesz wszędzie tam, gdzie są Twoi odbiorcy. Bez względu na to czy właśnie wracają z pracy czy odpoczywają na sofie – Twoja strona jest zawsze do dyspozycji.

3. Większa sprzedaż
Gdy przyciągniesz już uwagę użytkowników urządzeń mobilnych, być może będą oni woleli dokonać zakupu za pomocą laptopa lub komputera stacjonarnego. Responsywne strony wyglądają świetnie na wszystkich urządzeniach, więc jeśli umożliwisz odbiorcy dokonanie zakupu na urządzeniu o większym ekranie, być może zrobi większe zakupy.

4. Lepsze statystyki
Zadbaj o doskonałe doświadczenie użytkownika. Nie będziesz musiał się martwić wysokimi wskaźnikami rezygnacji z subskrypcji lub zgłoszeń wiadomości jako spam.

Wybierz właściwą platformę

Responsywny design jest podstawą skutecznego e-mail marketingu. Wybierając platformę do e-mail marketingu, zwróć uwagę na możliwość szybkiego przygotowania responsywnych szablonów wiadomości oraz landing pages. Wybierz narzędzie, które pozwoli Ci na szybkie przygotowanie projektu, który będzie świetnie wyglądał na każdym urządzeniu.

Zwróć uwagę:

• Responsywny design pozwala na zwiększenie zasięgu kampanii e-mail marketingowych
• Zapewnia najlepsze doświadczenie użytkownika na dowolnym urządzeniu
• Zwiększa zwrot z inwestycji

Dowiedz się więcej na getresponse.pl