Mobilna czy responsywna wersja strony?

Mobilność bardzo mocno wpisuje się w XXI wiek. Obecnie coraz więcej osób korzysta z urządzeń mobilnych w codziennym życiu, wyszukując informacji o najbliższej restauracji lub zamawiając taksówkę. Przenośne urządzenia są bardzo wygodnym rozwiązaniem, ponieważ zawsze mamy je pod ręką, zajmują stosunkowo niewiele miejsca w kieszeni spodni, czy torebki, a pozwalają w dowolnym miejscu i o dowolnym czasie wysłać maila, sprawdzić facebooka, czy odwiedzić ulubionego bloga. W ten trend muszą wpasować się także właściciele stron internetowych, którzy powinni zatroszczyć się o użytkownika korzystającego z Internetu w ten właśnie sposób.

Mobilnie, czyli lepiej

Mobilna wersja strony internetowej jest bardziej przyjazna smartfonom, ponieważ została specjalnie dostosowana do mniejszego wyświetlacza – w przypadku otwierania standardowych wersji strony na telefonach często zdarzają się problemy z odpowiednim wyświetlaniem niektórych jej elementów, zmniejszając tym samym wygodę użytkownika. Dużym plusem tego typu stron jest niewątpliwie to, że ich funkcjonalność jest dostosowana pod urządzenia z mniejszymi wyświetlaczami – elementy wyświetlane są w taki sposób, aby użytkownik przewijał treść strony w dół, bez konieczności przewijania na boki.

Serwis We Are Social w swoim corocznym raporcie przedstawił dane dotyczące udziału różnych urządzeń w globalnym ruchu internetowym, z którego jasno wynika, że ruch mobile odgrywa coraz większą rolę:

ruch internetowy według urządzeń, ruch mobilny

Ruch z urządzeń mobilnych stanowi aż 39% całości, co może wpływać na wyobraźnię właścicieli stron internetowych. Pytanie “czy warto mieć mobilną wersję strony?” jest w tym przypadku zbędne.

Strona dostosowana do urządzeń mobilnych a stanowisko Google

Oprócz oczywistych korzyści wynikających bezpośrednio z zadowolenia użytkownika, za posiadanie strony dostosowanej do urządzeń mobilnych zostaniemy także “wynagrodzeni” przez algorytm Google. Jakiś czas temu pracownicy firmy z Mountain View postanowili kolejny raz zmobilizować webmasterów aby Ci zadbali o wygodę użytkowników mobilnych i tworzyli strony dostosowane do urządzeń tego typu. Według zapowiedzi niedługo czeka nas kolejna odsłona tzw. mobilegeddonu, który w mobilnych wynikach wyszukiwania (wyniki widoczne dla PC i laptopów to “inna para kaloszy”) , będzie mocniej promował strony dostosowane do urządzeń z mniejszymi wyświetlaczami. Nie spodziewam się aby zapowiadana aktualizacja mocno zachwiała mobilnymi SERPami, ale mimo wszystko, każdy webmaster powinien zadbać o użytkowników korzystających ze smartfonów. Bez względu na to czy osiągnie dzięki temu wyższe pozycje w SERPach czy nie, powinnien się tutaj skupić głównie na wygodzie i zadowoleniu internauty.

Wersja responsywna czy mobilna?

Warto rozdzielić oba pojęcia – strona mobilna dostosowana jest wyłącznie pod urządzenia mobilne (posiada osobny adres, np.: m.domena.pl), natomiast wersja responsywna automatycznie dostosowuje się do urządzenia, z którego korzysta użytkownik. Zastanawiasz się, która z nich będzie lepsza w Twoim przypadku? Poniżej postaram się przybliżyć wady i zalety każdej z nich. Nie będę się tu skupiał na mocno technicznych aspektach obu rozwiązań a jedynie na ich ogólnej charakterystyce.

Strona mobilna

Tak jak wspomniałem wcześniej, strona mobilna posiada osobny adres (np.: m.domena.pl), a jeśli została odpowiednio skonfigurowana, wyświetli się użytkownikowi mobilnemu jako domyślna wersja strony. Warto tu jednak zaznaczyć, że w widocznym miejscu (z reguły na samym dole) powinien znaleźć się widoczny przycisk przełączający internautę na pełną wersję witryny.

Strony mobilne, z technicznego punktu widzenia są odrębnymi wersjami stron desktopowych, zawierającymi elementy dostosowane do urządzeń o mniejszych wyświetlaczach. Z myślą o wygodzie użytkownika, dostosowuje się w nich elementy strony w sposób maksymalnie ułatwiający korzystanie z witryny. Jako przykładem posłużę się wersją mobilną Onetu (http://m.onet.pl/), która znacznie różni się od wersji na komputery i laptopy – wszystkie elementy nawigacyjne dostosowują się do aktualnej rozdzielczości ekranu, a boxy z wpisami z danej kategorii, domyślnie zawierają jedynie 4 najnowsze artykuły (pozostałe można znaleźć po przejściu w bok) tak, aby ułatwić użytkownikowi czytanie treści.

W wersjach mobilnych często pomija się niepotrzebne elementy, które mogłyby źle wyświetlić się na urządzeniach przenośnych lub niepotrzebnie wydłużyć ich zawartość. Niesie to za sobą korzyści w postaci zwiększenia szybkości i czytelności strony (co jest bardzo ważne na mniejszych ekranach) ale niektórym użytkownikom może brakować pewnych elementów, z których korzystają w wersji desktopowej. W tym miejscu posłużę się kolejnym przykładem, który dotknął mnie osobiście – wersje mobilne serwisów należących do grupy goal.pl. Używając laptopa, chętnie korzystam z nawigacji pozwalającej przechodzić do wiadomości z poszczególnych sekcji:

nawigacja w wersji desktopowej

Wersja mobilna ( http://m.ligapolska.pl/ ) została bardzo mocno “uszczuplona” i próżno w niej szukać omawianego elementu. Dlatego przeważnie korzystam z przycisku przenoszącego mnie do desktopowej wersji strony aby skorzystać z pełnej nawigacji. Oczywiście jest to moja subiektywna ocena, a wersja mobilna posiada wiele udogodnień dla urządzeń mobile, np.: brak niepotrzebnych elementów (np.: kolumn bocznych) w widoku artykułów. Wystarczy porównać artykuł w wersji mobile oraz desktop, różnica jest ewidentna.

goal.com wersja mobilna strony vs desktopowa

Jednym z problemów w przypadku stron mobilnych jest fakt, że przeważnie korzystają z odrębnego systemu CMS i wprowadzanie zmian musi odbywać się w dwóch systemach – osobno dla wersji desktop i mobile. Nie jest to najwygodniejsze rozwiązanie a wprowadzanie równoczesnych zmian w każdej z wersji jest niezbędne.

Strona mobilna – o czym warto pamiętać?

  • strona mobilna musi posiadać osobny adres (np.: m.domena.pl),
  • należy zadbać aby adresy desktopowe posiadały swoje odpowiedniki w wersji mobilnej, a także o wykonanie odpowiednich przekierowań. Nie może zdarzyć się sytuacja, w której adres widoczny na komputerze/laptopie w wersji mobilnej przekieruje użytkownika na stronę główną lub stronę błędu 404,
  • zaleca się dodanie przycisku przenoszącego użytkownika do pełnej wersji witryny,
  • stworzenie osobnej mapy witryny,
  • aby strona mobilna działała poprawnie, w wersji na komputery należy umieścić tag link rel=”alternate”, który wskazuje odpowiedni URL mobilny, natomiast w wersji mobile należy umieścić tag link rel=”canonical”, który wskazuje odpowiedni URL na komputery,

Strona responsywna

Strona w wersji responsywnej (RWD – Responsive Web Design) korzysta z technologii, która dostosowuje wygląd i układ strony do rozmiaru okna urządzenia, z którego korzysta użytkownik. W porównaniu do wersji desktopowej, wszystkie treści z reguły pozostają bez zmian lecz jej elementy wyświetlają się w taki sposób, aby użytkownicy smartfonów nie mieli problemów z poruszaniem się po witrynie. Dzięki takiemu rozwiązaniu, nie musimy posiadać osobnej wersji strony aby została ona uznana za przyjazną urządzeniom mobilnym.

W odróżnieniu od stron mobilnych, strony responsywne nie muszą posiadać osobnych adresów URL. Użytkownik mobilny znajduje się na tym samym adresie co użytkownik desktopowy, zmianie ulega jedynie sposób wyświetlania witryny. Dzięki zastosowaniu tej technologii, nie musimy korzystać z dwóch systemów CMS, co jest znacznym ułatwieniem w przypadku często aktualizowanych serwisów.

Warto zaznaczyć, że strony responsywne (elastyczne projektowanie witryn) są zalecane przez Google.

Strona responsywna – o czym warto pamiętać?

  • aby ułatwić robotom odczytywanie wersji responsywnej należy odblokować zasoby strony (JavaScript, CSS, obrazki), zablokowane w pliku robots.txt,
  • strona responsywna nie potrzebuje osobnego systemu CMS i nie wymaga osobnej aktualizacji treści,
  • nie potrzebuje osobnego adresu URL
  • prezentuje taki sam kod HTML jak wersja desktopowa,
  • w pliku CSS należy dołączyć atrybut @media, który określa sposób ładowania się styli

Jak sprawdzić czy strona jest dostosowana do urządzeń mobilnych?

Stworzyłeś stronę mobilną/wersję responsywną a nadal nie wiesz czy zostanie uznana przez Google jako przyjazna urządzeniom przenośnym? Z pomocą przychodzi samo Google i podsuwa ciekawe możliwości.

1. Google Search Console

Zakładając, że posiadasz zweryfikowane konto w Google Search Console, po przejściu do zakładki “Obsługa na urządzeniach mobilnych” będziesz miał możliwość sprawdzenia czy Google zauważyło problemy z obsługą Twojej strony na urządzeniach przenośnych:

gsc obsługa na urządzeniach mobilnych

Jeśli nie pojawią się żadne problemy, powinieneś zobaczyć komunikat informujący o braku problemów. W przypadku gdy strona posiada jakieś elementy niedostosowane do urządzeń mobilnych, wówczas mogą pojawić się komunikaty dotyczące m.in.:

  • wykorzystania zawartości Flash – elementy korzystające z tej technologii często sprawiają problemy przeglądarkom dostępnym w smartfonach,
  • nieskonfigurowanego widocznego obszaru – strona przyjazna urządzeniom mobile powinna korzystać z tagu meta viewport, który informuje przeglądarki o tym jak regulować rozmiar strony,
  • rozmiaru zawartości niedopasowanego do widocznego obszaru – jeśli strona wymaga poziomego przewijania w celu przeczytania całej zawartości, wówczas uznawane jest to za element nieprzyjazny,
  • Elementów dotykowych występujących zbyt blisko siebie – jeśli elementy nawigacyjne znajdują się zbyt blisko siebie, użytkownik może mieć problem z wciśnięciem odpowiedniego przycisku,
  • inne

2. Test zgodności z urządzeniami mobilnymi

Narzędzie dostępne jest pod tym adresem i umożliwia szybkie sprawdzenie, czy nasza strona jest dostosowana do urządzeń mobilnych. Wystarczy wpisać adres witryny i po chwili czekania, ukaże się wynik testu. Jeśli witryna spełnia wszystkie wymagania, pojawi się komunikat:

strona dostosowana do urządzeń mobilnych

3. Google Resizer

Dzięki narzędziu Google Resizer, w łatwy sposób sprawdzisz jak Twoja strona wyświetla się na urządzeniach o różnej rozdzielczości ekranu. Możliwości jest całkiem sporo a standardowy widok wygląda następująco:

google resizer

W prawym górnym rogu mamy możliwość zmiany widoku, który pozwoli nam dostosować go do różnych rozdzielczości. Po wciśnięciu, w górnej części okna, pojawi się pasek umożliwiający ustawienie interesującej nas opcji:

google resizer, skala

Podsumowanie

Posiadanie strony dostosowanej do urządzeń mobilnych to obecnie standard. Google coraz mocniej naciska na webmasterów, aby Ci tworzyli strony przyjazne użytkownikom korzystającym z tego typu urządzeń. Zachętą ma być zapowiadane obniżanie pozycji w mobilnych wynikach wyszukiwania dla stron niedostosowanych.  Uważam, że wdrożenie wersji responsywnej lub mobilnej to aktualnie “must have” każdej strony ale nie ze względu na grożenie palcem ze strony giganta z Mountain View. Głównym bodźcem do tego działania powinien być przede wszystkim stale i dynamicznie rosnący ruch z urządzeń o mniejszych ekranach.

One thought on “Mobilna czy responsywna wersja strony?

  1. Warto pamiętać, że strona responsywna to dostosowana wersja normalnej strony – pozycjonujemy zawsze tą samą stronę. W przypadku stron mobilnych nie dość, że zmiany trzeba wprowadzać podwójnie, to jeszcze stronę mobilną pozycjonujemy osobno.

Dodaj komentarz

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