Wszystko co chcielibyście wiedzieć o RWD, ale boicie się zapytać

Dużo się mówi obecnie o stronach RWD, responsywnych czy dostosowanych do urządzeń mobilnych. Najczęściej słyszeć będziecie o tym, że jeśli www to tylko responsywne. Że gigant Google obrazi się na Waszą stronę, jeśli nie będzie responsywna. Czy to wszystko prawda? I czym w zasadzie jest projektowanie responsywne?

Z czym to się je?

Projektowanie responsywne polega na takim przygotowaniu projektu i zakodowaniu strony, żeby dostosowała się do wielkości okna, który ją wyświetla. Nie tylko proporcjonalnie się skalowała (to urządzenia mobilne robią same z siebie, jeśli strona się nie mieści na ekranie), ale aktywnie dostosowywała layout.

W praktyce sprowadza się to z grubsza do dwóch rzeczy:

  • Wielkości i położenie określa się w %, a nie sztywnych miarach. Np. mówimy komputerowi, że dany obrazek ma być szeroki na 20%, a nie na 300 pikseli.
  • Określamy progi szerokości ekranu (np. 1920, 1680, 1366 pikseli itd.), po przekroczeniu których layout ulega bardziej radykalnym zmianom.

Efekt powinien być taki, że przewijanie strony powinno odbywać się tylko w osi pionowej, a wszystkie elementy zachowują odpowiednią, czytelną skalę na małym ekranie, co pozwala na bezproblemową obsługę palcem na ekranie dotykowym.

Czyli to inaczej strona mobilna?

Nie. W przypadku strony responsywnej masz jedną stronę, która dostosowuje się do ekranu. W przypadku strony mobilnej masz dwie strony: normalną i dostosowaną na urządzenia mobilne. Ta technika nazywana jest AWD.

Plusy są takie, że strona AWD może być jeszcze ściślej dostosowana do potrzeb urządzeń mobilnych. Minusy – wdrożenie takiego rozwiązania wymaga więcej pracy, zarządzanie dwiema stronami podobnie.

Co na to Google?

Wracamy jednak do RWD. W 2015 roku zrobiło się głośno o tym, że pozycja w najpopularniejszej wyszukiwarce uzależniona będzie od dostosowania strony do urządzeń mobilnych. Jesteśmy ponad rok po tych rewelacjach i jak to wygląda? Czy responsywność www ma wpływ na jej pozycję? Krótka odpowiedź: tak.

Dłuższa odpowiedź: tak, ale to tylko jeden z wielu czynników, który ma wpływ na ocenę strony przez Google. Jak duży jest to wpływ? To zależy od urządzenia z jakiego szukamy. Logiczne jest, że korzystając z wyszukiwarki na smartfonie, Google raczej postara się podsunąć nam strony, które przystosowane są do naszego urządzenia.

W przypadku komputera jest całkowicie wykonalne wypozycjonowanie strony, która nie jest responsywna. Jeśli jest dobrze skonstruowana, szybka, ma dużo ciekawych treści i prowadzi do niej dużo dobrej jakości linków. Jednak jeśli chcemy zwojować wyniki wyszukiwania to responsywność na pewno nie zaszkodzi.

Cienie RWD, czyli o czym mówi się rzadziej

  • Złe RWD potrafi być naprawdę złe. Do tego stopnia, że poświęca się czas na jego stworzenie, a ostatecznie użytkownikowi mobilnemu i tak lepiej używałoby się pomniejszonej strony przeznaczonej na ekrany komputerów. Dodatkowo stojące u podwalin projektu założenie responsywności może wpłynąć na mniejszą atrakcyjność i dopracowanie całej strony.
  • Responsywna strona na niewielkich ekranach może wyglądać na niedopracowaną. Jest to wynik tego, że ze względu na mnogość kombinacji modelu, systemu i przeglądarki niemożliwe jest dopracowanie i przetestowanie strony w każdym możliwym środowisku.
  • W praktyce firmy określają specyfikację pod jaką przygotowują wersje responsywne i w jakim środowisku ją testują. Następnie przez pewien okres czasu po opublikowaniu strony www zgłaszane mogą być usterki w pewnych środowiskach i są one na bieżąco są poprawiane.
  • Im bardziej rozbudowany serwis i skomplikowany layout tym większy kłopot. Dlatego RWD nierzadko wymusza ograniczanie się do zestawu praktyk i rozwiązań, które ograniczą potencjalne problemy. Wymusza to niejako minimalizm oraz standaryzację projektów stron.

Czy mimo to warto?

Warto, zwłaszcza kiedy serwis przygotowywany jest przez doświadczony i profesjonalny zespół projektantów i programistów.

  • Dobre RWD potrafi być naprawdę dobre. Przemyślany projekt nie tylko polega na odpowiednim pomniejszeniu i poprzestawianiu wszystkich elementów, żeby się zmieściły. Dobry projektant przewiduje potrzeby użytkowników mobilnych – stąd niepotrzebne na smartfonie elementy ukryje albo zmodyfikuje ich wygląd.
  • Określone rozwiązania projektowe, które są narzucane przez wymóg responsywności mogą wydawać się ograniczeniami, ale są bardzo rozsądne. Wymogi responsywności wpływają na szybkość ładowania, czytelność, zrozumiałość i lekkość projektu. Natomiast utalentowany projektant i tak znajdzie sposób na nadanie stronie indywidualnego rysu.
  • Pomimo tego, że część przekornych użytkowników twierdzi, że obsługa klasycznej strony na smartfonie nie jest niczym trudnym to dla większości osób konieczność ciągłego przybliżania i oddalania www oraz nawigowania w dwóch osiach jest nie do przyjęcia.

W tym porównaniu strona RWD, która na danym urządzeniu wyświetli się z drobnymi błędami albo niezgodnie z zamierzeniem projektanta i tak będzie bardziej zachęcająca niż idealna strona responwysności pozbawiona.

Wniosek z tego wszystko niestety nie będzie oryginalny. Dobre strony są dobre, a złe po prostu złe. Dobra responsywna strona będzie raczej lepsza niż dobra nieresponsywna strona.

Z tym że dobrą responsywną stronę trudniej wykonać, ale to już nasza broszka.

Kamil Lipa

Web Webuzzerii. Od zawsze w branży reklamy internetowej, project manager, specjalista user experience, weteran wordpressa i łowca konwersji, który w wolnym czasie trenuje wojowanie samurajskim mieczem, więc warto mieścić się w każdym deadline.

Czy ten artykuł był dla Ciebie przydatny?
Zapisz się do newslettera, dzięki temu żadnego nie ominiesz.

Masz pytania? Zadaj je w komentarzu - odpowiemy!
  • W dzisiejszych czasach responsywność to standard i każda strona powinna dobrze wyglądać na mobile.

  • To ja mam pytanie 😉 Czy w związku z tym, że przy AWD mamy dwie wersje strony – zwykłą i mobilną – to czy nie ma tutaj ryzyka, że taka strona nie będzie kompatybilna ze wszystkimi urządzeniami mobilnymi (skoro ma tylko jedną wersję mobilną). W porównaniu z RWD, która poniekąd dopasowuje się automatycznie wydaje mi się to bardziej ryzykowne.

    • Webska

      W przypadku AWD wersja mobilna jest przygotowywana ogólnie pod urządzenia mobilne, nie pod konkretny model, stąd nie grozi nam ryzyko większych problemów z kompatybilnością niż w przypadku RWD. 🙂

      Z powodu tego, że urządzenia mobilne mają różne rozmiary, to strona mobilna też musi dostosowywać się do rozmiaru okna. W przypadku AWD w takim razie mamy dwie strony: sztywną na większe ekrany i dostosowującą się, responsywną, na te mniejsze.

  • Kinga

    Sama niezbyt często używam telefonu do przeglądania blogów czy ulubionych stron. Jestem raczej analogową dziewczyną, mimo że pracuję przez Internet i spędzam wiele czasu w Sieci. Wiem jednak, że responsywsność jest naprawdę ważna. Pal licho wyszukiwarka, ważne, żeby czytelnik nie uciekał, jak zobaczy na telefonie, że strona się wali. Jeszcze pracuję nad responsywnością mojej strony, ale dzięki Twojemu artykułowi nabiorę szybszego tempa ;).