Projektowanie stron Internetowych z myślą o urządzeniach mobilnych

Jak wynika z danych mobiRank, aż 5,22 miliarda ludzi korzysta obecnie z telefonu komórkowego – co stanowi 66,6% całej populacji świata. Z tych samych badań możemy dowiedzieć się, że 92% wszystkich użytkowników sieci łączy się z nią przy pomocy smartfona. W obliczu takich danych, o słuszności zasady mobile first chyba nikogo nie trzeba przekonywać. Pojawia się jednak inne pytanie: jakie rozwiązania powinieneś wdrożyć, by Twoja witryna działa niezawodnie na urządzeniach mobilnych i tym samym była bardziej przyjazna dla SEO?

Strona dostępna na urządzeniach mobilnych — który wariant wybrać?

Responsywna czy mobilna strona internetowa? Bez względu na to, które rozwiązanie wybierzesz, Twoja witryna będzie dostępna na urządzeniach przenośnych, każde ma jednak swoje zalety i wady

Strona mobilna

Zacznijmy od tego, że strony mobilne nie są tym samym, co strony responsywne.

W pierwszym przypadku mamy do czynienia z osobną witryną, stworzoną wyłącznie pod urządzenia mobilne. Zazwyczaj taka strona dostępna jest na subdomenie z przedrostkiem “m”.

Strona mobilna to bez wątpienia ukłon w stronę użytkowników i robotów indeksujących. Dlaczego? Taka witryna jest “lżejsza” od responsywnej. Dzięki temu dużo szybciej się ładuje, a w przypadku gdy użytkownik korzysta z transmisji danych, potrzebuje ich po prostu mniej.

Czas ładowania się strony jest istotny jeszcze z jednego powodu. To jeden z ważniejszych czynników rankingowych, które decydują o pozycji Twojej strony w wyszukiwarce.

Kolejna zaleta strony mobilnej to możliwość dostosowania jej w 100% do wymagań urządzeń przenośnych (dotyczy to chociażby fontu, treści czy układu witryny).

Takie rozwiązanie ma też jednak swoje wady. Strona mobilna to tak naprawdę osobna witryna z oddzielnym panelem administracyjnym. W praktyce oznacza to więcej pracy przy zarządzaniu i aktualizacji dwóch witryn, np. kiedy będziesz publikować na nich nowy content, np. wpisy blogowe.

Strona responsywna

Strona responsywna, czyli Responsive Web Design (RWD) to uniwersalna witryna. Taka, która będzie się wyświetlać prawidłowo zarówno na desktopie, jak i na urządzeniu mobilnym, tzn.”dostosuje się” do każdej rozdzielczości ekranu.

Bez wątpienia to praktyczne rozwiązanie: strona jest dostępna pod jednym adresem i możesz nią zarządzać z poziomu jednego panelu. A jednocześnie masz pewność, że witryna wyświetla się każdemu użytkownikowi, bez względu na rodzaj urządzenia, z którego korzysta.

Musisz jednak liczyć się z tym, że stworzenie responsywnej strony Internetowej będzie o wiele droższe od stworzenia mobilnej. Szczególnie jeśli zależy Ci na indywidualnych rozwiązaniach i nie chcesz skorzystać z gotowego, nieco tylko spersonalizowanego, szablonu. Co więcej, zaprojektowanie takiej strony potrwa dłużej niż stworzenie witryny wyłącznie z myślą o użytkownikach mobilnych.

AMP — standard kodowania open source

Jak dostosować stronę do urządzeń mobilnych? Z pomocą przychodzi AMP.

Co to takiego? Skrót ten pochodzi od Accelerated Mobile Pages, co możemy przetłumaczyć jako “przyspieszone strony mobilne”. To zespół komponentów, które umożliwiają przyspieszenie ładowania się strony.

Projekt jest rozwijany pod przewodnictwem Google’a. Jak łatwo się domyślić, powstał z myślą o użytkownikach urządzeń mobilnych. O tym, jak bardzo jest powszechny, mogą świadczyć gotowe integracje z najpopularniejszymi systemami, m.in. z WordPressem.

Zadaniem AMP jest dostosowanie strony do urządzeń mobilnych, przede wszystkim pod kątem czasu wczytywania. Jest to możliwe dzięki błyskawicznemu dopasowaniu się witryny do rozdzielczości i wielkości ekranu.

AMP bazuje na:

• AMP JS — odpowiada za optymalizację czasu ładowania się zasobów na stronie,
• AMP Cache — pozwala na szybkie załadowanie strony, dzięki pamięci podręcznej,
• AMP HTML — dodatkowy standard HTML, który pozwala na optymalizację kodu.

Kiedy warto wdrożyć AMP?

Jeśli często aktualizujesz treści na swojej stronie (np. prowadzisz blog) lub jeśli prowadzisz serwis newsowy, to rozwiązanie powinno Cię zainteresować. Wdrożenie AMP zalecamy także w przypadku witryn z dużą ilością contentu, zwłaszcza “ciężkiego”, czyli grafiki i elementów interaktywnych.

Projektowanie stron z myślą o urządzeniach mobilnych a UX i SEO

Kolejne aktualizacje Google jasno wskazują kierunek zmian, którymi podążają jego twórcy. Pozytywne doświadczenia użytkowników są dla nich priorytetem i dyktują zasady optymalizacji stron internetowych (w tym mobilnych).

Przykładowo, optymalizacja czasu ładowania się strony, kluczowa z punktu widzenia UX, to równocześnie jeden z najważniejszych czynników rankingowych.

Co więcej, Google podąża z duchem czasu. Stąd zasada mobile first.

Kiedy warto zdecydować się na stronę responsywną, a kiedy na mobilną?

Decyzja należy do Ciebie. Wszystko zależy od Twoich oczekiwań, branży, budżetu i tego, ile możesz czekać na zakończenie prac. Mobilna witryna będzie raczej mało praktyczna w przypadku branży e-commerce, ze względu na konieczność częstej aktualizacji.