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

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

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

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

Пример 1.1, автор Стас Мельников

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

Пример 1.2

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

Пример 1.3

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

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

Пример 2.1

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

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

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

Пример 2.3

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

Пример 2.4

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

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

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

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

Пример 3.2

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

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

Пример 4

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

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

Пример 5

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

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

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

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

Пример 6

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

• Заметки UX-проектировщика ВКонтакте или в Фейсбуке;
• Рассылка UX-проектировщика.

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

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