Адаптивные таблицы

Что делать с таблицами на адаптивных сайтах? Подборка решений:

Каждую строку преобразовать в небольшую табличку

Если параметры перечислены в первом столбце, подойдёт для сравнения параметров:

Если параметры перечислены в шапке, подойдёт для последовательного изучения таблицы:

Вариант с постепенным преобразованием и сложной компоновкой каждой получившейся подтаблицы:

Горизонтальная прокрутка

Просто прокрутка — стандартное решение Bootstrap:

Закрепить 1-й столбец, остальные прокручивать:

Пример 2.2: по ссылке также рассмотрен случай, когда контента много в первом столбце

Если параметры перечислены в шапке, преобразовать их в 1-й столбец. 1-й столбец закрепить:

Вариант с сортировкой:

Оставить самые важные столбцы

Остальные сворачивать:

Пример 3.1: чтобы просмотреть, пройдите по ссылке и нажмите на Getting Started

Дать пользователю выбор, какие столбцы видеть. По умолчанию скрывать неважные:

Показывать содержимое после нажатия

Показывать, что таблица есть, а содержимое открывать после нажатия:

Заставить пользователя вглядываться

Пропорционально уменьшать размеры таблицы и текста:

Франкенштейн

Прокручивать столбцы свайпом и нажатием на кнопки. На миникарте показывать, какие столбцы сейчас на экране:

Дать пользователю настройки режима просмотра:

И возможность сортировки:

Пример 6

Понравилось — подписывайтесь


Смотрите миникурс «Адаптивные прототипы в Axure».

Подборку составил Антон Григорьев. Первая публикация.

Антон Григорьев

Written by

UX-проектировщик, сооснователь projectorat.ru, редактор UX Notes

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade