Энтони Ценг написал об адаптации таблиц под маленькие экраны.

— Чтобы найти подходящее решение, надо понять назначение таблицы и разобраться в её структуре;
— Таблица помогает сравнивать объекты по параметрам. Первый столбец — идентификаторы объектов. Остальные столбцы — значения параметров этих объектов;
— Можно зафиксировать первый столбец на экране и дать возможность прокручивать или переключать столбцы с параметрами. Шапка таблицы тоже должна быть зафиксирована;
— Все параметры объекта (для комплексного анализа) можно показывать по нажатию на строку с этим объектом. Энтони предлагает модальное окно, но аккордеон тоже подойдёт;
— На возможность нажатия на строку может указывать иконка глаза (или шеврон, если там аккордеон);
— Если параметров немного и пользователям надо сопоставлять несколько параметров одновременно, вместо таблицы можно использовать карточки. Минусы: 1) названия параметров повторяются во всех карточках, 2) карточки занимают больше места по вертикали.

In English. #adaptive #table

Андрей Яремко написал о размерах десктопных экранов.

— Иногда подача сайта в портфолио отличается от того же сайта в жизни тем, что пользователь может увидеть на первом экране («до линии сгиба»);
— Ограничения по высоте важно учитывать для проектов с объёмной навигацией и закреплёнными панелями управления, а также при решении закрепить шапку или вертикальное меню;
— Как и в адаптивном дизайне, надо учитывать минимальные размеры самых распространённых устройств;
— В Material Design 2 десктопные устройства начинаются с ширины в 1240 пикселей (40 отданы полосе прокрутки);
— Минимальные популярные разрешения в этом случае: 1366×768 (16%) и 1280×720 (6%). Стандартное разрешение 13-дюймового макбука с 2013 года: 1280×800, но нижний Док занимает больше пространства;
— Все эти панели занимают пространство по вертикали и уменьшают рабочее пространство. В массе пользователь работает с настройками операционных систем и браузеров по умолчанию, то есть не перемещает Док или панель задач Виндоус налево;
— Для разрешения 1366×768 с Edge и Chrome рабочая область по высоте будет 657 пикселей. В разных версиях и с дополнительной панелью (вроде Избранного) рабочая область может начинаться с 550 пикселей;
— Почему это редко учитывают: нет правильных пресетов для создания макетов и предпросмотра, приукрашивание макетов в портфолио, слишком хорошая техника у творцов.

#adaptive

Аида Пачева написала о новом подходе к адаптивности сайтов.

— Оптимального вьюпорта нет, значит, адаптивность должна быть гибкой;
— Но это не значит, что надо больше брейкпоинтов и под все рисовать макеты;
— С помощью контейнерных запросов и min(), max() и clamp() можно делать адаптивными отдельные компоненты;
— При этом для каждого компонента проработать надо только те состояния, которые ему нужны. Некоторым надо совсем немного;
— Например, хедеру может хватить двух состояний: 1) Навигация свёрнута в бургере; 2) Навигация развёрнута. Место для неё появляется с ширины в 995 px;
— «Шампуров [брейкпоинтов] стало больше, но суммарное количество шашлчыков на них [состояний компонентов] — меньше»;
— Если компоненты готовы измениться на близких значениях ширины (995 и 1000 px), стоит их синхронизировать;
— Чтобы независимые компоненты сходились вместе по вертикальным направляющим, помогут глобальные правила для сетки и шрифтовых стилей для конкретных диапазонов брейкпоинтов;
— Адаптивность может быть многоуровневой. При изменении ширины вьюпорта может перестраиваться блок с карточками, а уже при изменении ширины карточки в этом бллоке — перестраиваться её содержимое.

#adaptive