На великому екрані три пропозиції легко поставити поруч. На телефоні та сама таблиця іноді перетворюється на крихітні числа або довгу стрічку, де вже не видно назви колонки. Проблема не лише в ширині: людина має пам’ятати, що саме вона порівнює. Починати варто не зі зменшення шрифту, а із запитання, яку відмінність відвідувач хоче знайти.
Спочатку визначте завдання
Уявімо порівняння трьох навчальних програм. Для вибору можуть бути важливі формат занять, тривалість і попередня підготовка. Рекламний опис кожної програми краще винести за межі таблиці. Якщо в одну клітинку потрапили умови, винятки та біографія викладача, це вже не коротка точка порівняння. Розділіть факти й пояснення, але не приховуйте обмеження, які змінюють зміст пропозиції.
Збережіть зв’язок між назвою та значенням
W3C рекомендує позначати заголовки таблиці та клітинки даних відповідними HTML-елементами. Для складніших зв’язків можуть знадобитися додаткові атрибути. Виділення першого рядка жирним шрифтом саме по собі не передає цієї структури допоміжним технологіям. Дайте таблиці зрозумілу назву, вкажіть одиниці вимірювання та однаково оформіть невідомі значення: порожня клітинка не повинна непомітно означати «безкоштовно» або «не входить».
Оберіть між прокручуванням і картками
Якщо потрібно порівнювати одну характеристику в кількох варіантів, збережена таблиця з горизонтальним прокручуванням може бути доречнішою за довгу послідовність карток. Позначте, що область рухається, і перевірте доступ до неї без сенсорного жесту. Якщо люди зазвичай читають кожну пропозицію окремо, картки можуть бути зручнішими. У кожній картці повторіть назви характеристик, а не лише їхні значення. Це редакційний вибір, а не універсальне правило для всіх таблиць.
Не виправляйте таблицею весь екран
Пояснення W3C до критерію Reflow допускає виняток для даних, яким для розуміння потрібне двовимірне компонування. Це не дозвіл змушувати всю сторінку рухатися вбік. Текст перед таблицею, кнопки та наступні розділи мають залишатися зручними на вузькому екрані. Навіть усередині таблиці довгі пояснення варто переносити, а не зменшувати до майже нерозбірливого розміру.
Перевірте не картинку, а рішення
На вузькому екрані знайдіть конкретну відмінність між двома варіантами. Потім збільште масштаб, пройдіть доступні елементи клавіатурою та перевірте читання заголовків допоміжною технологією. Чи зрозуміло, до якого варіанта належить число після прокручування? Чи однакові факти в настільній і мобільній версіях? Якщо для відповіді доводиться запам’ятовувати кілька екранів, спростіть структуру. Гарне порівняння економить зусилля, а не лише місце.