Strona wypada źle na urządzeniach mobilnych zwykle z czterech powodów: błędnie skonfigurowanego viewportu, zbyt małego tekstu, elementów klikalnych umieszczonych za blisko siebie i treści szerszej niż ekran. Te same kryteria sprawdzają automatyczne audyty i tak samo ocenia je użytkownik. Poniżej znajdziesz diagnozę każdego z nich oraz konkretne poprawki.
Co sprawdza się w teście mobile friendly?
Ocena wersji mobilnej strony opiera się na czterech kryteriach technicznych: konfiguracji viewportu, czytelności tekstu, odstępach między elementami dotykowymi i dopasowaniu treści do szerokości ekranu.
Viewport mówi przeglądarce, jak zarządzać wymiarami i skalowaniem strony. Bez poprawnych ustawień witryna wyświetla się oddalona albo wymaga przewijania w poziomie. Audyt szuka znacznika meta viewport w sekcji head dokumentu HTML.
Czytelność tekstu dotyczy wielkości czcionki i interlinii. Sprawdza się, czy tekst da się odczytać bez powiększania. Minimum dla treści głównej to 16 pikseli.
Odstępy między elementami dotykowymi określają, czy przyciski i odnośniki mają wokół siebie dość miejsca. Przyjęty próg to obszar dotykowy co najmniej 48 na 48 pikseli, oddzielony od sąsiadów. Bez tego użytkownik trafia palcem w niewłaściwy element.
Kontrola szerokości treści potwierdza, że zawartość nie wykracza poza krawędzie ekranu i nie wymusza przewijania w poziomie.
Co to znaczy, że strona jest responsywna?
Responsywna strona internetowa dostosowuje układ, wielkość tekstu i rozmieszczenie elementów do rozdzielczości urządzenia, na którym się wyświetla. Jeden kod obsługuje telefon, tablet i desktop, a o wyglądzie decydują zapytania medialne w CSS.
To odróżnia ją od osobnej wersji mobilnej strony, publikowanej dawniej pod oddzielnym adresem (najczęściej w subdomenie m.). Takie rozwiązanie oznaczało dwa serwisy do utrzymania i dwa zestawy treści do zsynchronizowania. Dziś standardem jest jedna responsywna strona www pod jednym adresem.
Responsywność nie gwarantuje jednak dobrej optymalizacji mobilnej. Układ może poprawnie się skalować, a mimo to mieć za małe przyciski, zbyt drobny tekst albo ładować się kilkanaście sekund. To dwie różne rzeczy i warto je rozdzielać przy ocenie serwisu.
Dlaczego strony nie przechodzą testu optymalizacji mobilnej?
Najczęstsze przyczyny to problemy z viewportem, za mała czcionka, ciasno rozmieszczone elementy klikalne i treść wychodząca poza szerokość ekranu. Zwykle biorą się z przestarzałego podejścia do projektowania albo z pominięcia optymalizacji mobilnej na etapie wdrożenia.
Na czele listy stoi konfiguracja viewportu. Wiele witryn nie ma poprawnego znacznika albo używa ustawień blokujących prawidłowe renderowanie. Bez niego przeglądarka mobilna zakłada, że strona powstała pod desktop, i pomniejsza całość.
Problemy z wielkością tekstu pojawiają się tam, gdzie zastosowano sztywne wartości w pikselach. Na desktopie działają, na telefonie stają się nieczytelne. Dotyczy to zwłaszcza starszych serwisów, budowanych bez zasad projektowania responsywnego.
Zbyt ciasno rozmieszczone elementy klikalne psują obsługę. Dzieje się tak, gdy menu, przyciski czy odnośniki nie mają odstępów dopasowanych do dotyku palcem. Użytkownik klika nie w to, w co chciał.
Wychodzenie treści poza ekran wynika ze sztywnych szerokości elementów, obrazów lub tabel. Wymusza przewijanie w poziomie, uznawane za poważny błąd użyteczności.
Jak sprawdzić, czy strona jest responsywna?
Stan wersji mobilnej strony zweryfikujesz przez Lighthouse, narzędzia deweloperskie przeglądarki, dane z Chrome User Experience Report oraz testy ręczne na prawdziwych urządzeniach.
Zacznij od Lighthouse, wbudowanego w Chrome i dostępnego przez PageSpeed Insights. Audyt w profilu mobilnym pokazuje wielkość czcionek, wymiary obszarów dotykowych, ustawienie viewportu i czas ładowania. To dziś podstawowe narzędzie do tego zadania. Dawny Mobile-Friendly Test oraz raport Mobile Usability w Search Console zostały wygaszone przez Google 1 grudnia 2023 roku, a stary adres testu przekierowuje właśnie do dokumentacji Lighthouse.
Skorzystaj z narzędzi deweloperskich przeglądarki, aby symulować urządzenia mobilne. W Chrome otwórz je klawiszem F12 i włącz tryb urządzenia. Przetestuj różne rozdzielczości i orientacje ekranu.
W Search Console sprawdź raport Core Web Vitals. Pokazuje grupy adresów z problemami wydajnościowymi na urządzeniach mobilnych i pozwala ustalić kolejność poprawek w skali całego serwisu.
Testy ręczne na prawdziwych urządzeniach pozostają niezastąpione. Ujawniają problemy, których narzędzia automatyczne nie wychwycą: niewygodne gesty, elementy zasłaniane przez klawiaturę, formularze trudne do wypełnienia jedną ręką.
Strona responsywna a mobile first – czym się różnią?
Podejście responsywne sprowadza się do tego, że strona poprawnie działa na telefonie. Mobile first traktuje urządzenie mobilne jako platformę wyjściową i rozbudowuje interfejs w górę, ku większym ekranom.
Klasyczne wdrożenie responsywne wychodzi od projektu na duży ekran i skaluje go w dół. To podejście, nazywane graceful degradation, działa, ale wersja mobilna zwykle na tym traci. Dostaje uproszczony układ desktopowy, nie projekt zaprojektowany pod dotyk.
Mobile first działa odwrotnie, zgodnie z zasadą progresywnego wzbogacania. Punktem wyjścia jest podstawowa funkcjonalność mobilna, zwykle projekt dla szerokości 320 pikseli. Następnie dochodzą warianty na tablet (768 pikseli) i desktop (1920 pikseli).
Przewaga jest przede wszystkim wydajnościowa. Telefon pobiera wyłącznie te style i skrypty, których faktycznie potrzebuje. Widgety desktopowe, złożone animacje i ciężką grafikę dokłada się stopniowo dla większych ekranów.
Z perspektywy użyteczności mobile first uwzględnia od początku interakcje dotykowe, uproszczoną nawigację i hierarchię treści. Powstaje czytelna wersja mobilna, a nie ściśnięta adaptacja układu desktopowego.
Jak naprawić najczęstsze błędy wersji mobilnej?
Dostosowanie strony do urządzeń mobilnych sprowadza się do czterech działań: poprawnej konfiguracji viewportu, korekty wielkości tekstu, właściwych odstępów dotykowych i dopasowania treści do szerokości ekranu.
Viewport. Dodaj do sekcji head dokumentu HTML znacznik:
html
<meta name="viewport" content="width=device-width, initial-scale=1">Nakazuje on przeglądarce dopasować szerokość do ekranu urządzenia i zastosować standardowy poziom powiększenia.
Wielkość tekstu. Zrezygnuj ze sztywnych pikseli na rzecz jednostek względnych. Ustaw bazową wielkość czcionki na minimum 16 pikseli i stosuj em lub rem. Zadbaj o interlinię w przedziale 1,4 do 1,6.
Odstępy dotykowe. Każdy obszar klikalny powinien mieć co najmniej 48 na 48 pikseli i być oddzielony od sąsiadów. Wykorzystaj wypełnienie i marginesy w CSS. W menu nawigacyjnym rozważ większe przyciski albo układ zwijany.
Szerokość treści. Zastosuj CSS Grid lub Flexbox. Maksymalne szerokości definiuj procentowo, nie w sztywnych pikselach, a obrazom nadaj właściwości max-width: 100% i height: auto.
Do różnicowania stylów zależnie od rozdzielczości użyj zapytań medialnych. Pozwalają dostosować układ, ukryć zbędne elementy i zmienić odstępy wyłącznie w wersji mobilnej, bez ingerencji w wygląd na desktopie.
Optymalizacja mobilna a pozycjonowanie
Google indeksuje strony w modelu mobile first, czyli do oceny i szeregowania bierze przede wszystkim wersję mobilną. Jeśli wersja mobilna ma uboższą treść niż desktopowa, wyszukiwarka widzi tę uboższą.
Do tego dochodzą wskaźniki Core Web Vitals jako czynnik rankingowy. Wolne ładowanie, przesuwający się układ i opóźniona reakcja na dotyk obniżają ocenę strony niezależnie od jakości treści.
Skutki wykraczają jednak poza pozycje w wynikach. Konwersja spada na źle zoptymalizowanych stronach mobilnych wyraźnie: użytkownicy porzucają koszyki i formularze, gdy natrafiają na trudną nawigację albo nieprecyzyjne elementy dotykowe. Rosną też koszty obsługi, bo serwisy z problemami użyteczności generują więcej zgłoszeń.
Dopracowana wersja mobilna buduje wiarygodność. Zaniedbana sugeruje, że firma nie nadąża za standardami rynku.
Optymalizacja strony mobilnej to nie kwestia zaliczenia testu, lecz zbudowania wersji, z której naprawdę da się korzystać. W WLC prowadzimy audyty i wdrożenia, które łączą wymagania techniczne z realnym doświadczeniem użytkownika.
