Jak sprawdzić responsywność strony internetowej: praktyczny test na telefonie i komputerze

Strona responsywna dopasowuje układ i obsługę do szerokości ekranu oraz sposobu korzystania z urządzenia. Samo zmniejszenie elementów nie wystarczy, jeśli użytkownik nie może wygodnie otworzyć menu, wysłać formularza albo kupić produktu.

Sprawdź, czy tekst pozostaje czytelny bez powiększania, przyciski można obsłużyć dotykiem, a cała strona nie wymaga poziomego przewijania. Responsywność może zmieniać sam układ: kolumny przechodzą jedna pod drugą, nawigacja zmienia formę, a szeroka tabela dostaje układ czytelny na małym ekranie.

Z naszych wdrożeń wynika, że kontrola samej strony głównej pomija błędy na formularzach, kartach produktów i w koszyku. Dlatego testujemy strony przez zadania prowadzące do kontaktu albo zakupu. Jeśli planujesz nową witrynę, strony internetowe dla firm powinny uwzględniać test tych ścieżek od etapu projektu.

Przygotuj listę szablonów, szerokości i zadań przed rozpoczęciem testu. Powtarzanie tych samych scenariuszy ułatwia porównanie widoków i ustalenie, czy problem dotyczy jednej strony, czy całego serwisu.

Sprawdź co najmniej stronę główną, ofertę, artykuł, kontakt, kartę produktu i koszyk. Wybierz zadanie, które odwiedzający powinien wykonać na każdym widoku, na przykład znalezienie usługi, przeczytanie informacji, wysłanie zapytania albo przejście do zamówienia.

Tabela odpowiada na pytanie, jakie widoki i zadania objąć pierwszą próbą. Szerokości są punktami startowymi, nie wymaganiami dla każdej witryny.

Wynik testu powinien zawierać stan zadania, nie samo wrażenie, że strona wygląda poprawnie. Zapisz, czy zadanie zostało wykonane, gdzie pojawił się problem i czy zablokował dalsze kroki.

Przed próbą zanotuj adres URL, model urządzenia, system, przeglądarkę, orientację i szerokość widoku. Testuj na środowisku, na którym wolno wysyłać formularze lub składać zamówienia. Dla witryn firmowych listę widoków warto uzupełnić o najważniejsze podstrony usług i ścieżki prowadzące do zapytania, zgodnie z planem strony dla małej firmy.

Fizyczny telefon pozwala sprawdzić dotyk, klawiaturę ekranową i zachowanie rzeczywistej przeglądarki. Otwórz stronę w przeglądarce używanej przez klientów i przejdź te same zadania, które zapisałeś w matrycy.

Podczas testu wykonaj następujące czynności:

• Przewiń stronę i sprawdź, czy menu oraz stałe przyciski nie zasłaniają treści.
• Otwórz i zamknij menu, przejdź do podstrony i wróć do poprzedniego widoku.
• Powiększ tekst i sprawdź, czy treść oraz formularz nadal mieszczą się w ekranie.
• W formularzu otwórz klawiaturę, wpisz dane, wywołaj walidację i wyślij próbne zgłoszenie.
• W sklepie wybierz wariant, dodaj produkt, zmień liczbę sztuk i przejdź do następnego kroku zamówienia.

W formularzu sprawdź, czy aktywne pole i przycisk wysłania nie znikają za klawiaturą. W sklepie użyj testowego produktu i nie zatwierdzaj rzeczywistej płatności. Jeżeli witryna ma płatność testową, przejdź ścieżkę zgodnie z procedurą właściciela sklepu.

Zapisuj urządzenie, system, przeglądarkę, szerokość ekranu, adres, kroki odtworzenia i zrzut błędu. Po obróceniu telefonu zanotuj orientację, bo układ może działać inaczej w pionie i poziomie. Takie dane pozwalają wykonawcy odtworzyć problem bez zgadywania.

Zmieniaj szerokość widoku stopniowo, aby znaleźć punkt, w którym układ traci czytelność lub elementy zaczynają na siebie nachodzić. Zacznij od wąskiego ekranu telefonu, widoku pośredniego i szerokiego ekranu komputera, a następnie sprawdź obszar wokół zauważonego problemu.

Szukaj poziomego przewijania całej strony, uciętych nagłówków, nachodzących elementów, zbyt małych przycisków, ukrytych treści i obrazów wychodzących poza kontener. Sprawdź także, czy pasek zgód, przycisk kontaktu lub menu nie zasłaniają ważnych akcji. W tabelach i długich nazwach produktów sprawdź, czy treść zawija się lub dostaje osobny sposób przewijania.

W Chrome DevTools otwórz pasek urządzeń przełącznikiem paska narzędzi urządzeń, a następnie wybierz tryb Responsive. Zmieniaj szerokość pola widoku i obserwuj moment, w którym układ przestaje działać. Chrome opisuje Device Mode jako przybliżoną symulację widoku mobilnego, a nie uruchomienie kodu na fizycznym telefonie, dlatego problem potwierdź na urządzeniu.

Testuj menu, formularz i koszyk jako kompletne scenariusze, bo pojedynczy zrzut nie pokazuje, czy użytkownik może wykonać zadanie. Każdy scenariusz zaczyna się od wejścia na stronę, a kończy potwierdzeniem działania albo dokładnym zapisem miejsca, w którym zadanie stanęło.

Scenariusz menu powinien obejmować otwarcie nawigacji, przejście do wybranej podstrony, zamknięcie menu i użycie przycisku kontaktu. Scenariusz formularza powinien obejmować wpisanie danych, sprawdzenie wymaganych pól, obsługę komunikatu błędu i wysłanie zgłoszenia. Scenariusz sklepu powinien obejmować wybór wariantu, zmianę liczby sztuk, usunięcie produktu oraz przejście dalej.

Tabela odpowiada na pytanie, które problemy naprawiać w pierwszej kolejności. Priorytet wynika z wpływu błędu na zadanie użytkownika.

Zapisuj rezultat każdego scenariusza osobno dla każdego urządzenia i widoku. Błąd na karcie produktu może dotyczyć tylko wybranego wariantu, a problem z formularzem może pojawiać się dopiero po wywołaniu walidacji. Test całej ścieżki ujawnia takie warunki.

Chrome DevTools pozwala symulować mobilny widok, a Lighthouse tworzy automatyczny raport o wydajności, dostępności, dobrych praktykach i SEO. Narzędzia pomagają znaleźć obszary do sprawdzenia, ale nie potwierdzają same z siebie, że użytkownik może wygodnie kupić produkt lub wysłać formularz.

W DevTools otwórz przełącznik paska urządzeń, wybierz tryb Responsive i ustaw szerokość, którą chcesz sprawdzić. W panelu Lighthouse uruchom audyt dla konkretnego adresu i zachowaj raport wraz z datą. Porównuj raporty tylko wtedy, gdy testujesz ten sam adres i podobne warunki, ponieważ zmiana strony lub warunków pomiaru wpływa na wynik.

Panel Network przydaje się do sprawdzenia, czy zasoby strony ładują się poprawnie. Opcja "Disable cache" wyłącza pamięć podręczną przeglądarki dla testu w otwartym DevTools. Nie należy traktować takiego pomiaru jako typowego doświadczenia każdego powracającego użytkownika.

Dokumentacja Chrome zastrzega, że Device Mode jest przybliżeniem i nie uruchamia strony na fizycznym urządzeniu. Lighthouse z kolei ocenia stronę w kategoriach audytu, a raport nie zastępuje wykonania scenariuszy dotykowych na telefonie. Po teście w przeglądarce przejdź tę samą ścieżkę na rzeczywistym urządzeniu.

Zgłoszenie błędu powinno zawierać adres, urządzenie, szerokość, kroki odtworzenia i różnicę między oczekiwanym a zaobserwowanym działaniem. Dołącz zrzut ekranu albo krótkie nagranie, jeśli problem dotyczy ruchu, menu lub przewijania.

Użyj formatu, który pozwala powtórzyć błąd:

• URL: adres strony z problemem.
• Urządzenie i przeglądarka: model, system i nazwa przeglądarki.
• Szerokość widoku: wartość w pikselach CSS.
• Kroki: czynności prowadzące do błędu.
• Oczekiwany wynik: działanie potrzebne użytkownikowi.
• Zaobserwowany wynik: zachowanie strony.
• Dowód: zrzut lub nagranie z widocznym miejscem problemu.

Nie zapisuj samego opisu "źle wygląda na telefonie". Zgłoszenie "na stronie produktu po wybraniu wariantu przycisk dodania do koszyka znika pod dolnym paskiem, telefon w orientacji pionowej" wskazuje warunek i efekt.

Po wdrożeniu poprawki powtórz ten sam scenariusz na tym samym urządzeniu i szerokości. Sprawdź również szerokości sąsiednie, ponieważ zmiana CSS może poprawić jeden widok, a pogorszyć układ tuż obok. Zamknij zgłoszenie po sprawdzeniu całej ścieżki oraz powiązanych widoków.

Najpierw napraw błędy, które uniemożliwiają kontakt lub zakup, następnie usterki czytelności na ważnych podstronach, a na końcu kosmetykę. Ta kolejność kieruje pracę na przeszkody, które zatrzymują zadanie użytkownika.

Zacznij od błędów blokujących wysłanie formularza, wybór produktu, dodanie do koszyka albo przejście do płatności. Następnie popraw problemy na kluczowych szablonach, takie jak zasłonięte menu, nieczytelna oferta czy ucięte informacje o produkcie. Różnice odstępów i drobne przesunięcia zostaw po naprawie działania strony.

Jeśli przebudowa serwisu jest lepszym rozwiązaniem niż pojedyncze poprawki, projekt i wykonanie strony internetowej dla firmy można oprzeć na matrycy zadań, urządzeń i widoków. Wykonawcy przekaż adresy, kroki i urządzenia, na których pojawia się problem, a po wdrożeniu powtórz zapisany test.

• Strony responsywne czy mobilne? Porównanie i wybór dla firmy
• Jak powinna wyglądać strona internetowa dla firmy? Lista kontrolna dla właściciela
• Strona RWD czy aplikacja mobilna? Co wybrać dla firmy
• Layout strony internetowej: jak zaplanować układ, który prowadzi do celu?