Na komputerze wszystko jest na swoim miejscu. Na telefonie menu zasłania pół ekranu, tabela wychodzi poza krawędź, a przycisk kontaktu znika pod pływającym widżetem. Strona może zmieniać szerokość i nadal utrudniać wykonanie prostego zadania.
Responsywna strona internetowa powinna dopasować układ tak, żeby odwiedzający mógł przeczytać ofertę i z niej skorzystać. Dlatego przy odbiorze warto sprawdzić cały przebieg: od wejścia na podstronę do kontaktu albo zakupu. Poniżej znajdziesz listę, którą można przejść razem z wykonawcą.
Mobile-first to sposób pracy, a nie osobna strona
W podejściu mobile-first punktem wyjścia jest układ na mniejszym ekranie. Przy większej dostępnej przestrzeni można rozbudowywać kolumny i prezentację materiałów. Zasady responsywnego projektowania opisuje poradnik MDN.
Nie chodzi o przygotowanie ubogiej wersji na telefon. Potrzebna treść i funkcje powinny pozostać dostępne. Zmienić mogą się ich rozmieszczenie, liczba kolumn czy sposób otwierania nawigacji.
Warto też oddzielić ten sposób projektowania od mobile-first indexing. Google opisuje indeksowanie na podstawie mobilnej wersji treści. To nie znaczy, że samo zapisanie reguł mobilnych na początku arkusza CSS zapewnia lepszą pozycję w wyszukiwarce.
Przejdź trzy zadania na własnym telefonie
Wybierz czynności związane z celem witryny. Dla firmy usługowej mogą to być: odnalezienie odpowiedniej usługi, obejrzenie realizacji i przejście do formularza. Dla sklepu: wybór wariantu, dodanie do koszyka i sprawdzenie sposobu dostawy.
Zapisuj miejsca, w których trzeba zgadywać albo wracać. Czy nazwa przycisku wyjaśnia działanie? Czy po zamknięciu menu zostajesz w tym samym miejscu? Czy ważny komunikat pojawia się tam, gdzie go zauważysz?
Przy próbie formularza ustal z wykonawcą bezpieczny sposób testowania. Kliknięcie przycisku wysłania nie potwierdza dostarczenia wiadomości. Trzeba sprawdzić także odbiór, a w sklepie użyć uzgodnionego trybu testowego płatności.
Zwróć uwagę na tekst i przewijanie
Czy akapity da się czytać bez ciągłego powiększania? Czy dłuższe nazwy produktów mieszczą się w kartach? Czy po zwiększeniu rozmiaru tekstu nadal widać kontrolki? Wykonaj próbę z treścią docelową, a nie z kilkoma krótkimi zdaniami zastępczymi.
Nieoczekiwane przewijanie całej strony w poziomie często wskazuje element wymagający poprawy. Kryterium Reflow w WCAG opisuje dopasowanie treści przy szerokości odpowiadającej 320 pikselom CSS, z wyjątkami dla zawartości wymagającej układu dwuwymiarowego. Rozbudowana tabela może więc potrzebować własnej przewijanej ramki. Nie powinna rozpychać całej strony.
Sprawdź kilka szerokości i obróć telefon. Jedna poprawna makieta nie mówi, co dzieje się pomiędzy wybranymi rozmiarami ekranu.
Menu, formularz i nakładki muszą działać razem
Na małym ekranie każdy stały panel zajmuje znaczącą część widoku. Menu, komunikat o zgodach i przycisk szybkiego kontaktu mogą osobno wyglądać dobrze, a razem zasłonić najważniejszy fragment formularza.
Otwórz menu, zamknij je, przejdź do formularza i wywołaj błąd pustego pola. Zwróć uwagę, czy instrukcje pozostają czytelne po pojawieniu się klawiatury ekranowej. Spróbuj też wrócić do poprzedniego pola bez zgubienia wpisanych danych.
Na komputerze przejdź tę samą drogę klawiszem Tab. Fokus powinien być widoczny, a kolejność elementów zrozumiała. Test palcem nie zastępuje testu klawiatury.
Wygodne kontrolki to również odpowiednie odstępy
Drobne linki ustawione tuż obok siebie utrudniają trafienie we właściwy cel. Warto sprawdzić nie tylko wielkość ikony, lecz także obszar, który faktycznie można nacisnąć.
WCAG 2.2 uwzględnia minimalny rozmiar celów oraz warunki odstępów i wyjątki. Przy odbiorze nie sprowadzaj więc całej oceny do jednej liczby. Sprawdź rzeczywiste menu, kontrolki galerii i zamknięcie komunikatu. Własna próba szybko pokaże, gdzie kolejne elementy są zbyt blisko siebie.
Responsywność i szybkość sprawdzaj osobno
Poprawny układ nie dowodzi, że strona szybko reaguje. Może dobrze wyglądać po załadowaniu, ale długo czekać na główną treść albo blokować menu pracą skryptów.
Przetestuj kontakt i nawigację również w mniej korzystnych warunkach połączenia. Wyniki warto zestawić z pomiarami, bez uznawania jednego testu za ostateczny dowód. Kolejność diagnozy opisuje poradnik co spowalnia WordPress na telefonie.
Przygotuj krótką listę do odbioru
Zapisz adres podstrony, urządzenie, czynność i zauważony problem. „Na telefonie przycisk wysyłania jest zasłonięty po otwarciu klawiatury” daje wykonawcy konkretny punkt do sprawdzenia. Samo „mobile jest do poprawy” pozostawia zbyt wiele niewiadomych.
Jeśli szukasz wykonawcy strony internetowej w Inowrocławiu, ustal taki sposób odbioru już przy rozmowie o projekcie. Możesz też przesłać AndrewDesign adres swojej strony i opisać, którą czynność trudno wykonać na telefonie. Od tego łatwiej zacząć ocenę potrzebnych zmian.