Mobilna strona internetowa a RWD! Jakie są różnice?

(Aurelia Sypniewska)Konfiguracja witryny, Pojęcia
Czas czytania 5 minuty

Obecnie do stworzenia strony internetowej obsługiwanej na urządzeniach mobilnych wykorzystywane są 2 metody – RWD (Responsywne projektowanie stron internetowych) i Wersja Mobilna. Jak zwykle każda z nich posiada zarówno wady jak i zalety – no cóż, nie istnieje idealne rozwiązanie. A, którą z nich wybrać? Spróbuję na to pytanie odpowiedzieć poniżej.

Dlaczego trzeba budować strony na urządzenia przenośne?

Dostępność witryny na różnych urządzeniach jest bardzo ważna. Coraz więcej osób bowiem kontysta z urządzeń o zróżnicowanych rozmiarach (np. smartphony, tablety) – użytkownicy tych urządzeń oczekują, że każda strona otworzy się na nich „poprawnie”. Co gorsza Google od pewnego czasu bierze pod uwagę wygląd strony internetowej na różnej wielkości urządzeniach.

Można uznać, że w tej chwili mamy 2 indeksy Google. Jeden na komputery stacjonarne, laptopy a drugi na urządzenia przenośne.

Jeżeli Google uzna, że nasza strona źle się otwiera na telefonie lub tablecie pozycja strony może spaść. Na szczęście tylko w rankingu przeznaczonym dlatego typu urządzeń. Jest tak dlatego, że Google chce dostarczać użytkownikom nie tylko wartościowe treści, ale także czytelne i przyjazne w użytkowaniu.

Mobilna strona internetowa a RWD! Jakie są różnice?

Tematy na bloga – skąd można czerpać inspirację?

Czym jest strona mobilna?

Na początku kiedy pojawiła się możliwość tworzenia stron na urządzenia przenośne strony te były absolutnym HITEM. Było to wywołane tym, że budowa takiej strony nie wymaga dużych ingerencji w wersją desktopową – czyli taką jaką już wiele firm posiadało. Firmy nie musiały więc tworzyć całej nowej strony od nowa a jedynie jej uproszczony odpowiednik w formie mobilnej witrynki.

Wpływ na jej początkowy sukces wynikał prawdopodobnie również z tego, że przeglądarki internetowe nie obsługiwały poprawnie technologii RWD. W ogóle jeszcze w 2012 roku RWD to była dla większości ludzi istna abstrakcja (pomimo, że teoretycznie technologia do stworzenia tego typu witryny była już dostępna). Co do stron mobilnych to początkowo były one tworzone w technologii WAP (Wireless Application Protocol).

Były to bardzo proste stronki – ograniczające się raczej prawie samego tekstu. Zbyt popularne nie były – choć użytkownicy telefonów starszej generacji (przed smartfon) powinni je kojarzyć. Wpływ na małą ich popularność miała, chociażby cena Internetu na telefonach komórkowych – była wysoka, a szybkość łącza bardzo niska. Wraz z powstaniem smartfonów ta technologia praktycznie odeszła w zapomnienie.

Dwie oddzielne witryny

W przypadku występowania mobilnej wersji strony w praktyce mamy do czynienia z 2 osobnymi stronami. Na dwóch różnych szablonach mogących posiadać inne elementy. Strony tego typu mogą wyglądać całkowicie inaczej. Przygotowanie takiej strony obecnie zajmuje podobną, o ile nie większą ilość czasu niż w technologii RWD. Jest tak właśnie dlatego, że mamy 2 witryny a użyte menu może się istotnie różnić (inny układ, pomijamy lub dodajemy zakładki). Dodatkowo strona na urządzenia mobilne może być tak naprawdę aplikacją napisaną w innym języku niż desktopowa (na komputery).

Dużym plusem rozdzielenia obu wersji stron jest fakt, że każda wersja przeważnie ma tylko niezbędne elementy lub takie, które mogą zainteresować odwiedzającą ją osobę. Zarówno obrazy, jak i skrypty zamieszczone na niej dostosowane są do wielkości urządzeń. Dzięki czemu witryna szybko się ładuje.

Niestety ten typ strony ma również pewne ograniczenia wynikające z budowy.

  • Posiadamy praktycznie 2 strony więc wprowadzanie i edytowanie treści wiąże się często z podwójną pracą. Treści trzeba bowiem wprowadzić osobno na obie wersje stron (chociaż nie zawsze). Z punktu widzenia SEO jest to równoznaczne z tworzeniem duplikatów treści. Obie strony mają bowiem 2 różne adresy – w tej samej domenie ale np. z przedrostkiem (subdomena).
  • Połączenie stron wymaga wprowadzenia odpowiednich przekierowań umożliwiających przełączanie się między wersjami.
  • Często też nie można prowadzić spójnych statystyk dla stron. Każda witryna potrzebuje np. osobny kod Google Analytics.

W tym przypadku nie ma czegoś takiego jak płynne przejście pomiędzy wersjami strony. Mamy, albo wersją mobilną albo od razu desktopową.

Przykłady wersji mobilnych:

  • m.facebook.com
  • m.wp.pl
budowa mobilnej witryny

Czym jest strona RWD

RWD to skrót od angielskich słów Responsive Web Design. Nazwę tą określane są strony dostosowujące swoje rozmiary do wielkości ekranu na, którym ją przeglądamy. Podejście to jest stosunkowo nowe – do niedawna wiele przeglądarek nie potrafiło tej technologii poprawnie obsłużyć. Na chwilę obecną jest to już jednak standard i z tej metody korzysta wiele witryn internetowych.

W przypadku strony wykonanej w tej technologii cały czas mamy do czynienia z tą samą stroną. Używamy więc tego samego szablonu o analogicznym układzie, elementach. Obrazy umieszczone na tego typu stronie skalują się co oznacza, że zachowują swoją wagę. Jedyne co ulega zmianie to położenie elementów w zależności od szerokości strony, oraz niektóre elementy mogą zostać zablokowane (np. w JS może być warunek, że dana funkcja się nie uruchomi jeśli szerokość okna nie przekroczy 600px).

strona w technologii RWD
przykładowy Generator Grid w CSS

Strony w technologii RWD budowane są na bazie siatki (Grid). Zastosowanie takiego rozwiązania ułatwia dostosowywanie się stronom do rozmiaru ekranu.

W praktyce wygląda to tak, że układ strony potrafi być płynny dzięki zastosowaniu metody @media query (opis pod linkiem). A elementy w zależności od urządzenia mogą zmieniać nie tylko swoją pozycję (+ flexbox) ale także rozmiary:

  • szerokość
  • wysokość
  • kolor, rozmiar fontu

Dzięki Flexbox elementy strony mogą też zmieniać swoją kolejność. Dzięki czemu strona może lepiej spełniać swoje role.

Wady i zalety stron mobilnych i RWD – zestawienie

Dla waszej wygody zestawiłam najistotniejsze wady i zalety obu metod:

Wady i zalety wersji mobilnej i RWD strony internetowej
Wady i zalety wersji mobilnej i RWD strony internetowej

Jaki typ stron najlepiej wybrać?

To dość trudne pytanie. Zresztą nie jest to jedyny tego typu przypadek. W tym wypadku wszystko zależy jednak, od tego co jest tak naprawdę nam potrzebne. I co dalej chcemy robić ze stroną.

W przypadku strony firmowej czy bloga najlepszym rozwiązaniem z pewnością jest RWD. Stronę taką „łatwo” się aktualizuje i wystarczy zrobić to w jednym miejscu. Obsługa takiej strony nie jest też zbytnio skomplikowana (w przypadku CMS). Aktualizować stronę może prawie każdy. Obecnie strona tego typu jest najczęściej spotykaną formą witryny internetowej.

Co do mobilnych wersji – to spotykane są głównie w przypadkach portali internetowych. Ich sposób działania i funkcje znacznie się różnią – od wersji desktopowej. Często ich funkcjonalność wtedy przypomina aplikację.

Na ostateczny wybór metody wykonania strony ma też wpływ, jakie funkcje posiada strona oraz indywidualne preferencje klienta. Moi drodzy istnieje wiele ciekawych rozwiązań, które nie koniecznie będą działały tak samo o ile w ogóle na różnych urządzeniach. Dobrym przykładem jest tutaj efekt paralaksy (czyli nieruchomego tła strony). Urządzenia mobilne go nie obsługują! Przynajmniej w tradycyjnej wersji CSS.

W tym miejscu warto również zapoznać się z technologią AMP, będącej rozszerzeniem dla witryn RWD.

źródła: