Strona responsywna — układ i testy mobile

Responsywna strona dopasowuje układ do dostępnej przestrzeni. Samo zmniejszenie wersji komputerowej nie wystarczy: menu, formularze, tabele i zdjęcia muszą pozostać użyteczne na telefonie oraz przy powiększeniu tekstu.

Układ wynikający z treści

Sprawdź, w którym miejscu kolumny przestają być czytelne i wtedy zmieniaj układ. Ważne informacje o usłudze oraz kontakt powinny pozostać dostępne. Nie ukrywaj istotnego zakresu oferty tylko dlatego, że ekran jest mniejszy.

Długie tytuły, adresy i nazwy produktów potrafią rozszerzyć stronę poza ekran. Uwzględnij je w projekcie, zamiast testować wyłącznie krótkie teksty przykładowe. Tabele mogą potrzebować własnego przewijania lub innego sposobu prezentacji.

Dotyk, klawiatura i formularze

Przyciski oraz odnośniki muszą dawać się odróżnić i wygodnie uruchomić. Menu nie może opierać się wyłącznie na najechaniu myszą. Sprawdź fokus, kolejność przechodzenia klawiszem Tab i możliwość zamknięcia nakładki.

Formularz testuj z otwartą klawiaturą ekranową. Etykiety mają być widoczne także po wpisaniu wartości, a błąd powinien wskazać sposób poprawy. Komunikat o powodzeniu nie może pojawić się przed rzeczywistym zapisaniem zgłoszenia.

Obrazy i szybkość

Przygotuj warianty obrazów dopasowane do wielkości wyświetlenia i podaj ich wymiary, aby ograniczyć przeskoki układu. Nie ładuj ciężkiego filmu lub modelu 3D tylko dlatego, że użytkownik otworzył stronę. Dla opcjonalnych materiałów można zastosować uruchomienie na żądanie.

Lista odbioru

Sprawdź wąski i szeroki ekran, obrót telefonu, powiększenie tekstu, wolniejsze połączenie oraz dłuższe treści. Otwórz menu, formularz, galerię i komunikaty błędów. Emulacja w przeglądarce pomaga znaleźć problemy, ale warto uzupełnić ją testem na rzeczywistym urządzeniu.

Witryna usługowa i sklep mają różne punkty krytyczne: w pierwszej jest to często kontakt, w drugim także wybór wariantu i finalizacja zamówienia. Plan testów powinien odzwierciedlać te zadania.

Przykład z portfolio

DeepHelp — strona usługowa z rezerwacją usług online. Opis realizacji pokazuje wykonany zakres; nie przypisujemy mu wyników sprzedaży bez osobnego pomiaru.