Responsive Design (RWD) - jak zrobić to dobrze? | Blog X-Coding
responsive-design-dlaczego-to-najlepsza-opcja-dla-ciebie-i-jak-zrobic-to-dobrze

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

3.01.2015 / / E-Commerce

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 używa ich w celach zakupowych. Taki trend jest doskonale wykorzystywany przez właścicieli sklepów internetowych w Stanach, gdzie rok w rok 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ąć sprzedaż w kanale mobilnym, zmuszony był do wykonania dedykowanej aplikacji. Niestety, wiąże się to ze 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ło, ż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 w tym zakresie rynek polski działa zdecydowanie wolniej 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 wielu firmom otworzyło drzwi do sprzedaży wielokanałowej, z drugiej strony spowodowało pojawienie się ogromnej liczby niskiej jakości sklepów mobilnych: działają one wolno, 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 e-Commercó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 wynosi 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 ewentualnym ryzyku. Co najważniejsze, trzeba dokładnie przeanalizować system, który będzie przerabiany na wersję 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. Niezbędna jest bliska współpraca pomiędzy deweloperami a zespołem, który będzie projektować 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 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 użytkownicy 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, aby uzyskać system przyjazny klientom. Dlatego też niezbędna staje się odpowiedź 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. Jak można było się spodziewać, było tylko kwestią czasu, aż zdecydują się na wejście 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 przypisanymi do nich opisami.

W efekcie po 2 latach od wprowadzenia sklepu w technologii RWD firma osiągnęła niemały sukces, o czym świadczą 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);