На большом экране три предложения легко поставить рядом. На телефоне та же таблица иногда превращается в крошечные числа или длинную полосу, где уже не видно названия колонки. Проблема не только в ширине: человеку приходится помнить, что именно он сравнивает. Начинать стоит не с уменьшения шрифта, а с вопроса, какое различие посетитель хочет найти.
Сначала определите задачу
Представим сравнение трёх учебных программ. Для выбора могут быть важны формат занятий, продолжительность и предварительная подготовка. Рекламное описание каждой программы лучше вынести за пределы таблицы. Если в одну ячейку попали условия, исключения и биография преподавателя, это уже не короткая точка сравнения. Разделите факты и объяснения, но не скрывайте ограничения, меняющие смысл предложения.
Сохраните связь названия и значения
W3C рекомендует обозначать заголовки таблицы и ячейки данных соответствующими HTML-элементами. Для сложных связей могут понадобиться дополнительные атрибуты. Жирный шрифт первой строки сам по себе не передаёт эту структуру вспомогательным технологиям. Дайте таблице понятное название, укажите единицы измерения и одинаково оформите неизвестные значения: пустая ячейка не должна незаметно означать «бесплатно» или «не входит».
Выберите между прокруткой и карточками
Если нужно сравнивать одну характеристику у нескольких вариантов, сохранённая таблица с горизонтальной прокруткой может быть уместнее длинной последовательности карточек. Покажите, что область прокручивается, и проверьте доступ без сенсорного жеста. Если люди обычно читают каждое предложение отдельно, карточки могут быть удобнее. В каждой повторите названия характеристик, а не только значения. Это редакционный выбор, а не универсальное правило для всех таблиц.
Не превращайте весь экран в таблицу
Пояснение W3C к критерию Reflow допускает исключение для данных, которым для понимания необходимо двумерное расположение. Это не разрешение заставлять всю страницу двигаться вбок. Текст перед таблицей, кнопки и следующие разделы должны оставаться удобными на узком экране. Даже внутри таблицы длинные объяснения стоит переносить, а не уменьшать до почти неразборчивого размера.
Проверьте решение, а не картинку
На узком экране найдите конкретное различие между двумя вариантами. Затем увеличьте масштаб, пройдите доступные элементы клавиатурой и проверьте чтение заголовков вспомогательной технологией. Понятно ли после прокрутки, к какому варианту относится число? Одинаковы ли факты в настольной и мобильной версиях? Если для ответа приходится запоминать несколько экранов, упростите структуру. Хорошее сравнение экономит усилия, а не только место.