Wersja mobilna, czy RWD

Wersja mobilna czy kodowanie RWD w sklepie internetowym

Wg. statystyk prowadzonych przez Prosklepy od początku roku 2016, średnio aż jeden na pięciu odwiedzających sklep internetowych korzystał ze smartfonu i średnio co dziesiąty odwiedzający korzystał z tabletu. Stosunek odwiedzin za pośrednictwem urządzeń mobilnych do wszystkich odwiedzających z pewnością będzie nadal wzrastać, w obliczu tych faktów konieczne jest zapewnienie zgodności sklepu internetowego z urządzeniami mobilnymi.

Poprzez zgodność rozumiemy, odpowiednie dostosowanie nawigacji sklepu, wielkości fontów i układu treści sklepu tak, aby użytkownik korzystający z urządzenia o małej rozdzielczości ekranu szybko i bezproblemowo mógł poruszać się po stronie. Powinno się maksymalnie uprościć grafikę i ukryć elementy, które nie są niezbędne, a które zajmują niepotrzebnie miejsce w sklepie.

Zgodność można zapewnić na dwa sposoby. Pierwszym z nich jest stworzenie sklepu korzystając z techniki RWD (od. Responsive Web Design). Storna rensponsywna będzie dostosowywać się do wielkości ekranu. Nie mamy na myśli jedynie zwężania i rozciągania, możliwe są w zasadzie dowolne zmiany układu treści, sposobu zachowywania się menu i prezentacji produktów w zależności od tego jaka jest aktualna rozdzielczość okna przeglądarki odwiedzającego sklep. Zmiany te będą widoczne, gdy użytkownik będzie rozszerzać i powiększać okno swojej przeglądarki internetowej, jest to bardzo efektowne.

Drugim sposobem jest stworzenie wersji mobilnej sklepu. Wersja mobilna sklepu to całkowicie niezależna grafika sklepu, która zostanie załadowana tylko w przypadku gdy sklep wykryje iż odwiedzający korzysta ze smartfonów lub ze smarfonu i tabletu (właściciel sklepu sam może zdecydować czy przekierowanie ma być tylko dla smarfonów, czy również dla tabletów).

W prosklepach dzieje się to poprzez automatyczne przekierowanie odwiedzającego na inny adres internetowy pod którym działa wersja mobilna sklepu np. dla domeny „domena.pl” będzie to adres „m.domena.pl”.

W oczach odwiedzającego wersja mobilna na telefonie może nie różnić się graficznie niczym od wersji rensponsywnej, jednak różnica jest zasadnicza od strony technologicznej.

W przypadku technologii RWD, skrypt sklepu zawsze generuje taki sam kod HTML, CSS i JavaScript, Kod JavaScript i CSS kieruje tym w jaki sposób strona ma się wyświetlać użytkownikowi. Kod strony jest "przygotowany" na wiele rożnych rozdzielczości ekranu, a elementy, które nie są potrzebne przy małej rozdzielczości są ukrywane - mimo tego iż zostały one ukryte zostały wcześniej przesłane użytkownikowi. Natomiast w przypadku wersji mobilnej, skrypt sklepu generuje tylko te elementy, które są potrzebne w niskiej rozdzielczości, niepotrzebnych elementów nie trzeba ukrywać ich zwyczajnie nie ma. Dzięki takiemu podejściu kod HTML, CSS i JavaScript jest maksymalnie mały, mniej danych jest przesyłanych (mniejsze zużycie transferu danych) do odwiedzającego i mniej operacji JavaScript jest wykonywanych na telefonie, co jest niewątpliwym największym plusem wersji mobilnej.

Proces tworzenia sklepu w technologi RWD lub stworzenie wersji mobilnej dwukrotnie zwiększa czas potrzebny na stworzenie i implementacje grafiki. Wynika to z faktu, że grafik projektując grafikę RWD projektuje grafikę dla dużej rozdzielczości ekranu, a następnie dwie lub nawet trzy dodatkowe warianty grafiki dla wszystkich podstron sklepu. Co za tym idzie, w przypadku sklepów, które nie mają skomplikowanej funkcjonalności, gdzie głównym kosztem stworzenia sklepu jest koszt zaprojektowania profesjonalnej, indywidualnej grafiki koszt stworzenia sklepu w technologii RWD może być nawet dwukrotnie większy. Dlatego też dla naszych klientów, którzy nie chcą inwestować początkowo w wersje RWD lub w indywidualną grafikę dla wersji mobilnej przygotowaliśmy grafikę dla wersji mobilnej sklepu, która zawiera wszystkie niezbędne elementy i tylko takie. Dzięki temu jest maksymalnie przejrzysta i szyba w działaniu, a co najważniejsze proces implementacji ogranicza się do podmiany logo i kolorystyki, dzięki temu koszt uruchomienia wersji mobilnej jest symboliczny. Natomiast zaprojektowanie i implementacja indywidualnej grafiki dla wersji mobilnej sklepu będzie w dalszym ciągu mniej kosztowne niż zaprojektowanie i implementacja grafiki w technice RWD.

Popularne serwisy, które posiadają wersje mobilną:

  • m.ceneo.pl
  • m.zara.com

Popularne serwisy, które korzystają z techniki RWD:

  • Allegro.pl
  • eobuwie.com.pl

Za wersją mobilną przemawia fakt minimalnie mniejszego zużycia transferu przez odwiedzającego korzystającego z telefonu, a co za tym idzie też nieco szybsze działanie sklepu. Wybór między RWD, a wersją mobilną dla największych polskich firm nie jest oczywisty i zależy od indywidualnych preferencji.

W prosklepy.pl standardowo tworzymy wersję RWD. Możemy uruchomić dodatkowo wersję mobilna, ale ma to sens przy bardzo dużych projektach oraz, gdy funkcjonalność wersji mobilnej musi w znacznym stopniu odbiegać od funkcjonalności wersji desktopowej.