Responsywność sprawdzisz, przechodząc konkretne zadania na telefonie, tablecie i komputerze. Samo zmniejszenie okna przeglądarki nie wystarcza. Najważniejsze jest to, czy klient może odczytać ofertę, otworzyć menu, skontaktować się z firmą lub dokończyć zakup.
Co oznacza responsywna strona?
RWD, czyli Responsive Web Design, dopasowuje układ do dostępnej szerokości. Elementy mogą zmieniać liczbę kolumn, rozmiar i kolejność prezentacji. Wersja mobilna nie musi być miniaturą widoku komputerowego. Ważne informacje i funkcje powinny pozostać dostępne.
Przygotuj zestaw widoków do kontroli
Otwórz stronę główną, ofertę, wpis blogowy i kontakt. W sklepie dodaj kategorię, produkt, koszyk i kasę. Sprawdź wąski i szeroki telefon, widok poziomy oraz komputer. Zanotuj adres, urządzenie, krok i zauważony problem — taki opis znacznie ułatwia naprawę.
Test 1: czytelność i układ
- Czy tekst można czytać bez ręcznego powiększania?
- Czy strona nie przewija się poziomo przez wystający element?
- Czy nagłówki, tabele i długie nazwy produktów mieszczą się w widoku?
- Czy obrazy zachowują proporcje i nie zasłaniają treści?
- Czy baner, okno zgód lub czat nie przykrywają przycisków?
Test 2: menu, formularz i kontakt
Otwórz menu, przejdź do podstrony i wróć. Wypełnij formularz, sprawdź komunikat błędu i popraw pole. Upewnij się, że etykieta nie znika po wpisaniu danych, klawiatura nie zasłania potrzebnych przycisków, a potwierdzenie jest czytelne. Sprawdź także link telefonu i e-mail. Przykład błędu do zgłoszenia: „Na telefonie po wybraniu usługi przycisk Wyślij zostaje pod otwartą klawiaturą”.
Test 3: zakup na telefonie
W uzgodnionym trybie testowym wybierz wariant produktu, dodaj go do koszyka, zmień ilość i przejdź do dostawy. Sprawdź widoczność kosztów, wybór płatności oraz powrót z bramki. Nie oceniaj sklepu tylko na podstawie karty produktu — problem może występować dopiero przy końcu zamówienia.
Jak wykorzystać narzędzia?
Widok urządzeń w narzędziach przeglądarki pomaga szybko znaleźć problemy szerokości, a Lighthouse wskazuje wybrane problemy wydajności i dostępności. Narzędzia uzupełniają test na rzeczywistym urządzeniu. Dawny Mobile-Friendly Test Google został wycofany i nie jest bieżącą metodą sprawdzania witryny.
Co naprawiać najpierw?
Najpierw usuń przeszkody blokujące kontakt i zakup, potem problemy czytelności oraz nawigacji. Poprawki wizualne realizuj po podstawowych funkcjach. W zgłoszeniu podaj adres i kroki odtworzenia, a jeśli to możliwe — zrzut ekranu bez danych osobowych.
Potrzebujesz przebudowy układu lub naprawy mobilnej ścieżki? Zobacz projektowanie i rozwój stron WWW. Dla sklepu opisujemy rozwój sklepu internetowego. Wyślij nam przykład problemu, aby omówić zakres prac.
