Создатели сайтов придумали уже не один способ, как это сделать. С помощью CSS и JavaScript можно выстроить ячейки на маленьких экранах в одну колонку, можно скрыть колонки с не очень важными данными, и даже превратить таблицу в круговую диаграмму. Все эти способы уже не раз описаны как на английском, так и на русском языке, и Вы можете без труда прочесть о них в Интернете. Я же в своей статье хотел бы поговорить о том, как выбрать из этих решений то, которое нужно именно Вам и именно для Вашего сайта.

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

Будут ли люди сравнивать данные в колонках или строках?

Пример 1. Люди не будут сравнивать данные

Сначала рассмотрим пример таблицы, в которой пользователям не обязательно сравнивать данные. Пример такой таблицы — список фильмов. В этой таблице фильмы расположены в соответствии с рейтингом.

На большом экране удобно просматривать эти данные в виде таблицы, но вряд ли кому-то жизненно необходимо сравнивать одного режиссера с другим. Поэтому столбцы этой таблицы на маленьких экранах можно смело трансформировать в один.

Именно это сделали создатели сайта JQuery Mobile.

Рис. 1. Таблица с информацией о фильмах
в полной версии сайта

Пример 2. Люди будут сравнивать данные строк или столбцов

Если у вас в таблице есть, к примеру, список одинаковых данных по разным компаниям, то очевидно, что пользователь будет их сравнивать, чтобы выбрать для себя лучший вариант. Пример такой таблицы мы можем видеть на картинке.

Рис. 3. Таблица с данными, которые подлежат сравнению

В этом случае нам нужно решение, которое позволит пользователю сравнивать ряды. Один из вариантов, представленный здесь — это когда на маленьких экранах таблица переворачивается таким образом, что данные вместо горизонтального положения перестраиваются в вертикальное. Таким образом, верхний ряд — заголовки таблицы — теперь стал крайней левой колонкой, а колонки с данными, если они нужны, пользователь может прокручивать по горизонтали.

Рис. 4. Таблица с данными на экране мобильного телефона

Еще один вариант — это оставить пользователю возможность выбирать, какие столбцы отображать, а какие нет. Это реализовано здесь. На узких экранах столбцы с не очень важными данными скрываются, но если кто-то хочет их посмотреть, он может включить эти столбцы.

Рис. 5. Таблица с данными в полной версии сайта

 

Рис. 6 и 7. Та же таблица в мобильной версии. Остались только самые важные столбцы, но при необходимости можно включить все остальные.

Какая информация — важная?

Если вы решили скрыть на маленьких экранах часть информации, то естественно возникает вопрос: какая же информация — важная? В такой ситуации бывает полезно задать себе следующие вопросы:

Смогут ли пользователи отличить одну часть таблицы от другой?

Когда пользователь просматривает таблицу, ряд за рядом, в поисках нужной информации, как он может быстро отличить один ряд от другого? Это особенно важно, когда таблицы используются в интерфейсе веб-приложений.

В полной версии сайта мы можем поместить в таблицу все, что угодно. Но для мобильной версии необходимо оставить самую необходимую информацию, и быть уверенным, что пользователь не спутает одни данные с другими.

Должно ли все быть на экране одновременно, или можно добавить дополнительные элементы в случае необходимости?

Сложнее всего обычно бывает создать адаптивные таблицы, когда разработчик сайта пытается поместить все то, что есть на большом экране, на маленький. В самых сложных случаях это вызывает большие проблемы с отображением таблиц.

Многие люди ошибаются, если думают, что адаптивный дизайн означает показывать все, что есть на странице, вне зависимости от размеров экрана. На самом деле лучше поместить на узкий экран только самое важное, а остальное добавлять уже по мере увеличения.

Интересно, что чаще всего когда мы начинаем дизайн с полноэкранной версии и видим огромную таблицу с большим количеством контента, то нам трудно допустить, что на узком экране она потеряет часть этого контента. Но когда мы действуем по принципу «сначала мобильные», то таких проблем не возникает.

Итак, что имеет значение, когда речь идет о таблицах в адаптивном дизайне?

Если Вы можете ответить «да» на все три вопроса, значит, на Вашем сайте нет проблем с таблицами.

Ваш контент подскажет, что лучше всего делать с таблицами.

Есть множество различных способов разместить таблицы в адаптивном дизайне. Со временем их станет еще больше. Но каким образом выбрать правильный способ? Ответ может быть только один.

Ваш контент подскажет, что лучше всего делать с таблицами. Ваша задача — правильно проанализировать его.