Comments 8
Иллюстрации из статьи такие блёклые, что на телефоне еле различимы.
Если честно, то статья немного высосана из пальца. Вообще пропущен один и, пожалуй, главный момент — назначение таблицы. Если это таблицы с объявлениями / подобным, т.е. данными, которые вроде как и табличные, но вы не работаете с ними как с группой данных, а оцениваете каждый элемент по-отдельности — "карточки" могут зайти ("Каждую строку таблицы делать блоком"), однако удачи проводить какие-то аналитические сравнения с карточками.
Если данные требуют аналитики (не знаю, сравнивать страны по разным показателям, например, по статистике ковида из актуального), то начинается реальная боль и, к сожалению, большинство сайтов решают эту задачу криво — да, таблицей с горизонтальным скроллом, но в них часто забывают делать фиксированной шапку и первый столбец с названием страны, поэтому постоянно приходится либо запоминать какой столбец с нужной цифрой по порядку, либо скролить сразу в две стороны.
— доработаю статью.
— спасибо за интерес!
По поводу визуального анализа данных в таблицах — у меня есть предположение, что его можно выполнить при помощи графиков на основе данных таблицы. — то есть вычленить отдельные столбцы из таблицы, и на основе их строить сравнительные диаграммы (радиальные на пример).
— это решил проблему возможности анализа данных в таблице + позволит визуально увидеть разницу между строками.
Пример:
1. Выбираем столбец количество жителей в странах.
Ключ: Страна
Значение: Количество
2. Формируем график (вертикальные столбцы на пример)
3. Визуально сравниваем высоты столбцов + в легенде графика видим цифры.
(Но это уже совсем другая история)
1) Простые типовые под вашим контролем.
2) Сложные нетиповые.
3) Таблицы вне вашего контроля (произвольные, добавляемые пользователями и пр.).
Первое предлагаемое решение (преобразование строки в карточку) годится для типовых простых таблиц. Но и в этом случае есть проблемы. На каком этапе таблица будет преобразовываться в нужный формат? Если используется адаптивная верстка, то не обойтись без javascript-библиотек. А на мобильных устройствах при слабом интернет-канале загрузка библиотек и преобразование таблицы в нужный формат могут произойти через десяток секунд — в этот момент содержимое экрана сильно скакнет. Так что для задействования данного варианта лучше иметь отдельную версию сайта для мобильных устройств, чтобы таблица в нужном формате генерировалась на стороне сервера.
Также надо учесть, что в этом варианте надо будет вручную заниматься адаптацией каждой таблицы, т.е. это не универсальный вариант.
В итоге я использую комбинацию этих вариантов. Например, в таблице характеристик вместо колонок «название режима», «температура», «время», «краткое описание» сделал две колонки: «название режима», «описание». Причем «описание» сделал в виде карточки, включив туда «температуру» и «время». Т.е. получился некий компромисс. И показываю эту таблицу для всех типов устройств.
Адаптация таблиц под мобильные устройства