x
 
Роман Федоров
29 августа 2016
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

С подходами к адаптивной (десктопно-мобильной) вёрстке вроде все уже разобрались — что-то скрываем на одних устройствах, что-то показываем на других.

Но вот с отображением табличных данных, где каждую колонку (а их например шесть) нужно показать, понятно не всё.

Как в бюро решают такие задачи?


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

«Мобильная» Википедия уступает обычной в информативности, а её навигация требует специального изучения. Я переключаюсь в «стационарную» версию при первой возможности.

Хорошая мобильная версия сайта требует особого внимания и не терпит механической адаптации. Это относится и к таблицам на сайте.

Рассмотрим пример из «Справочника издателя и автора» А. Э. Мильчина:

Себестоимость и средняя реализационная цена центнера основных продуктов растениеводства (рубли)

Про­­­дук­ция Год Себесто­и­­­мость Средн. реализа­ц. ставка Рентабельность, %
Кенаф 1959 9,8 21,9 +123,0
1961 7,1 18,5 +161,0
Хлопок 1959 35,2 32,3 −8,3
1961 29,4 32,3 +9,8

Чтобы адаптировать таблицу к узкому экрану телефона, можно вспомнить, что таблица — компактный формат. Она экономит высоту за счёт использования двух измерений носителя — ширины и высоты. Но на телефоне ширины как раз не хватает, поэтому можно использовать линейный вывод.

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

Кенаф
Год 1959
Себестоимость 9,8
Средняя реализационная ставка 21,9
Рентабельность, % +123,0
Год 1961
Себестоимость 7,1
Средняя реализационная ставка 18,5
Рентабельность, % +161,0
Хлопок
Год 1959
Себестоимость 35,2
Средняя реализационная ставка 32,3
Рентабельность, % −8,3
Год 1961
Себестоимость 29,4
Средняя реализационная ставка 32,3
Рентабельность, % +9,8

Первая колонка в таблице — боковик — служит подлежащим ко всей строке, а её название обычно повторяется в общем заголовке таблицы. Поэтому значение первой колонки таблицы можно использовать в качестве названия группы вывода («кенаф», «хлопок»), а её название можно опустить («продукция»).

Это рабочее решение, но механически «адаптированную» таблицу стоит проверить по смыслу и довести до ума:

Кенаф
В 1959 году
Себестоимость 9,8
Средняя реализационная ставка 21,9
Рентабельность +123,0%
В 1961 году
Себестоимость 7,1
Средняя реализационная ставка 18,5
Рентабельность +161,0%
Хлопок
В 1959 году
Себестоимость 35,2
Средняя реализационная ставка 32,3
Рентабельность −8,3%
В 1961 году
Себестоимость 29,4
Средняя реализационная ставка 32,3
Рентабельность +9,8%

Поделиться
Отправить

Комментарии

Андрей Щербатых
29 августа 2016

Собственно, во многих местах таблицы можно избежать.

Например, стандартная для финтеха штука — статистика. Юзеру надо показать историю операций. Это выборка из БД-шечки. Что делает плохой дизайнер? Рисует таблицу с колонками, скажем: дата операции, сумма, провайдер, комиссия, кнопочка «распечатать чек».

Что делает Тиньков? Рисует плашечку, у которой справа крупная сумма, под ней мелкая комиссия и кнопочка повторить, слева мелко дата и провайдер. Получается, что табличные данные представили в виде данных, кинутых в 1 клетку с акцентом на самом важном — сумме. Такая плашка хорошо представляется в адаптивном виде — там по сути две колонки, и правая (где сумма) легко уменьшается путем уменьшения размера шрифта.

Роман Ильин
29 августа 2016

А как верстать такие адаптированные таблицы, доведённые до ума?

Одними media-queries здесь не отделаешься, а две разных таблицы в коде держать — накладно, и поисковые машины по голове не погладят.

Роман Буянов
29 августа 2016

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

(Картинка из РБК. Отмечу, что в целом на инфографику РБК совсем-совсем не стоит ориентироваться.)

Дмитрий Олляк
29 августа 2016

По ссылке три примера адаптивной верстки таблиц: скрыть несколько колонок, зафиксировать колонку с горизонтальной прокруткой остальной таблицы, перестроить таблицу плашками:
https://elvery.net/demo/responsive-tables/

Алексей Михайлов
29 августа 2016

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

Миша Крайнов
30 августа 2016

При четырёх значениях в таблице такой подход допустим. Но если значений 15, например?


9 сентября 2016

Алексей, вам не кажется, что это катит на отдельный совет? :-)

Отправьте свой вопрос, пожалуйста:
http://artgorbunov.ru/bb/soviet/ask/


9 сентября 2016

Миша, тут вопрос в предназначении таблицы и в инструментах поиска.

Мы же как-то пользуемся адресной книгой на телефоне, хотя в высоту она огого.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

3 1 4 2




Недавно всплыло

1 Поделитесь соображениями, как работать, путешествуя 8 2 Как написать хорошее резюме? 7