Na dużym ekranie trzy oferty wygodnie mieszczą się obok siebie. Na telefonie ta sama tabela może zamienić się w drobne liczby lub długi pasek, którego nazwy kolumn zniknęły. Szerokość jest tylko częścią problemu: czytelnicy muszą pamiętać, co porównują. Zacznij od pytania, jaką różnicę powinni znaleźć, a nie od zmniejszania pisma.
Najpierw zdefiniuj zadanie
Wyobraź sobie porównanie trzech programów szkoleniowych. Przydatne różnice mogą obejmować formę nauki, czas trwania i wymaganą wiedzę wstępną. Promocyjny opis każdego programu umieść poza tabelą. Komórka zawierająca warunki, wyjątki i biografię prowadzącego nie jest już zwięzłym punktem porównania. Oddziel fakty od wyjaśnień, ale nie ukrywaj ograniczeń zmieniających znaczenie oferty.
Utrzymuj połączenie etykiet z wartościami
W3C zaleca oznaczanie nagłówków tabeli i komórek danych odpowiednimi elementami HTML. Bardziej złożone zależności mogą wymagać dodatkowych atrybutów. Samo pogrubienie pierwszego wiersza nie przekazuje tej struktury technologiom asystującym. Nadaj tabeli jasną nazwę, podaj jednostki miary i konsekwentnie przedstawiaj nieznane wartości. Pusta komórka nie powinna bez wyjaśnienia oznaczać raz „bezpłatnie”, a raz „nie obejmuje”.
Wybierz między przewijaniem a kartami
Gdy ktoś potrzebuje porównać jedną cechę kilku opcji, zachowana tabela z przewijaniem poziomym może sprawdzić się lepiej niż długi ciąg kart. Wyraźnie zaznacz obszar przewijania i przetestuj dostęp bez gestu dotykowego. Jeśli odwiedzający zwykle czytają każdą ofertę osobno, karty mogą być łatwiejsze. Powtórz etykiety cech w każdej karcie, nie tylko wartości. To wybór redakcyjny, nie uniwersalna reguła dla każdej tabeli.
Nie każ całej stronie zachowywać się jak tabela
Wyjaśnienie W3C dotyczące dopasowania układu, Reflow, dopuszcza wyjątek dla informacji, które wymagają dwuwymiarowego układu do zrozumienia. Nie jest to przyzwolenie na przewijanie całej strony na boki. Wprowadzenie, przyciski i kolejne sekcje powinny pozostać wygodne na wąskim ekranie. Nawet w tabeli zawijaj dłuższe wyjaśnienia zamiast zmniejszać je do ledwo czytelnego pisma.
Testuj decyzję, nie tylko obraz
Na wąskim ekranie znajdź konkretną różnicę między dwiema opcjami. Następnie zwiększ powiększenie, przejdź po dostępnych elementach sterujących klawiaturą i sprawdź odczyt nagłówków przez technologię asystującą. Czy po przewinięciu wiadomo, do której opcji należy liczba? Czy fakty na komputerze i telefonie są identyczne? Jeśli odpowiedź wymaga zapamiętania kilku ekranów, uprość strukturę. Dobre porównanie oszczędza wysiłek, nie tylko miejsce.