Początków urządzeń mobilnych możemy doszukiwać się na początku XX wieku, kiedy to testowano pierwsze telefony w niemieckich pociągach wojskowych. Jednak to przedsiębiorstwo Reichsbahn może przypisać sobie pierwszy sukces komercyjny – umożliwili oni pasażerom pierwszej klasy korzystanie z radiotelefonów w pociągach kursujących między Berlinem a Hamburgiem. To był dopiero przełom! Nie trzeba było długo czekać, aby rozpętał się prawdziwy wyścig technologiczny. I tak od Motoroli ważącej ponad kilogram doszliśmy do smartwatcha odbierającego połączenia i wiadomości SMS.

Urządzenia mobilne

Są to wszelkiego rodzaju przenośne urządzenia, które pozwalają na odbieranie i wysyłanie danych bez konieczności przewodowego połączenia z siecią. Mówiąc najprościej, są to wszystkie:

  •  telefony, smartfony,
  •  tablety, notebooki,
  •  odtwarzacze mp4 i mp4,
  • GPS,
  • PlayStation Portable, Nintendo DS. 

Desktop-First czy Mobile-First?

Cofając się w przeszłość, wiemy, że wszystkie powstające strony były tworzone jako desktop, z czasem dopiero przyszła możliwość dostosowania strony do urządzeń mobilnych, jednak przez długi czas była to jedynie ewentualność. O co chodzi?

Technika desktop-first (graceful degradation) polega na stworzeniu projektu strony na urządzenia stacjonarne o najlepszej rozdzielczości HD, tak aby wykorzystać potencjał dużego ekranu. Następnie, jeśli chcemy dostosować się do mniejszych ekranów pozbywamy się niektórych elementów ze strony i skryptu bądź ukrywamy części skryptu. W efekcie otrzymujemy stronę o niższej rozdzielczości, często z niedostosowanym układem wprowadzającym chaos w odbiorze.

Rzecz ma się odwrotnie w przypadku projektowania mobile-first (progressive enhancement), gdzie zaczynamy tworzenie strony od najmniejszego urządzenia. Dostosowuje się je pod kątem User Experience oraz technicznych możliwości urządzenia. Następnie, wraz ze wzrostem rozdzielczości, dokładamy nowe funkcje i rozbudowujemy układ strony. Na mobilnej wersji nie stosuje się elementów ukrytych, które zwiększają wagę strony. Dzięki temu jest szybsza, co wpływa na wskaźnik konwersji.

Dziś – wraz z rosnącą liczbą internautów oraz rozwojem technologii – jeśli nie masz strony dostosowanej do małego ekranu, to praktycznie nie istniejesz. To naturalna kolej rzeczy przy wysokiej konkurencji, gdzie za nowymi narzędziami pojawiają się na rynku nowe firmy zastępujące poprzednie, które się nie dostosowały. Strony stworzone na urządzenia stacjonarne przestaną trafiać do pełnej puli użytkowników, ze 100% można spaść nawet poniżej 30%.

Bądź elastyczny!

Responsive Web Design (RWD), czyli elastyczne, responsywne strony internetowe. Jest to obecnie najpopularniejsza technika automatycznego dostosowywania się ekranu do rozmiaru okna przeglądarki, np. smartfonów czy tabletów. Projektując stronę, warto o tym pamiętać, ponieważ Google lepiej ocenia strony, które poprawnie wyświetlają się na urządzeniach mobilnych. Nastała era „mobilegeddon”.

Jak nowocześnie projektować strony z duchem mobile-first?

Oto kilka wskazówek o czym pamiętać, projektując wysokiej jakości strony na urządzeniach mobilnych. Jak zauważysz, wszystkie one skupiają się na użytkowniku – to właśnie jego doświadczenie oraz wrażenia są katalizatorem zmian.

  • Obecnie coraz większą popularnością cieszą się animowane elementy 3D, które są wprowadzane w ruch. Jest to szczególnie przydatne dla witryn e-commerce, dzięki czemu można zaprezentować cały produkt.
  • Atutem wielu stron jest możliwość ich personalizacji, dokładnie tak jak robimy to z naszymi telefonami. Ustawiamy tryb nocny, zmieniamy tapety, układy.
  • Korzystanie z telefonów jest coraz bardziej intuicyjne, wiele stron rezygnuje więc z przycisków. Swipe jest znacznie szybszy i wygodniejszy.
  • Nie można również zapomnieć o możliwości obracania ekranu. Należy dostosować urządzenia do nagłej zmiany z rozdzielczości wertykalnej na horyzontalną, co wpływa na odbiór całego układu projektu.
  • Powoli dociera do nas trend podzielonego ekranu (split screen), który może posłużyć do prezentowania dwóch różnych danych.
Źródło: Anete Lusina/pexels.com

Optymalizacja pod kątem SEO

Mobile-First Index

Jest to zmiana w indeksowaniu stron przez Google. W tym przypadku wyszukiwarka w pierwszej kolejności kieruje się na mobilna wersję strony, a następnie określa ranking wyszukiwania. Mobile-first sprawia, że Google zaczyna traktować mobilną wersję strony jako podstawową.

Jest to duża zmiana w sposobie oceniania stron. Dlaczego do niej w ogóle doszło? Nic prostszego: trend urządzeń mobilnych ciągle rośnie (co ciekawe nie zmieniło się to podczas okresu pandemii), a Google dostrzegł wielkie różnice pomiędzy wersją desktopową a mobilną strony. Od marca 2021 roku Google całkowicie przeszedł na indeksowanie mobile-first.

W kontekście SEO brak mobilnej i responsywnej witryny bezpośrednio wpływa spadek pozycji w wynikach wyszukiwania bądź oznaczenie strony jako „nieprzyjaznej” dla użytkownika mobilnego. Dochodzi wówczas do spadku ruchu, a tym samym zmniejszenia sprzedaży i zainteresowania. Na co więc warto zwrócić uwagę, starając się poprawić jakość swojej strony?

  1. Pamiętaj, aby treść strony mobilnej nie różniła się od desktopowej.
  2. Zadbaj o metadane na obu wersjach.
  3. Pilnuj poprawności linków hreflang.
  4. Sprawdź, czy Twój serwer posiada odpowiednie zasoby do obsługi indeksowania mobilnej wersji witryny.
  5. Zadbaj o poprawność pliku robots.txt.

Najczęstsze błędy, które wpływają na Mobile-First Index:

  • zablokowane pliki CSS, JavaScript i robots.txt.,
  • błędne przekierowania 301,
  • błędny 404,
  • pełnoekranowe reklamy zasłaniające zawartość strony,
  • błędne linkowanie wewnętrzne i zewnętrzne,
  • źle dobrana czcionka,
  • ustawienie elementów interaktywnych zbyt blisko siebie.

Podsumowanie

Minęło zaledwie sto lat od powstania pierwszych urządzeń mobilnych, a dziś nie wyobrażamy sobie bez nich naszego codziennego funkcjonowania. W domu, w pracy, w podróży – wszędzie. Będąc twórcą strony internetowej, musisz pamiętać o dostosowaniu jej do mniejszych ekranów. Jest to szczególnie ważne w kontekście strategii optymalizacji pod kątem wyszukiwarek (SEO), aby móc zapewnić sobie widoczność w sieci. Z jednej strony zadowolisz roboty indeksujące, z drugiej swoich użytkowników. Pamiętaj, że nie tworzysz w próżni – bądź mobilny. 

Zdjęcie główne: Andrea Piacquadio/pexels.com

Autor