Pull to refresh

Comments 8

Иллюстрации из статьи такие блёклые, что на телефоне еле различимы.

Если честно, то статья немного высосана из пальца. Вообще пропущен один и, пожалуй, главный момент — назначение таблицы. Если это таблицы с объявлениями / подобным, т.е. данными, которые вроде как и табличные, но вы не работаете с ними как с группой данных, а оцениваете каждый элемент по-отдельности — "карточки" могут зайти ("Каждую строку таблицы делать блоком"), однако удачи проводить какие-то аналитические сравнения с карточками.


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

Да, вы полностью правы на мой взгляд.
— доработаю статью.

— спасибо за интерес!

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

Пример:
1. Выбираем столбец количество жителей в странах.
Ключ: Страна
Значение: Количество
2. Формируем график (вертикальные столбцы на пример)
3. Визуально сравниваем высоты столбцов + в легенде графика видим цифры.

(Но это уже совсем другая история)
Я бы разделил таблицы на три типа:
1) Простые типовые под вашим контролем.
2) Сложные нетиповые.
3) Таблицы вне вашего контроля (произвольные, добавляемые пользователями и пр.).

Первое предлагаемое решение (преобразование строки в карточку) годится для типовых простых таблиц. Но и в этом случае есть проблемы. На каком этапе таблица будет преобразовываться в нужный формат? Если используется адаптивная верстка, то не обойтись без javascript-библиотек. А на мобильных устройствах при слабом интернет-канале загрузка библиотек и преобразование таблицы в нужный формат могут произойти через десяток секунд — в этот момент содержимое экрана сильно скакнет. Так что для задействования данного варианта лучше иметь отдельную версию сайта для мобильных устройств, чтобы таблица в нужном формате генерировалась на стороне сервера.

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

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

Преобразовывать строки в карточки можно чистым CSS, если грамотно это спроектировать.

Можно попробовать ещё транспонировать таблицу. Фиксируем 1-3 строки (заголовочные — id, фото, фио) и наименование полей (email, phone и тд.). Получаем: при горизонтальном скролле всегда видим названия поля, при вертикальном — видим шапку. Если надо иметь возможность сравнить элементы не являющиеся соседними, то тут можно подумать о фиксировании столбцов.
Как вариант — это имеет смысл делать, когда ширина фиксированных столбцов не занимает много места на экране телефона.
К тому же горизонтальный скроллинг — это априори скрытый за границами экрана контент — что нарушает визуальный поиск.
Only those users with full accounts are able to leave comments. Log in, please.