Strona responsywna dostosowuje układ do dostępnej szerokości ekranu. Kolumny mogą ułożyć się jedna pod drugą, obraz zmieścić w obszarze treści, a nawigacja przyjąć inną formę. Chodzi o to, żeby odbiorca nadal mógł przeczytać ofertę i wykonać potrzebną czynność.
Samo zmniejszenie szerokości okna nie potwierdza jeszcze, że strona jest wygodna. Możesz mieć układ, który mieści się na telefonie, ale utrudnia znalezienie kontaktu albo ukrywa ważny fragment zdjęcia. Dlatego sprawdzaj nie tylko wygląd, lecz także konkretne zadanie odwiedzającego.
Zacznij od jednego zadania
Wybierz czynność, którą użytkownik powinien móc wykonać na Twojej stronie. Dla lokalnej firmy może to być znalezienie obszaru działania i numeru telefonu. Dla pracowni — obejrzenie realizacji i wysłanie zapytania. Dla organizatora zajęć — sprawdzenie terminu oraz sposobu zapisania się.
Otwórz stronę na telefonie i spróbuj wykonać to zadanie od początku. Nie korzystaj ze skrótów wynikających ze znajomości własnej strony. Zwróć uwagę, gdzie trzeba się zatrzymać, zgadywać albo wracać do poprzedniej sekcji.
Jeśli możesz, poproś także inną osobę o przejście tej samej drogi. Jej pytania mogą wskazać miejsca, które dla autora są oczywiste, a dla odbiorcy niekoniecznie.
Sprawdź, czy treść mieści się na ekranie
Zobacz, czy zwykły akapit, przycisk lub zdjęcie nie wychodzi poza prawą krawędź. Konieczność przesuwania całej strony w bok, aby doczytać zdanie, jest sygnałem do poprawy.
Ilustracja zasady układu. Nie przedstawia konkretnego szablonu ani edytora Manifo.
Niektóre materiały, na przykład rozbudowana tabela lub mapa, potrzebują szczególnego rozwiązania. Nie oceniaj ich tak samo jak zwykłego tekstu. Kryterium reflow w WCAG opisuje wyświetlanie treści bez utraty informacji i funkcji przy małej szerokości, z wyjątkami dla treści wymagających układu dwuwymiarowego. Wyjaśnienie W3C dotyczące reflow.
Przeczytaj tekst i sprawdź zdjęcia
Przeczytaj kilka akapitów bez powiększania strony palcami. Oceń także mniejsze elementy: podpis pod realizacją, godziny otwarcia i etykiety formularza. Nagłówek może wyglądać dobrze, podczas gdy ważna informacja pod nim staje się trudna do odczytania.
Obejrzyj najważniejsze zdjęcia. Czy na telefonie nadal widać to, co opisujesz? Przy automatycznym kadrowaniu łatwo pominąć detal produktu lub fragment realizacji. Gdy fotografia ma przekazywać konkretną informację, jej czytelność jest ważniejsza od zachowania tego samego ozdobnego kadru na każdym ekranie.
Sprawdź również kolejność treści. Jeśli obok zdjęcia na komputerze znajduje się opis, po ułożeniu elementów w jednej kolumnie nadal powinno być jasne, które informacje do siebie należą.
Przejdź przez menu i kontakt
Otwórz menu, przejdź do podstrony i wróć do oferty. Sprawdź, czy da się obsłużyć podmenu i zamknąć rozwiniętą nawigację. Zwróć uwagę, czy baner lub inne okno nie zasłania potrzebnych przycisków.
Następnie sprawdź wybrany sposób kontaktu. Jeśli pokazujesz numer telefonu, zobacz, czy jego użycie prowadzi do zamierzonego działania. Przy formularzu sprawdź czytelność nazw pól i komunikatów, również po wpisaniu błędnej wartości. Testowe wysłanie wykonaj wtedy, gdy możesz odróżnić je od prawdziwego zgłoszenia i sprawdzić odbiór.
Nie oceniaj dostępności wyłącznie po możliwości dotknięcia przycisku na telefonie. To użyteczny test wstępny, ale nie zastępuje pełnego sprawdzenia strony, w tym obsługi klawiaturą i technologii asystujących.
Oddziel responsywność od szybkości
Strona może poprawnie zmieniać układ, a jednocześnie długo wczytywać ciężkie zdjęcia lub filmy. Otwórz ją również przy połączeniu komórkowym i sprawdź, kiedy pojawia się informacja potrzebna do wykonania zadania.
Jeśli oferta staje się widoczna dopiero po załadowaniu dużej dekoracji, zapisz to jako osobny problem. Zmniejszenie obrazu, usunięcie zbędnego filmu czy uproszczenie sekcji to różne działania — dobierz je do tego, co rzeczywiście spowalnia lub utrudnia korzystanie ze strony.
Co ma to wspólnego z Google?
Google korzysta z mobilnej wersji treści przy indeksowaniu i ustalaniu rankingu. Ważne informacje nie powinny więc znikać tylko dlatego, że odwiedzający używa telefonu. Responsywność nie daje jednak gwarancji wysokiej pozycji. Dokumentacja Google dotycząca mobile-first indexing.
Nie potrzebujesz obietnicy wzrostu ruchu, żeby poprawić nieczytelny tekst lub niedziałający kontakt. Są to problemy, które bezpośrednio utrudniają odwiedzającemu poznanie oferty.
Zapisz trzy konkretne poprawki
Po teście przygotuj krótką listę: miejsce → problem → oczekiwane zachowanie. Na przykład: „Oferta, zdjęcie realizacji → nie widać detalu → na telefonie pokazać pełny istotny fragment”. To przykładowy zapis, nie wynik badania konkretnej strony.
Najpierw popraw elementy blokujące zadanie użytkownika, potem te utrudniające czytanie, a na końcu drobne kwestie wyglądu. Po zmianach przejdź tę samą drogę ponownie. Sprawdź stronę także na dużym ekranie, aby poprawka dla telefonu nie pogorszyła innego widoku.
