Mobile first, dlaczego to już obowiązek

Mobile first i responsywna strona, krótka odpowiedź

Google indeksuje strony głównie w wersji mobilnej i na tej podstawie decyduje o pozycjach. Jeśli Twoja witryna działa dobrze tylko na komputerze, tracisz widoczność, ruch i klientów, bo większość wyszukiwań odbywa się na smartfonach. Responsywna strona internetowa to dziś warunek wejścia do gry, a nie atut wyróżniający.

Ten artykuł wyjaśnia, co w praktyce oznacza podejście mobile first, jak sprawdzić, czy Twoja strona spełnia standardy, i co konkretnie poprawić, jeśli tego nie robi.

Dlaczego Google stawia telefon przed komputerem

Google oficjalnie ogłosiło przejście na mobile-first indexing w 2019 roku i zakończyło ten proces dla wszystkich witryn w 2023 roku. Znaczy to jedno: crawler Google odwiedza Twoją stronę przede wszystkim jako użytkownik smartfona. Na podstawie tej wersji strony ocenia jej treść, szybkość, jakość i przyznaje pozycje w wynikach wyszukiwania (Google Search Central).

Wersja desktopowa przestała decydować o rankingu. Jeśli Twoja strona ma rozbudowaną treść na komputerze, a wersja mobilna jest okrojona lub trudna w użyciu, Google widzi tylko tę gorszą wersję i ocenia ją odpowiednio.

Skala ruchu mobilnego, liczby, które mówią same za siebie

Ponad połowa wyszukiwań w Google odbywa się na urządzeniach mobilnych. W przypadku wyszukiwań lokalnych, czyli zapytań typu "fryzjer w pobliżu" lub "hydraulik Warszawa", odsetek ten jest jeszcze wyższy, bo wyszukiwania lokalne często pojawiają się w ruchu podczas podróży lub wyjścia z domu.

Według danych Backlinko, 46 procent wszystkich wyszukiwań w Google ma intencję lokalną. Niemal każde z nich odbywa się na telefonie. Oznacza to, że responsywna strona firmy lokalnej to narzędzie pozyskiwania klientów, a nie jedynie element identyfikacji wizualnej.

Użytkownik na telefonie, który trafia na stronę niedziałającą poprawnie na ekranie smartfona, zamyka ją w ciągu kilku sekund. Wysoki współczynnik odrzuceń oznacza nie tylko straconego klienta, ale też sygnał dla Google, że strona nie odpowiada na potrzeby użytkownika.

Czym jest responsywna strona i co odróżnia ją od wersji mobilnej

Responsywna strona to witryna zaprojektowana tak, by automatycznie dostosowywała układ i elementy do rozmiaru ekranu, na którym jest wyświetlana. Jeden adres URL, jeden zestaw treści, jeden kod, a wygląd dopasowuje się do każdego urządzenia za pomocą reguł CSS.

To inne podejście niż oddzielna wersja mobilna, czyli strona dostępna pod adresem m.domena.pl, będąca osobnym bytem. Oddzielne wersje mobilne to rozwiązanie z poprzedniej dekady. Generują problemy z synchronizacją treści, duplikowaniem URL i wymagają podwójnej pracy przy każdej aktualizacji.

Responsywny design oparty na jednym kodzie to standard, który Google jednoznacznie zaleca jako preferowany sposób budowy stron przyjaznych urządzeniom mobilnym.

Co konkretnie sprawdza Google na wersji mobilnej

Google nie ocenia strony mobilnej na podstawie jednego parametru. W grę wchodzi kilka obszarów, które razem decydują o tym, jak strona jest oceniana w wynikach.

Google Search Console w raporcie "Użyteczność na urządzeniach mobilnych" wskazuje konkretne problemy na konkretnych podstronach. To bezpłatne narzędzie, które powinno być punktem wyjścia przed jakąkolwiek optymalizacją.

Jak sprawdzić, czy Twoja strona jest responsywna

Sprawdzenie zajmuje dosłownie kilka minut i nie wymaga żadnej wiedzy technicznej.

1. 01
   Test Google Mobile FriendlyWejdź na search.google.com/test/mobile-friendly i wklej adres swojej strony. Narzędzie pokazuje, jak Google widzi Twoją stronę na urządzeniu mobilnym, i flaguje konkretne problemy.
2. 02
   Google Search ConsoleJeśli masz skonfigurowaną Search Console, przejdź do raportu 'Użyteczność na urządzeniach mobilnych'. Zobaczysz listę stron z problemami i ich opis.
3. 03
   PageSpeed Insights dla wersji mobilnejNa pagespeed.web.dev wyniki prezentowane są domyślnie dla wersji mobilnej. Sprawdź LCP, INP i CLS na telefonie. Wynik Core Web Vitals na mobile decyduje o ocenie rankingowej.
4. 04
   Ręczny test na telefonieOtwórz swoją stronę na prawdziwym smartfonie i przewiń każdą podstronę. Sprawdź, czy tekst jest czytelny, przyciski klikalne, a formularze działają. To najszybszy test rzeczywistego doświadczenia.

Ręczny test na telefonie jest prostszy niż myślisz i często ujawnia problemy, których automatyczne narzędzia nie wychwytują. Strona wyglądająca poprawnie w trybie podglądu mobilnego w przeglądarce może działać inaczej na prawdziwym urządzeniu z ekranem dotykowym.

Najczęstsze błędy, przez które strona nie działa na telefonie

Większość problemów z responsywnością to kilka powtarzających się wzorców. Znajomość ich pozwala szybko znaleźć winowajcę.

Stały szerokość (fixed width) w pikselach

Jeśli układ strony jest zaprojektowany na stały rozmiar, na przykład 1200 pikseli, i nie ma żadnych reguł CSS dostosowujących układ do mniejszych ekranów, na telefonie pojawi się poziomy scrollbar lub treść wychodzi poza ekran. Rozwiązaniem jest użycie jednostek procentowych lub max-width zamiast width w pikselach, a układy budować za pomocą flexbox lub CSS grid z responsive breakpoints.

Obrazy bez ograniczenia szerokości

Obraz o szerokości 1500 pikseli wczytany na stronie bez reguły max-width: 100% w CSS rozepchnie układ na telefonie. Prosta reguła CSS rozwiązuje ten problem globalnie.

Za małe przyciski i elementy klikalne

Google zaleca minimalny rozmiar celu dotyku 48 x 48 pikseli. Przyciski o rozmiarze 20 x 20 pikseli wyglądają nieźle na desktopie, ale na telefonie użytkownik trafia palcem w sąsiedni element lub nie trafia wcale. Efekt to frustracja i wyjście ze strony.

Treść ukryta na mobile

Jeśli na wersji mobilnej chowasz sekcje, które są widoczne na desktopie, za pomocą display: none lub podobnych technik, Google nie bierze tej treści pod uwagę przy indeksowaniu. To jeden z częstszych błędów przy projektowaniu mobilnym na zasadzie "ukryjmy to, co nie mieści się na ekranie".

Mobile first a szybkość strony, nierozłączna para

Responsywna strona to nie tylko układ. Na urządzeniach mobilnych użytkownicy często korzystają z sieci komórkowej, która jest wolniejsza od WiFi i ma wyższe opóźnienia. To oznacza, że strona, która ładuje się w dwie sekundy na WiFi, może potrzebować pięciu na LTE w budynku.

Google ocenia szybkość strony osobno dla wersji mobilnej i desktopowej. Wyniki Core Web Vitals na mobile są zazwyczaj gorsze niż na desktop, właśnie przez różnicę w warunkach połączenia i moc obliczeniową typowego smartfona w stosunku do laptopa.

Praktyczna zasada: zanim uznasz stronę za wystarczająco szybką, sprawdź wyniki na wersji mobilnej w PageSpeed Insights. LCP poniżej 2,5 sekundy na mobile to cel, który warto mieć na uwadze przy każdej budowie lub przebudowie strony.

Więcej o tym, ile czasu wymaga budowanie widoczności po stronie technicznej, przeczytasz w artykule ile czasu trwa pozycjonowanie strony. Jeśli szukasz dalszych kroków po naprawieniu responsywności, sprawdź też jak wypozycjonować firmę lokalnie.

Mobile first a pozycjonowanie lokalne

Dla firm lokalnych responsywna strona to warunek skutecznego pozycjonowania. Użytkownik szukający usługi w pobliżu robi to niemal zawsze na telefonie. Kliknięcie w wynik wyszukiwania prowadzi bezpośrednio na stronę. Jeśli strona nie działa poprawnie na smartfonie, cały wysiłek włożony w budowanie widoczności w Google jest zmarnowany na ostatniej prostej.

To szczególnie widoczne w dużych miastach, gdzie konkurencja między firmami jest wysoka, a użytkownicy mają do wyboru kilka stron. W Warszawie, Krakowie czy Wrocławiu klient, który natrafi na niedziałającą stronę mobilną, kliknie kolejny wynik, gdzie znajdzie stronę działającą sprawnie.

Responsywna strona wpływa też na pozycjonowanie przez sygnały behawioralne. Użytkownik, który wchodzi na stronę i natychmiast ją zamyka, bo nie może przeczytać tekstu ani kliknąć przycisku, wysyła sygnał, że strona nie odpowiedziała na jego potrzebę. Długoterminowe zbieranie takich sygnałów może osłabiać pozycje.

Co oznacza mobile first przy budowie nowej strony

Podejście mobile first w projektowaniu oznacza, że zaczyna się od wersji mobilnej, a dopiero potem rozszerza układ na większe ekrany. To odwrócenie tradycyjnego procesu, w którym najpierw projektuje się desktop, a potem "ściska" go do telefonu.

Powód jest prosty: trudniej jest uprościć skomplikowany układ desktopowy niż rozbudować prosty układ mobilny. Projektowanie od małego ekranu wymusza hierarchię treści i skupienie na tym, co najważniejsze dla użytkownika.

W praktyce oznacza to kilka konkretnych decyzji przy budowie strony:

• Nawigacja mobilna musi być dostępna bez hover. Menu hamburger lub inne rozwiązania dotykowe to standard, a nie opcja.
• Czcionki bazowe powinny być czytelne na małym ekranie bez powiększania, co zwykle oznacza rozmiar bazowy 16 px lub więcej.
• Odstępy między elementami klikalnymi muszą uwzględniać grubość palca, nie kursora myszy.
• Formularze kontaktowe powinny mieć pola wystarczająco duże, z odpowiednim typem klawiatury mobilnej (email, tel, number) podpiętym przez atrybut type.

Przy wyborze technologii dla nowej strony warto sprawdzić, jak dany system zarządza responsywnością. Porównanie opcji znajdziesz w artykule WordPress czy strona kodowana. Jeśli planujesz budżet, sprawdź też ile kosztuje strona internetowa.

Najczęstsze pytania

Czy każda strona firmowa musi być responsywna?

Tak, bez wyjątku. Mobile-first indexing Google obowiązuje od 2023 roku dla wszystkich witryn. Strona, która nie jest dostosowana do urządzeń mobilnych, ma gorsze pozycje, wyższy współczynnik odrzuceń i traci klientów, którzy wyszukują usługi na smartfonach. Responsywna strona to dziś warunek wejścia, niezależnie od branży czy wielkości firmy.

Jak sprawdzić, czy moja strona jest responsywna?

Najszybciej przez narzędzie Google Mobile-Friendly Test dostępne pod adresem search.google.com/test/mobile-friendly. Wpisz adres strony i w kilka sekund zobaczysz wynik oraz listę ewentualnych problemów. Możesz też sprawdzić raport "Użyteczność na urządzeniach mobilnych" w Google Search Console, który pokazuje stan wszystkich podstron.

Czy responsywna strona automatycznie oznacza dobrą pozycję w Google?

Responsywność to warunek konieczny, ale nie jedyny. Google ocenia też szybkość ładowania, jakość treści, strukturę nagłówków, linki prowadzące do strony i wiele innych czynników. Strona responsywna, ale wolna lub z ubogą treścią, nie wygra z szybką, bogatą w treść stroną konkurencji. O tym, jak budować pełną widoczność, przeczytasz w artykule czym jest local SEO oraz na stronie pozycjonowanie stron.

Czy strona zbudowana na kreatorze (np. Wix, Squarespace) jest automatycznie responsywna?

Nowoczesne kreatory generują responsywne strony domyślnie, ale to nie znaczy, że wynik jest zawsze dobry. Automatycznie wygenerowany responsywny układ może mieć problemy z czytelnością tekstu, rozmiarami klikanych elementów lub szybkością ładowania na telefonie. Warto ręcznie sprawdzić stronę na kilku urządzeniach i przepuścić przez PageSpeed Insights, niezależnie od tego, na czym jest zbudowana.