Strona mobilna czy responsywna?

Przeczytaj także: Responsive Web Design: innowacja czy konieczność?

Najnowsze statystyki wskazują, że obecnie na jednego mieszkańca naszej planety przypada dokładnie jeden smartfon lub tablet. Tak duże nasycenie rynku tymi gadżetami powoduje, że coraz częściej wykorzystywane są do przeglądania internetu czy robienia zakupów. Niestety, wyświetlane na ich ekranach strony www nie wyglądają najlepiej. Dzieje się tak dlatego że podczas ich tworzenia, nie wzięto pod uwagę tego, że ktoś może chcieć oglądać je na dużo mniejszym, niż komputerowy, ekranie. W efekcie rośnie frustracja użytkowników, którzy są zmuszeni do ciągłego skalowania i przewijania, wystającej poza obrys ekranu, strony. Poruszanie się po takich serwisach dodatkowo utrudniają elementy nawigacyjne, projektowane z myślą o użytkownikach komputerów, a nie urządzeń mobilnych. Istnieją dwa rozwiązania tego problemu: stworzenie strony mobilnej lub zbudowanie serwisu od nowa, zgodnie z wytycznymi Responsive Web Design (RWD).

Strony dedykowane dla mobile

Najszybszym i najmniej pracochłonnym rozwiązaniem, w przypadku istniejącego już serwisu lub sklepu, jest dobudowanie wersji mobilnej. Jest to specjalna, „lekka” wersja serwisu www, zoptymalizowana do wyświetlania na mniejszych ekranach. Różni się ona także przyciskami i linkami, które są łatwe do naciśnięcia opuszkiem palca.

– Dzięki optymalizacji grafik i elementów multimedialnych oraz ograniczeniu liczby obciążających przeglądarkę skryptów, jej czas ładowania jest też dużo krótszy. Zyskują na tym użytkownicy, których smartfony czy tablety szybciej przetwarzają taką stronę, a tym samym oszczędzają cenny transfer. Mobilne wersje serwisów internetowych z reguły mają specjalne adresy, jak np. http://m.stronafirmyx.pl. Często spotykanym rozwiązaniem jest też specjalny skrypt, który rozpoznaje urządzenie, z poziomu którego użytkownik odwiedza stronę serwisu i decyduje o tym, która wersja serwisu zostanie mu wyświetlona – mówi Piotr Krawiec, prezes zarządu mGenerator.pl. Takie rozwiązanie jest najlepszym wyborem dla firm, które mają już gotowy serwis czy sklep i nie chcą go modyfikować. Dzięki niemu wystarczy, że stworzą lżejszą wersję, bez konieczności ingerencji w istniejącą stronę. Takie rozwiązanie jest też znacznie tańsze od całkowitej przebudowy serwisu. Krótszy jest również czas zbudowania mobilnej strony oraz jej wdrożenia.

Dodatkowo, mobilną wersję można wzbogacić o moduły, które przyczyniają się do zwiększenia sprzedaży. Ciekawym przykładem jest np. dodanie opcji rezerwacji, z poziomu smartfona, wizyty u dentysty lub miejsca noclegowego w hotelu czy pensjonacie. Warto również zwrócić uwagę na przyciski szybkiego kontaktu z firmą. Pozwalają one za pomocą jednego kliknięcia wybrać numer telefonu, bez konieczności jego przepisywania, wysłać e-mail na podany adres lub sprawdzić lokalizację siedziby firmy za pomocą Map Google.

HTML5 i CSS3

Wraz z pojawieniem się języka HTML5 oraz ewolucją kaskadowych arkuszy stylów CSS, powstała jeszcze jedna możliwość dostosowania strony internetowej do potrzeb użytkowników mobilnych. Mowa tu o Responsive Web Design, czyli filozofii, w myśl której serwis internetowy zmienia swój wygląd w zależności od urządzenia, na którym jest wyświetlany oraz rozdzielczości jego ekranu. Strony responsywne wyeliminowały konieczność tworzenia dwóch wersji tej samej witryny, jednak ich wykorzystanie wymaga stworzenia całego serwisu lub sklepu od podstaw. To oznacza dłuższy czas wdrożenia oraz dużo wyższe koszty. – W procesie projektowania powstaje tylko jedna strona, która dzięki odpowiedniemu wykorzystaniu stylów CSS i skryptów jest dostosowana do wyświetlania w różnych rozdzielczościach. Z reguły dostosowuje się ją do 3 najpopularniejszych szerokości ekranu: 480 pikseli dla smartfonów, około 800 dla tabletów i powyżej 1280 dla komputerów. Oczywiście, im więcej wartości pośrednich, tym strona będzie lepiej dopasowana do ekranu konkretnego urządzenia. Trzy to w tym wypadku absolutne minimum – tłumaczy Piotr Krawiec z mGenerator.pl. Przykładowo, strona responsywna dla smartfonów będzie zawierała mniej grafik, uproszczone menu i inne elementy nawigacyjne. Wraz ze wzrostem rozdzielczości wyświetlane będą dodatkowe, bogatsze grafiki, a nawet multimedia. Zmianie ulegnie też ułożenie i ilość tekstu.

Strony mobilne czy responsywne?

Oba rozwiązania cechują się innym podejściem do rozwiązania jednego problemu. W przypadku każdego z nich użytkownik otrzymuje ten sam efekt końcowy, czyli stronę dostosowaną do wyświetlania na mniejszym ekranie. Optymalizacji ulegają też te same elementy nawigacyjne, które łatwo jest nacisnąć palcem, grafiki czy teksty. Zasadnicza różnica tkwi jednak w koszcie i czasochłonności ich przygotowania i wdrożenia. Wpływ na wybór ma też faza cyklu życia strony internetowej. Strona mobilna może okazać się lepszym rozwiązaniem dla istniejącego serwisu lub sklepu, gdyż eliminuje konieczność ingerencji w jego strukturę. Natomiast responsywna sprawdzi się w przypadku nowopowstających serwisów lub takich, które i tak miały przejść gruntowną przebudowę.

Ostateczna decyzja co do wyboru konkretnego rozwiązania należy do przedsiębiorców i marketerów. Nie ulega jednak wątpliwości, że większość serwisów i sklepów internetowych nie planuje w najbliższym czasie gruntownych zmian na swoich witrynach. W takim wypadku korzystniejszym dla nich rozwiązaniem będzie wersja mobilna, której koszt stworzenia i wdrożenia zaczyna się od kilkuset złotych; w przypadku stron RWD ten koszt zaczyna się od kilku tysięcy złotych.