Роман Федоров
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%

P. S. Дата следующего набора в Школу стажёров пока неизвестна.

 
Мы напишем вам, когда будет открыт набор. Без спама.

Поделиться

Комментарии

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

2 Мильчин говорит, что разряды в числах нужно отделять пробелом. Как правильно? 1 4




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

Собеседница психует и кидает трубку. Причём до этого дама была вполне адекватной, и мы нормально работали 1 Расскажите об обратной связи в интерфейсе 1 Как написать заказчику, что я установлю модуль на его сайт после окончательной оплаты, и при этом не обидеть его? 2 Как флексить. Отступить от идеала 2