Gdy nie było smatfonów i tabletów, a strony internetowe przeglądało się na komputerach stacjonarnych i czasem na laptopach, nikt nie zastanawiał się nad dopasowaniem wyświetlanej strony do urządzenia. Świat e-commerce wydawał się wtedy łatwiejszy i bardziej przyjazny dla sprzedawcy. Klienci nieposiadający zbyt dużej alternatywy, kupowali towary w sklepach internetowych, które nie zawsze wyglądy idealnie. Kupujący nie zwracał uwagi na samą otoczkę, która teraz jest bardzo ważna, ale na towar, jego cenę i dostępność. Niestety, czasy te minęły.
Dziś dowiesz się:
- co to jest responsive web design,
– czy należy budować sklep z tą opcją,
- jakie nakłady trzeba ponieść na wdrożenie,
– co zyskujesz dzięki responsive web design.
Nadeszła era m-commerce, czyli zakupów dokonywanych poprzez telefony i tablety. Jak bardzo rozrasta się ta forma sprzedaży? Wystarczy przejrzeć raporty i prognozy, pojawiające się w sieci, które publikuje między innymi Forrester Research. Mobilność dała użytkownikom możliwość kupowania produktów w dowolnym miejscu i o dowolnym czasie. Zadaniem właściciela sklepu internetowego jest dać kupującemu taką stronę, która pozwoli mu wykonać tą czynność bez żadnych problemów. Aby tak się stało należy skorzystać z możliwości, jakie daje RWD.
Responsive web design czyli co?
Jest to termin który narodził się w 2010 roku, a jego ojcem był Ethan Marcotte. RWD czyli Responsive Web Design to metoda tworzenia stron, opierająca się na wykorzystywaniu rozszerzenia Media Queries dostępnego w CSS3. Nie będziemy się jednak zagłębiać w techniczne zagadnienia, a skupimy się na finalnym produkcie, jego właściwościach i korzyściach, jakie przynosi. Mówiąc najprostszym językiem: każdy sklep lub strona wykorzystująca RWD wyświetli się poprawnie, niezależnie do tego z jakiego urządzenia będzie korzystał kupujący. Najlepszym przykładem może być poniższa grafika:
Jak nietrudno zauważyć pomimo, iż oglądamy jeden sklep, to wyświetla się on inaczej na każdym z urządzeń, jednocześnie zachowana jest cała zawartość prezentowana na stronie. W powyższym przykładzie w przypadku komputera widzimy cztery produkty w rzędzie, na tablecie trzy, a na telefonie jeden. Dzięki zastosowanemu rozwiązaniu przeglądana strona „nie rozjedzie się” na żadnym urządzeniu, co za tym idzie – klient nie przeoczy interesującego go produktu, a nawigacja po stronie odbywa się w sposób prosty i intuicyjny.
Skala responsive web design
Jak podają raporty 25% amerykańskich sklepów internetowych wykorzystuje technologię RWD. 25% wydaje się niewielką liczbą, ale gdy popatrzymy globalnie może się okazać, że ten procent jest jeszcze większy. Marki decydują się na to rozwiązanie dlatego, iż wzrasta rynek m-commerce. Z roku na rok jego wartość rośnie w zatrważającym tempie. Jeśli popatrzymy na strony sklepów, które zastosowały RWD oraz na ich „mobilnych” konkurentów, zobaczymy jak duża przepaść dzieli te dwa rozwiązania.
Za wdrożeniem rozwiązań wykorzystujących responsywność przemawiają liczby, które znaleźć możemy w badaniach, między innymi od Gemius. Okazuje się że 72% właścicieli tabletów robi przy ich pomocy zakupy internetowe przynajmniej raz w tygodniu. Ponad 40% ruchu na allegro pochodzi z urządzeń mobilnych, a co najważniejsze – 80% użytkowników urządzeń mobilnych opuszcza sklep, jeśli nie jest on dopasowany do urządzeń mobilnych.
W teorii możemy zrezygnować z Responsive Web Design i skorzystać z dedykowanej aplikacji lub mobilnej wersji strony (m.strona). Oba rozwiązania mają swoje plusy i minusy, zaczynają jednak oddawać rynek na rzecz responsywności. Między innymi dlatego, że koszt oraz czas wdrożenia, potrafią być większe, niż w przypadku wdrożeń RWD. Oczywiście, to rozwiązanie ma swoje słabsze punkty, lecz gdy zestawimy je z plusami – dość szybko zdamy sobie sprawę, iż są one błahe.
Zalety Responsive Web Design
– automatyczne dostosowanie do wszystkich urządzeń. W ten sposób nie będziemy mieć problemu w momencie pojawienia się nowych telefonów i tabletów. Można powiedzieć, iż jesteśmy przygotowani na przyszłość;
- posiadamy tylko jedną stronę, a to wiąże się z niższymi kosztami i szybszą możliwością wprowadzania zmian. Dodatkowo dane zbieramy tylko z jednego źródła;
- strona jest SEOptymalna, więc od razu pozytywnie wpływamy na PageRank;
- łatwość utrzymania strony związana z tym, że został napisany jeden kod i tylko o niego dbamy. To również ma znaczenie przy wprowadzaniu ewentualnych zmian. Wystarczy jedna korekta w kodzie źródłowym i modyfikacja jest widoczna automatycznie na wszystkich urządzeniach.
Wady Responsive Web Design
- czas wdrożenia jest dłuższy od zaprojektowania i wdrożenia strony mobilnej, ale zdecydowanie krótszy od łącznej ilości czasu pracy nad wersją desktopową i mobilną,
- nie wszystkie starsze przeglądarki obsługują rozszerzenia Media Queries, dostępnego w CSS3; dodatkowo bardzo mało internautów korzysta z IE w wersji 6.0.
Jak widać powyżej mamy do czynienia z narzędziem wyjątkowo dobrym i będącym alternatywą dla starzejących się rozwiązań. Jeśli zdecydujesz się na sklep z RWD, to od razu pozbędziesz się kilku problemów. Przede wszystkim zyskasz na pozycjonowaniu. Google bardzo „lubi się” ze responsywnymi stronami. Lider wśród wyszukiwarek wydał nawet specjalne rekomendacje dla webmasterów, w których zalecił stosowanie responsive web design, jako najlepszej praktyki w tworzeniu stron internetowych. Najważniejsze jednak jest to, że przygotujesz się na zmiany, które są tak częste, jeśli chodzi o technologie. Ilość dostępnych na rynku wyświetlaczy, a co za tym idzie rozdzielczości wyświetlanych obrazów, wzrasta z roku na rok. W 2010 było ich 97 w chwili obecnej jest ich już 232, nie ma fizycznej możliwości przygotowania indywidualnych aplikacji dla każdego urządzenia i oprogramowania. Wynika z tego, że responsywność jest obecnie najlepszym rozwiązaniem dla stron i sklepów internetowych.
Tworząc e-sklep myśl o smartfonach
Jeśli zdecydujesz się na wdrożenie e-sklepu wykorzystującego rozwiązania RWD, skorzystaj z pomocy wyspecjalizowanej firmy. Okazuje się, że wiele platform sklepowych zachwala swoje rozwiązania abonamentowe, a gdy dochodzi do wdrożenia – oczekiwania różnią się bardzo od rzeczywistości. To, co dostajesz w abonamencie, jest tylko szkieletem, który trzeba rozbudowywać i dodatkowo za niego płacić. Warto wyszukać firmy, która ma już w swoim portfolio kilkadziesiąt, a może i kilkaset implementacji. Nie musisz się znać na budowie sklepu, ale pamiętaj, że ważnym jest odpowiednie przygotowanie szablonu wyjściowego.
Nowy projekt graficzny internetowego sklepu powinien wydobyć z oferty to, co najbardziej wartościowe. Nie chodzi tu tylko o produkty. Jeśli aktualnie w sklepie oferujemy promocję, organizujemy konkurs, czy podejmujemy inne działania na rzecz przyciągnięcia konsumenta do naszego sklepu, pokażmy ją w pierwszej kolejności. Jeśli w danej chwili w e-sklepie jest wyprzedaż, to w wersji responsywnej na urządzenia mobilne także powinna ona królować. Jeśli chcesz rozdać kupony rabatowe, to muszą być one tak samo widoczne, niezależnie do urządzenia, na którym klient będzie przeglądał stronę.
Wyszkolona i doświadczona firma developerska bez problemu poradzi sobie z tym tematem. Dodatkowo, Ci najlepsi przed wdrożeniem przyprowadzają badania użyteczności (UX), dzięki czemu możesz być pewny, że strona nie tylko zaspokoi Twoje oczekiwania, ale także będzie tym, czego oczekują klienci: stanie się czytelna i intuicyjna. Nie daj się zwieść ceną. Czasami mała oszczędność może spowodować duże szkody.
Warto dodać, że dobry projekt może zwiększyć konwersję w e-sklepie nawet o 26% w porównaniu z erą przed RWD. Dobre zaprojektowanie oznacza:
- nowy layout, uwzględniający nowe wymagania użytkowników, korzystających z urządzeń mobilnych. Wygląd jest bardziej przejrzysty, prosty, a co za tym idzie funkcjonalny;
- nową paginację stron produktów, jaką wprowadza się zamiast standardowej (1, 2, 3, 4…). „Załaduj następne X produktów” sprawdza się lepiej co potwierdzają właściciele sklepów internetowych. Wyraźny button dodatkowo dobrze działa na urządzeniach mobilnych i jest na nich łatwo klikalny;
- nowe menu umieszczone na górze strony, wymuszające od kupującego, by każdą akcję trzeba poprzedzić kliknięciem – nie występuje już „ruchome”, trudno klikalne menu;
- nowy koszyk dopasowany do urządzeń mobilnych.
Co możesz osiągnąć decydując się na wdrożenie sklepu w wersji RWD
- możliwość dotarcia do większej liczby klientów;
– dywersyfikację urządzeń, za pośrednictwem których można odwiedzać Twój sklep;
– szersze spectrum czasowe, w trakcie którego użytkownik może skorzystać z oferty sklepu;
- spójny wygląd strony na każdym urządzeniu, niezależnie od wielkości wyświetlacza;
– lepszą dostępność strony sklepu;
– inny układ strony z tą samą treścią – zdjęcia i opisy produktów – w zależności od wielkości wyświetlacza;
- łatwiejsze poruszanie się po stronie – w pionie, a nie w poziomie;
– łatwe zarządzanie stroną: zmiany wprowadzane do kodu są aktualne dla każdej wersji strony sklepu;
– widok strony dostosowany do potrzeb użytkownika;
– lepszą identyfikację marki e-sklepu;
– analizę dotycząca ruchu na stronie, w zależności od urządzenia, z którego korzysta klient;
– lepszą konwersję.
Podsumowanie
Responsive web design jest ściśle powiązane z m-commerce, a to jest przyszłość zakupów w sieci. Smatfony stały się ogólnodostępne, a ilość zamówień i płatności, pochodzących z urządzeń mobilnych, rośnie z kwartału na kwartał. Sklepy, które pozostaną w tyle i nie wdrożą rozwiązań dla przenośnych urządzeń, mogą nie nadążyć za konkurencją i stracić klientów. Dodatkowo, warto zwrócić uwagę na to, że rynek się zmienia, a do sprzedaży wykorzystywane są coraz to nowsze technologie, takie jak geolokalizacja, social media i spersonalizowane oferty mobilne. Jeśli będziesz na bieżąco z nowościami i trendami, to możesz być pewien, że wyprzedzisz konkurencję przynajmniej o jeden krok.
Co należy zapamiętać?
Strony wykorzystujące RWD są lepiej indeksowane przez Google.
Dzięki Responsive web design budujesz tylko jedną stronę, a to wiąże się z niższymi kosztami i szybszą możliwością wprowadzania zmian.
Zadanie na dziś
Sprawdź jak wyświetlają się na urządzeniach mobilnych trzy dowolne e-sklepy.