Coraz istotniejsze staje się maksymalne przystosowanie swojej strony internetowej do użytkowników korzystających z urządzeń mobilnych. Jeśli nie masz pewności, czy Twój serwis jest przystosowany do wyświetlania na urządzeniach mobilnych, możesz to sprawdzić pod tym adresem.
Przez wiele lat opracowano różne sposoby przygotowywania mobilnych wersji serwisów. To, jaka wersja będzie optymalna dla Twojej strony, jest bardzo indywidualną kwestią:
01. Dedykowana strona mobilna
To jedno ze starszych rozwiązań, które stosuje się do tej pory. Szczególnie sprawdzi się w przypadku małych stron bazujących na starym szablonie. W takich przypadkach strona mobilna najczęściej znajdowała się w osobnym katalogu na serwerze pełnej wersji witryny (np. domena.pl/mobile/) lub na subdomenie (np. mobile.domena.pl). Była przygotowana praktycznie od zera w oparciu o szablon, który wyświetla się w sposób prawidłowy na urządzeniach przenośnych. Trzeba tu pamiętać (zwłaszcza podczas aktualizacji zawartości na wersji strony przystosowanej do komputerów), że wersję mobilną traktuje się jako osobny serwis. Najczęściej należy dokonać wspomnianej aktualizacji zarówno na stronie przeznaczonej dla urządzeń desktopowych, jak i mobilnych. Brak treści w wersji mobilnej, które jednocześnie pojawiają się w wersji na komputery może mieć zły wpływ na ocenę witryny przez algorytm wyszukiwarki.
W systemie WordPress warto zainteresować się wtyczką WPTouch, która automatycznie przygotuje wersję mobilną, nie naruszając przy tym aktualnego szablonu. Darmowa wersja umożliwia pracę na jednym szablonie i pozwala na umieszczenie logo witryny oraz dostosowanie koloru akcentów.
Niestety w przypadku tego rozwiązania, wersja mobilna może zostać uznana przez Google jako duplikat naszej witryny, ponieważ znajduje się pod innym adresem. To z kolei może mieć niekorzystny wpływ na jej pozycjonowanie. Konieczne jest wtedy poinformowanie robotów wyszukiwarek o istnieniu takiej wersji mobilnej poprzez zastosowanie tagu link zawierającego atrybuty rel=”canonical” oraz rel=”alternate” (czynność należy wykonać dla kążdej podstrony).
Należy pamiętać też o odpowiedniej konfiguracji Google Analytics i przeniesieniu zdarzeń z Google Analytics (np. po wysłaniu formularza) dla obu wersji witryny.
Jak zapewne sam zauważyłeś, takie rozwiązanie jest nieco kłopotliwe i sprawdzi się tylko w nielicznych przypadkach. Koszty związane z dodatkowymi działaniami mogą przewyższyć koszt przygotowania od podstaw responsywnego szablonu strony.
02. Strony responsywne (RWD)
W tym przypadku strona oparta jest na jednym szablonie, który dostosowuje się do wielkości ekranu i działa w oparciu o jeden panel zarządzania. Modyfikacje wprowadzane w pełnej wersji serwisu nanoszone są automatycznie także w jego wersji mobilnej. Dodatkową zaletą jest umiejscowienie wszystkich treści pod jednym adresem.
Niestety dostosowanie istniejącego serwisu pod RWD często wymaga przygotowania szablonu od nowa. Należy wtedy pamiętać, aby strona wyglądała poprawnie na każdym urządzeniu oraz żeby prezentowała taką samą zawartość.
Powstało wiele platform, które wspomagają prace nad dostosowaniem szablonu do różnych ekranów. Najpopularniejsze to:
- Bootstrap,
- Foundation,
- Skeleton,
- HTML5 Boilerplate.
Pozycjonowanie takiej strony jest też prostsze niż w pierwszym przypadku, ponieważ nie trzeba się martwić eliminowaniem duplikatów albo trudnościami związanymi z monitorowaniem statystyk Google Analytics. W przypadku RWD wdrażamy optymalizacje pod kątem wyszukiwarek internetowych jednorazowo dla wszystkich urządzeń. Taki szablon będzie również sprawiał mniej problemów z optymalizacją treści oraz wdrożeniem optymalizacji pod kątem wyszukiwarek internetowych.
03. Przyspieszone strony mobilne (AMP)
To stosunkowo nowe podejście do projektowania stron mobilnych, które niesie wiele zalet. Od pewnego czasu istnieje możliwość sprawdzenia, czy podstrony danego serwisu są zgodne z tym standardem, np. przy pomocy Testu AMP. Dzięki współpracy z Google, strony bazujące na tej technologii wczytują się jeszcze szybciej ponieważ korzystają z cache znajdującego się na serwerach Google.
AMP jest jednak rygorystyczny jeśli chodzi o korzystanie z JavaScript oraz standardu HTML, co często wymusza pracę od podstaw nad kodem witryny. W przypadku tego standardu przewidziane są nawet inne tagi HTML niż te znane z HTML5.
Niewątpliwą zaletą jest na pewno szybkość ładowania strony oraz dodatkowe wyróżnienie strony w mobilnych wynikach wyszukiwania poprzez dodanie ikony błyskawicy.
Jeśli posiadamy system WordPress to podobnie jak w przypadku dedykowanej strony mobilnej, możemy za pomocą zewnętrznej wtyczki (np. AMP By Automattic) przygotować automatycznie odpowiednik naszego serwisu zgodny ze standardem AMP.
Ruch generowany z urządzeń mobilnych rośnie, co daje jasny sygnał, że zamiast zastanawiać się czy dany serwis potrzebuje wersji mobilnej, powinniśmy zapytać o to, które z rozwiązań dla wersji mobilnej będzie w tym przypadku optymalne.