03 / 01 / 2015 eCommerce

Responsive Design: Dlaczego to najlepsza opcja dla Ciebie i jak zrobić to dobrze?

Gwałtowny wzrost liczby smartfonów i tabletów obserwowany na przełomie ostatnich lat sprawia, że RWD (Responsive Web Design, czyli dynamiczne dostosowanie strony do rozdzielczości przeglądarki i urządzenia) staje się jedną z najlepszych opcji dla sprzedawców na wejście w sprzedaż wielokanałową. Nie można w dzisiejszych czasach ograniczyć się tylko do oferowania swoich produktów użytkownikom komputerów stacjonarnych i laptopów, ponieważ wtedy zamykają się drzwi do ogromnego rynku sprzedaży realizowanej przez smartfony i tablety.

Opierając się na danych Internet Retailers, 261 milionów konsumentów w USA posiada smartfony, a ponad 66 milionów wykorzystuje je do dokonywania zakupów. Taki trend jest doskonale wykorzystywany przez właścicieli sklepów internetowych w Stanach, gdzie rok do roku liczba sklepów, które wyświetlają się prawidłowo na urządzeniach mobilnych rośnie o 159%. Jeszcze kilka lat temu, przedsiębiorca jeśli chciał rozpocząć sprzedawać w kanale mobilnym, zmuszony był do wykonania dedykowanej aplikacji. Niestety, wiąże się to z znacznymi kosztami, nie tylko wdrożenia, ale także obsługi i utrzymania oprogramowania. Wprowadzenie RWD, która w sposób znaczący obniżyła inwestycję przeniesienia sprzedaży na urządzenia mobilne spowodowała, że za oceanem klienci zakochali się w stronach responsywnych. W dzisiejszych czasach nikt nie wyobraża sobie stworzenia tam sklepu tylko w wersji „desktopowej”. Niestety rynek Polski dociera się powoli w tym zakresie i wzrost liczby sklepów w wersji mobilnej jest znacznie mniej odczuwalny, niż ma to miejsce w Europie Zachodniej i Stanach Zjednoczonych.

Wprowadzenie RWD, oprócz tego że otworzyło drzwi wielu firmom do sprzedaży wielokanałowej, z drugiej spowodowało pojawienie się ogromnej liczby niskiej jakości sklepów mobilnych: wolno działają, a UX w ogóle tam nie istnieje. Firma Mooveweb po przeanalizowaniu 12 największych platform sprzedażowych w Stanach potwierdziła, że większość dostępnych wersji mobilnych tych eCommerców jest słabej jakości. Wydajność pracy strony sklepu na urządzaniach mobilnych jest o 513% gorsza niż na tradycyjnych komputerach, a średni czas ładowania strony wyniósł 18.24 sekundy, gdzie akceptowaną praktyką rynkową jest czas poniżej 3 sekund.

Optymalizacją pod RWD: Zanim zaczniesz.

Podczas ostatniego webinaru sponsorowanego przez Internet Retailers (link) Mark Grannan, analityk z firmy Forrester Research Inc. podkreślał niejednokrotnie, że dobre wdrożenie technologii RWD w sklepie rozpoczyna się od etapu analizy biznesowej i systemowej. Podczas wykonywania takiego badania należy skupić się przede wszystkim na ruchu generowanym w sklepie przez różne urządzenia oraz ewentualnych ryzykach, jakie mogą pojawić. Co najważniejsze, trzeba dokładnie przeanalizować system, który będzie przerabiany na wersje responsywną. Jeśli te kroki nie zostaną wykonane, to z dużym prawdopodobieństwem wdrożona mobilna wersja sklepu będzie bardzo niskiej jakości i wydajności. Dlatego też niezbędna staje się w tym momencie bliska współpraca pomiędzy deweloperami a zespołem projektowym, który musi zaprojektować interakcje w mobilnej odsłonie sklepu. Efektywna współpraca pomiędzy tymi działami może w znaczącym stopniu skrócić czas wprowadzenia rozwiązania na rynek.

Optymalizacja pod RWD: Prześledź podróż klienta

Optymalizacja Twojej strony/sklepu dostępnego na większość urządzeń na rynku, musi rozpocząć się od wysłuchania/analizy zachowania Twoich klientów w serwisie.

  • Jaki procent ruchu generowanego na stronie pochodzi z urządzeń innych niż PC/laptop? Większość sprzedawców zauważa obecnie że 20-30% ruchu generowanego w sklepie pochodzi z urządzeń mobilnych (smartfon/ tablet).
  • Jak wchodzą na Twoją stronę/sklep? Tutaj wskaźniki globalnie nie są tak ważne, najistotniejsze są informacje z Twoich statystyk (np. Google Analytics) oraz od klientów.
  • Z jakich urządzeń/ przeglądarek najczęściej korzystają? Informacja ta jest bardzo ważna, ponieważ należy mieć cały czas w głowie informację, że sklep/strona wykonana w technologii RWD, niekoniecznie będzie kompatybilna ze starszymi przeglądarkami internetowymi np. IE8.

Optymalizacją pod RWD: Strategia zawartości

Przygotowanie odpowiedniego contentu na responsywną wersję strony jest jednym z największych wyzwań, przed którymi muszą stanąć właściciele sklepów. Dlatego też coraz częściej o projektowaniu strony/sklepu w wersji reponsywnej mówi się w kontekście budowania contentu niż grafiki. Budowanie mobilnej wersji strony w technologii RWD zmusza do dokładnej analizy, jakie interakcje z użytkownikami chcemy umieścić na małym ekranie smartfona, tak aby były przyjazne klientom. Dlatego też niezbędne staje się odpowiedzenie na pytanie, co moi klienci chcieliby zobaczyć na tym ekranie, a nie co ja chciałbym im przekazać. Jest to często spotykany błąd, kiedy sprzedawcy skupiają się na celach handlowych, a nie na tym, jakie informacje potrzebuje zobaczyć na stronie klient. Niestety podobnie jak w przypadku sklepów w pełnych wersjach, tak i w wersjach mobilnych efektem braku takiej wiedzy staje się wprowadzenie zbyt dużej ilości informacji klientowi, co utrudnia mu dotarcie do interesującej go treści, a w konsekwencji do zakupu produktu lub usługi.

Czas na Responsywność: Skinny Ties case study

Skinny Ties jest jednym z największych sprzedawców krawatów w Stanach Zjednoczonych i zarazem jednym z pierwszych, który zdecydował się na przeniesienie sprzedaży do sieci. Tak jak można było się spodziewać, było tylko kwestią czasu aż zdecydują się na wprowadzenie swojej sprzedaży w świat urządzeń mobilnych, co też wydarzyło się w roku 2012. To co stanowiło największe wyzwanie, przed którym stanęli projektanci serwisu w wersji mobilnej, to jak najciekawsze zaprezentowanie krawatów na małych ekranach smartfonów. W celu jak najefektywniejszego rozwiązania tego problemu została wprowadzona dynamiczna taksonomia dla każdego produktu. Dzięki takiemu rozwiązaniu udało się zachować harmonię pomiędzy wyświetlanymi produktami, a opisami przypisanymi do nich.

W efekcie po 2 latach od wprowadzenia sklepu w technologii RWD, firma osiągnęła niemały sukces o czym mogą świadczyć poniższe dane:

  • 58% wzrost ilości transakcji rok do roku;
  • 20,8% wzrost średniej wartości koszyka zakupowego;
  • 187% wzrost sprzedaży generowanej z urządzeń z systemem Android w roku 2012;
  • 224% wzrost sprzedaży generowanej z iPadów w roku 2012;
  • 437% wzrost sprzedaży generowanej przez iPhony w roku 2012;

Dodatkowe informacje

  1. Internet Retailer [webinar] – 23 Czerwiec 2014: Steps to Achieving Responsive Web Design Success (http://www.magentocommerce.com/media/webinars/internet-retailer-steps-to-achieving-responsive-web-design-success);
  2. Forrester Research – 16 styczeń 2014: Six Responsive Website Project Pitfalls And The Best Practices For How To Avoid Them (http://www.forrester.com/Six+Responsive+Website+Project+Pitfalls+And+The+Best+Practices+For+How+To+Avoid+Them/fulltext/-/E-RES110721?intcmp=blog:forrlink);
  3. Internet Retailer – 2 Maja 2013: Skinny Ties gets a 211% bump in mobile sales with its responsive design site (http://www.internetretailer.com/2013/05/02/skinny-ties-gets-211-bump-mobile-sales-its-responsive)
  4. Moovweb [webinar] – Czerwiec 2014: 8 Ways to Improve Performance of Your Responsive Site (http://www.moovweb.com/webinars/improve-performance/);
  5. Magento Blog – 13 Maj 2014: Magento Enables Responsive Sites in Half the Time (http://magento.com/blog/magento-news/magento-enables-responsive-sites-half-time#.U9-hQ1ZQbeM);
FacebookTwitterGoogle+LinkedIn