Jak sprawdzić, czy witryna ma wersję mobilną
Jak sprawdzić, czy witryna ma wersję mobilną
Strona może „mieć wersję mobilną” na 3 różne sposoby. Może być responsywna i sama dopasowywać układ, może mieć osobną wersję mobilną pod własnym adresem URL albo może być zwykłą stroną desktopową, która po prostu się kurczy i liczy na szczęście. To ostatnie zdarza się bardzo często.
Zanim ocenisz cokolwiek, określ cel. Jeśli chcesz odpowiedzieć na pytanie jak sprawdzić, czy witryna ma stronę kontaktową, szukasz jednego rodzaju sygnałów; tutaj sprawdzasz zachowanie ekranu, nawigację i obsługę urządzeń. Inne pytanie, inne dowody. Proste, ale ludzie często to mieszają.
Dobra wersja mobilna powinna robić coś więcej niż tylko „otwierać się” na telefonie. Powinna mieścić się na mniejszych ekranach, zachować czytelność tekstu i umożliwić wykonanie głównego zadania bez szczypania i powiększania. Sam hamburger menu niewiele dowodzi. Podobnie jak miniaturowy układ desktopowy.
1. Określ, co dla Ciebie znaczy „wersja mobilna”
Zacznij od jednej decyzji: szukasz osobnej strony mobilnej, responsywnego układu czy doświadczenia typowo mobilnego, takiego jak komunikat o aplikacji albo uproszczone menu? Ten jeden wybór zmienia to, co sprawdzasz na początku, więc warto najpierw ustalić, jak sprawdzić czy strona ma wersję mobilną w konkretnym sensie.
Osobna strona mobilna często używa innej subdomeny, na przykład m.example.com, albo odrębnej ścieżki. Responsywny układ zwykle zachowuje ten sam adres URL i zmienia stronę za pomocą CSS. Mobilne doświadczenie może nadal działać na tej samej stronie, ale pokazuje inną nawigację, mniej kolumn lub zachętę do instalacji aplikacji. To nie to samo.
Jeśli witryna jest stara, wersja mobilna może być oczywista. Jeśli jest nowsza, wersja mobilna może być ukryta w projekcie, a nie pod osobnym adresem. Zwróć na to uwagę.
Jeden praktyczny trop: strona, która zmienia tylko rozmiar czcionki, nie jest zbyt mobilna. Strona, która zmienia menu, odstępy, bloki multimediów i układ formularzy, wykonuje realną pracę.
2. Sprawdź stronę w przeglądarce desktopowej bez zmieniania urządzenia
Otwórz stronę najpierw w zwykłej przeglądarce na komputerze. Potem stopniowo zwężaj okno, nie jednym skokiem. Obserwuj, co się zmienia przy 1200 pikselach, potem przy 1024, a potem przy 768. Te liczby mają znaczenie, bo wiele układów psuje się właśnie w tych punktach.
Patrz na zachowanie, nie tylko na wygląd. Czy górna nawigacja zwija się do jednego menu? Czy paski boczne przechodzą pod główną treść? Czy duży obraz staje się mniejszy, nie wypychając tekstu poza ekran? To sygnały, że strona została zaprojektowana z myślą o dopasowaniu i pomagają zrozumieć, jak sprawdzić responsywność strony bez telefonu w dłoni.
Witryna może udawać mobilną, po prostu wszystko zmniejszając. To nie wystarcza. Użytkownik nadal potrzebuje czytelnych akapitów, przycisków, w które da się kliknąć, i formularzy, które nie wymagają poziomego przewijania.
Otwórz stronę z długim formularzem. Jeśli etykiety nachodzą na siebie przy mniejszej szerokości, wersja mobilna jest słaba. Jeśli pola układają się w kolumnę, a przycisk wysyłania pozostaje widoczny, wersja mobilna jest prawdopodobnie dobrze zaplanowana.
Dla szybkiego sprawdzenia możesz też porównać strukturę z inną stroną w tej samej domenie, na przykład jak sprawdzić, czy witryna dobrze obsługuje treści dotyczące polityki wysyłki. Witryny często utrzymują strony polityk w bardziej sztywnym układzie niż strony produktowe, a różnica może pokazać, czy reguły responsywne zastosowano w całym serwisie, czy tylko na stronie głównej.
3. Sprawdź kod źródłowy i CSS pod kątem ustawień mobilnych
Wyświetl źródło strony albo otwórz narzędzia deweloperskie. Poszukaj tagu meta viewport. Jeśli widzisz width=device-width i sensowną wartość initial scale, to mocny sygnał, że witryna była budowana z myślą o ekranach mobilnych.
Następnie przejrzyj pliki CSS. Kod responsywny zwykle zawiera media queries z punktami granicznymi takimi jak 768px, 1024px lub 480px. Nie musisz czytać każdej linijki. Jedna lub dwie dobrze umieszczone granice potrafią powiedzieć bardzo dużo.
Sprawdź też zasoby nastawione na mobile. Plik obrazu może mieć mniejsze wersje dla ekranów o słabszym łączu. Skrypt nawigacji może ładować się tylko wtedy, gdy ekran jest wąski. Czcionka może zmieniać grubość, by poprawić czytelność. Takie detale mają znaczenie, bo pokazują intencję, a nie przypadek.
Jeśli źródło wszędzie używa sztywnych szerokości, zachowaj ostrożność. Układ o stałej szerokości nadal może otworzyć się na telefonie, ale to nie znaczy, że strona ma wersję mobilną. Może to być po prostu strona desktopowa ściśnięta do mniejszego okna.
To właśnie częsty błąd: kod źródłowy może ujawnić obsługę mobile nawet wtedy, gdy wizualnie strona wygląda zwyczajnie. Czysta strona nie zawsze jest prosta „pod maską”. Chaotyczna strona nie zawsze jest zepsuta.
4. Porównaj zachowanie przy typowych szerokościach mobilnych
Sprawdź kilka standardowych szerokości w przeglądarce. Wypróbuj 375 pikseli, 390 pikseli i 414 pikseli dla nowoczesnych telefonów, a potem 768 pikseli dla widoku wielkości tabletu. Ten zakres szybko ujawnia większość problemów z układem.
Przy 375 pikselach sprawdź, czy treść mieści się na ekranie. Przy 390 pikselach sprawdź, czy przyciski są wystarczająco duże dla kciuka. Przy 414 pikselach zwróć uwagę na puste przestrzenie po bokach albo ucięte banery. To drobne wskazówki, ale składają się na całość.
Dobra wersja mobilna porządnie się przeorganizowuje. Słaba po prostu się zmniejsza. Jest realna różnica między „mieści się” a „działa”.
Sprawdź tę samą stronę w orientacji pionowej i poziomej. Czasem strona działa dobrze w jednej orientacji, a w drugiej staje się niewygodna. Galeria może zbyt mocno blokować obrazy albo tabela może stać się nieczytelna. Tabele są szczególnie wymowne.
Jeśli na stronie jest tabela porównawcza, zmniejsz szerokość i obserwuj efekt. Prawidłowa wersja mobilna może układać wiersze jeden pod drugim albo umożliwiać kontrolowane przewijanie poziome. Słaba wersja ucina ostatnią kolumnę. Użytkownicy zauważają to bardzo szybko.
5. Szukaj osobnych adresów mobilnych albo przekierowań zależnych od urządzenia
Starsze witryny czasem kierują telefony pod inny adres. Możesz zobaczyć m.example.com, mobile.example.com albo URL zawierający /mobile/ lub /amp/. Sprawdź dokładnie pasek adresu po otwarciu strony na telefonie albo w wąskim oknie emulacji.
Przekierowania zależne od urządzenia mogą działać bezgłośnie. Użytkownik desktopowy widzi jedną stronę, a użytkownik telefonu trafia gdzie indziej. To może oznaczać dedykowaną wersję mobilną, ale może też świadczyć o starym rozwiązaniu, którego nigdy nie unowocześniono.
Zwróć uwagę na przekierowania, które dzieją się, zanim strona w pełni się załaduje. Szybkie przejście z jednej domeny na drugą często oznacza, że serwer rozpoznaje typ urządzenia. Jeśli przekierowanie kończy się na uproszczonej stronie, witryna mogła być tworzona z myślą o starszych telefonach, a nie o nowoczesnych ekranach responsywnych.
Uważaj na założenia. Adres wyglądający mobilnie nie zawsze znaczy, że strona działa lepiej na telefonach. Czasem oznacza po prostu, że witryna jest starsza, wolniejsza i trudniejsza w utrzymaniu.
Łatwym tropem jest spójność. Jeśli przekierowuje się tylko strona główna, a podstrony już nie, wersja mobilna jest prawdopodobnie niekompletna.
6. Sprawdź, czy strona zmienia się w zależności od user agent
Otwórz narzędzia deweloperskie i zmień user agent na profil telefonu. Następnie odśwież stronę. Jeśli treść się zmienia, witryna serwuje inne HTML lub CSS dla urządzeń mobilnych.
To ważne, bo niektóre witryny ukrywają wersję mobilną za wykrywaniem urządzenia. W przeglądarce desktopowej mogą pokazywać pełny układ; dla user agenta telefonu mogą wyświetlać węższe menu, inne obrazy, a nawet inne bloki tekstu. Tego nie zobaczysz samym zwężaniem okna.
Sprawdź przynajmniej dwa user agenty: jeden dla nowoczesnego iPhone’a i jeden dla Androida. Jeśli strona zachowuje się inaczej dla każdego z nich, zanotuj dokładną różnicę. Zmiana nawigacji ma znaczenie. Zmiana samych skryptów analitycznych już nie wystarcza.
Jeśli strona psuje się tylko przy jednym user agencie, wersja mobilna mogła zostać dopasowana do konkretnych urządzeń zamiast zbudowana porządnie. To sygnał problemów z utrzymaniem. Może też powodować dziwne błędy widoczne tylko na niektórych telefonach.
Dla osobnego sprawdzenia struktury witryny możesz porównać ją z jak sprawdzić, czy witryna obsługuje strony regulaminu. Strony prawne często są mniej responsywne niż strony produktowe, więc dobrze nadają się do wykrywania częściowej obsługi mobile.
7. Sprawdź publiczne archiwa webowe i wyniki wyszukiwania pod kątem dawnych wersji mobilnych
Publiczne archiwa mogą pokazać, czy wersja mobilna istniała wcześniej. Wyszukaj witrynę w Wayback Machine albo innym archiwum i sprawdź zrzuty z kilku lat, nie tylko jeden. Strona mobilna z 2018 roku może opowiedzieć historię, której nie widać na stronie głównej z 2026 roku.
Zarchiwizowane adresy mogą ujawnić stare subdomeny mobilne, przekierowania zależne od urządzenia albo osobne szablony. Pomóc mogą też wyniki wyszukiwania. Jeśli indeksowane wyniki pokazują mobilną ścieżkę albo stronę AMP, to sugeruje, że serwis kiedyś publicznie udostępniał wersję mobilną.
Nie wyciągaj zbyt daleko idących wniosków z jednego zrzutu. Archiwa mogą nie zapisać arkuszy stylów, skryptów ani obrazów. Mimo to, jeśli trzy różne zrzuty pokazują wzorzec adresu specyficzny dla telefonu, to mocny dowód.
Możesz też porównać buforowany tekst wokół tytułu strony. Jeśli wyniki wyszukiwania kiedyś pokazywały krótki tytuł mobilny, a teraz wyświetlają długi tytuł desktopowy, witryna prawdopodobnie zmieniła sposób prezentacji na przestrzeni czasu.
Jest praktyczny powód, by sprawdzać archiwa: niektóre witryny usuwają wersję mobilną, nie porządkując starych linków. Użytkownicy trafiają z wyszukiwarki albo z zakładek i lądują na niedziałających mobilnych ścieżkach. To właśnie taki problem, który pozostaje ukryty, dopóki ktoś go nie przetestuje.
8. Oceń, jaki rodzaj wsparcia mobilnego naprawdę ma strona
W tym momencie powinieneś umieć opisać wynik jednym zdaniem. Powiedz, czy witryna jest responsywna, korzysta z osobnej wersji mobilnej, czy ma niewielką albo żadną optymalizację mobilną. To zdanie powinno opierać się na 3 konkretnych obserwacjach, a nie na domyśle.
Responsywna strona zwykle zachowuje jeden adres URL, pokazuje wyraźne punkty graniczne i dostosowuje nawigację przy mniejszych szerokościach. Osobna wersja mobilna zwykle używa odrębnego adresu albo przekierowania po user agencie. Słabe ustawienie mobilne zwykle tylko zmniejsza desktopowy projekt, ucina treść albo utrudnia korzystanie z formularzy. W praktyce to właśnie pomaga odpowiedzieć, czy strona jest mobile friendly.
Jeśli potrzebujesz szybkiego szablonu raportu, użyj takiej kolejności: wzorzec URL, zachowanie układu i dowód z kodu źródłowego. Trzy elementy. Do podstawowego raportu nic więcej nie trzeba.
Na przykład: „Witryna jest responsywna. Zachowuje ten sam adres URL, używa tagu viewport i przy 390 pikselach przesuwa pasek boczny pod główną treść.” To jest jasne, krótkie i możliwe do sprawdzenia.
Jeśli chcesz udokumentować starszą witrynę do celów referencyjnych, zapisuj precyzyjnie. Podaj dokładną ścieżkę mobilną, zachowanie urządzenia i szerokość, przy której układ się zmienia. Ogólnik w stylu „działa na telefonie” nikomu nie pomoże.
Jedna ostatnia rzecz do sprawdzenia: jeśli witryna oferuje tylko menu mobilne, ale nadal ukrywa ważną treść za małymi linkami, to nie jest mocna wersja mobilna. To po prostu menu mobilne. To dwie różne rzeczy.
