Responsive web design: co trzeba o nim wiedzieć?

Kilka lat temu trudno było uwierzyć, że wygodna „przekładalność” designu strony internetowej na smartfony i tablety może realnie wpłynąć na ruch na stronie, a tym samym przełożyć się na zyski. Obecnie tylko niewielki procent użytkowników Internetu ma takie wątpliwości. Nic dziwnego, według statystyk aż 81 procent z nich korzysta z sieci za pomocą urządzeń mobilnych! Responsive web design jest więc naturalnym wyborem przy projektowaniu strony internetowej

Kilka lat temu trudno było uwierzyć, że wygodna „przekładalność” designu strony internetowej na smartfony i tablety może realnie wpłynąć na ruch na stronie, a tym samym przełożyć się na zyski. Obecnie tylko niewielki procent użytkowników Internetu ma takie wątpliwości. Nic dziwnego, według statystyk aż 81 procent z nich korzysta z sieci za pomocą urządzeń mobilnych! Responsive web design jest więc naturalnym wyborem przy projektowaniu strony internetowej

Co to jest responsive web design - design responsywny?

W dużym uproszczeniu, jest to strona internetowa, która automatycznie dostosowuje się swoim wyglądem i rozmiarem do rozdzielczości urządzenia, na którym jest wyświetlana. Wersja strony na smartfony może okazać się nie tylko mniejsza, ale także zróżnicowana graficznie w porównaniu z odsłoną przystosowaną do urządzeń o większej rozdzielczości. Zmianie mogą ulegać na przykład elementy nawigacji. Sensem designu responsywnego jest skupienie się przede wszystkim na czytelności przekazu, który będzie dostępny bez zbędnego scrollowania obrazu wyświetlanego na ekranie telefonu.

To sprytne i przynoszące korzyści obu stronom rozwiązanie poleca także Google, któremu zależy na zminimalizowaniu chaosu w przeglądarce, który wzrastał, gdy jedna wyświetlana strona przeznaczona była na urządzenia mobilne (przede wszystkim na smartfony), a kolejna na urządzenia stacjonarne. Wybierając design responsywny, twórca strony eliminuje niepotrzebne powielanie treści, jedynie za pomocą odpowiedniego layoutu.

Responsywność każdej strony można sprawdzić, zmniejszając okno przeglądarki. Jeżeli została ona przystosowana do różnych rozdzielczości, powinna zmieniać także swój układ. Jeżeli jednak pojawiają się tylko paski do przesuwania strony – niestety, witryna nie będzie wygodna do przeglądania na urządzeniach mobilnych.

Responsywny design wczoraj

Jeszcze niedawno, by odpowiednio zadbać o wyświetlanie strony na różnych urządzeniach mobilnych, przygotowywano kilka jej wersji w różnych, popularnych rozmiarach. Zainstalowany skrypt zapewniał wykrycie rozdzielczości wyświetlacza i przekierowanie do odpowiedniej wersji. Mimo, że sposób był dość skuteczny, jego minusy były na tyle wyraźne, że szybko zaczęto rezygnować z tego rozwiązania. Największymi jego wadami były dwie najważniejsze wytyczne: czas (poświęcany na tworzenie wielu wersji) i pieniądze (którymi trzeba było ten czas wynagrodzić). Poza tym obecnie na rynku znajduje się tyle urządzeń z dostępem do sieci, o tak odmiennej rozdzielczości (telefony komórkowe, smartfony, tablety, laptopy, komputery stacjonarne) że tworzenie wersji odpowiadających im wszystkim, byłoby wyjątkowo trudnym zadaniem.

Responsywny design dziś

Obecnie, w odpowiedzi na ogromny wybór urządzeń z dostępem do sieci na rynku oraz na spadek ich cen i kosztów korzystania z Internetu, strony projektuje się za pomocą techniki responsive web design. Obsługa tej techniki odbywa się za pomocą tzw. media queries – które pozwolą rozpoznać wielkość przeglądarki i wstawić odpowiedni arkusz stylu, lub jego fragment. Technika ta nie wymaga tworzenia osobnych wersji znajdujących się pod różnymi adresami internetowymi. Nowoczesny design responsywny wymaga wyłącznie jednego adresu url (czyli inaczej internetowego), co wyeliminowało niedogodności związane z przekierowaniami ze strony serwera. Pojedyncze zostają także struktury kodu html, skryptów jQuery i javascript. Tym samym rozwiązanie staje się wymiernie mniej czasochłonne i oczywiście, bardziej oszczędne. Odpowiednia technika umożliwiająca responsywność ułatwia także aktualizowanie strony. Najnowsze treści wprowadzane są za jednym razem w ramy każdego layoutu.

Responsive web design: koszty a korzyści

Nie da się ukryć, że dostosowanie strony internetowej lub sklepu do rozdzielczości idealnych dla użytkowników tabletów i smartfonów wiąże się z nakładem środków finansowych, które należy potraktować jako inwestycję niezbędną do dalszego rozwoju. Czy są to duże wydatki? Większe, rozwijające się firmy najprawdopodobniej potraktują je jako niewielkie, a do tego nieuniknione, właściciel małej firmy będzie raczej szukał jak najtańszych rozwiązań. Firmy oferujące sklepy i serwisy oparte na responsive web design zazwyczaj wyceniają je mniej więcej 2-3 razy drożej niż zwykłe, nieresponsywne produkty. Nieco inaczej będzie ta zależność wyglądała w firmach zatrudniających własne działy IT, które dostosowują ich serwisy i witryny internetowe do wymagań klientów – specjaliści twierdzą, że koszty wzrastają średnio o 30-50 procent, a wynika to z konieczności przeprowadzenia większej ilości testów i dłuższych procesów wdrożenia. Oczywiście, koszty te będą nieco wyższe, jeżeli będziemy sięgać po rozwiązania niestandardowe, wymagające większej ilości testów i dodatkowego kodowania.

Niektórzy szukają oszczędności w nieco innym rozwiązaniu – zamiast stron opartych na responsive web design używają tradycyjnych witryn, ale użytkownikom smartfonów i tabletów proponują korzystanie z dedykowanych serwisów mobilnych, czyli takich, które są tworzone wyłącznie pod mobilne urządzenia. Jest to pewnie wyjście – nie trzeba czasowo wyłączać strony, która ulega przebudowie, nie trzeba też jej tworzyć od początku. Jednakże na dłuższą metę nie jest to najlepsze rozwiązanie, bo ewentualne aktualizacje i zmiany w budowie stron trzeba przeprowadzać każdorazowo na każdej z witryn, co generuje dodatkowe koszty. A w dodatku nie jest to zgodne z polityką Google i nie sprzyja skutecznemu pozycjonowaniu, dlatego specjaliści polecają dedykowane serwisy mobilne przede wszystkim tym klientom, którzy potrzebują wykorzystania szczególnych właściwości stron dedykowanych, a które wynikają np. ze specyfiki ich wykorzystania na telefonach i smartfonach.

Czy warto ponosić większe koszty, by strona dostosowywała się do użytkownika? Specjaliście od e-commerce nie mają wątpliwości, że jest to po prostu nieuniknione. Szacuje się, że niemal co drugi Polak używa smartfona, a odsetek osób dokonujących przy jego użyciu zakupów stale rośnie (wg CBOS-u już niemal 50 proc.  Polaków robi zakupy w sieci). Nie można ignorować oczekiwań tak dużej grupy konsumenckiej, oferując im strony internetowe i sklepy, których przeglądanie przy pomocy telefonu jest niewygodne, skazując się tym samym na nieunikniony spadek obrotów. Chyba, że swoją ofertę kierujemy głównie do klientów dokonujących zakupów głównie przy pomocy komputera stacjonarnego, np. w firmie, w godzinach pracy, w związku z wykonywaniem swoich zawodowych obowiązków. Wtedy faktycznie koszty wdrożenia strony opartej na designie responsywnym mogą być wyższe od korzyści, które ono przyniesie.

Wisienka na torcie: lepsze pozycjonowanie strony

A na koniec, bardzo istotna informacja dla wszystkich, którzy zarabiają w sieci. Jedna wersja strony przystosowana do urządzeń wszystkich rozdzielczości to lepsze wyniki SEO. Wyższa pozycja w wyszukiwarce jest dużo łatwiejsza do osiągnięcia, gdy treści się nie powielają, a liczba odwiedzin na stronie liczona jest bez względu na urządzenie, z którego je odnotowano.

Dlatego jeżeli swoją obecność w sieci traktujesz poważnie, nie możesz sobie pozwolić na niedocenienie tak ogromnej rzeszy użytkowników Internetu, jak ludzie korzystający z urządzeń mobilnych. Responsywność strony już dawno przestała być ekstrawagancją, a stała się koniecznością. Jeżeli więc jeszcze o nią nie zadbałeś – czas najwyższy! Daj się poznać z jak najlepszej (i jak najlepiej dopasowanej) strony!

Autor: Mateusz Jabłoński

Specjalista ds Projektów IT

www.datalab.pl