Czym się różni wersja mobilna strony od wersji RWD?

Kategoria wpisu Frontend, Marketing Tagi: , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Obecnie do stworzenia strony internetowej obsługiwanej na urządzeniach mobilnych wykorzystywane są 2 metody – RWD 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 dla tego 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.

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


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ą. Firmy nie musiały wiec tworzyć całej nowej strony 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 technologi RWD. W ogóle jeszcze w 2011 roku RWD to była dla większości ludzi istna abstrakcja (mimo, że teoretycznie podstawy już istniały). Co do stron mobilnych to początkowo były one w technologi 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 smartphon) powinni je kojarzyć. Wraz z powstaniem smartphonów ta technologia praktycznie odeszła w zapomnienie.

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. Przygotowanie takiej strony jest szybsze – a użyte menu może się istotnie różnić (inny układ, pomijamy lub dodajemy zakładki).

Strona taka przeważnie zawiera 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 strona 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

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. Podejście to jest stosunkowo nowe – do nie dawna wiele przeglądarek nie potrafiło tej technologi poprawnie obsłużyć. Na chwilę obecną jest to już standard.

W przypadku strony wykonanej w tej technologi cały czas mamy do czynienia z tą samą stroną. Używamy tego samego szablonu. Jedyne co ulega zmianie to położenie elementów w zależności od szerokości strony.

przykładowy Generator Grid w CSS

Strony w technologi 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. 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

Jaki typ stron najlepiej wybrać?

To dość trudne pytanie. Z resztą nie jest to jedyny tego typu przypadek. W tym wypadku wszystko jednak zależy 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ść w tedy 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.

źródła:

http://stronywwwkrakow.pl/2016/04/czym-sie-rozni-wersja-mobilna-strony-od-wersji-rwd/
https://www.ideoforce.pl/wiedza/rwd-czy-wersja-mobilna-co-wybrac,38.html
https://www.artefakt.pl/blog/seo/mobilna-czy-responsywna-wersja-strony-jak-dostosowac-serwis-do-urzadzen-mobilnych
https://pl.wikipedia.org/wiki/Strona_mobilna
https://en.wikipedia.org/wiki/Responsive_web_design

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *