Илья Бирман рассказал об адаптивных сайтах без брейкпоинтов.
— Кирпичная вёрстка — когда сайт свёрстан под определённую ширину и не реагирует на изменение ширины окна браузера;
— Благодаря резиновой вёрстке сайт выглядел хорошо на популярных размерах экранов, но потом появились очень большие ширины (2560px) и очень маленькие (320px);
— На большие экраны всем было плевать. Пользователей у них было мало, да и зачем открывать браузер на весь экран на таком экране;
— Появилось много инструментов, например, медиазапросы позволяют узнать, что у пользователя тач-устройство и адаптировать дизайн;
— Проблема адаптивного дизайна с брейкпоинтами: надо делать несколько версий дизайна, как когда-то делали отдельные мобайл-версии;
— Дизайн, адаптированный под определённый диапазон ширины, часто выглядит не очень ближе к границам этого диапазона;
— Илья предлагает прорабатывать адаптивные состояния для разной ширины отдельных элементов, из которых состоит страница;
— За любым этажом можно закрепить поведение: перенос строк, изменение числа колонок, прокрутка, масштабирование;
— Высший пилотаж, когда переключение между состояниями элементов происходит из-за контента, а не произвольных чисел ширины;
— Может потребоваться отдельный мобильный дизайн кусочка как исключение (предусмотреть тач), когда остальные части сайта не меняются драматически;
— Не будет такого момента, когда сайт при какой-то ширине ломается;
— Адаптивность должна быть частью дизайн-системы, а не шагом по разработке конкретных экранов;
— Минус подхода Mobile-first: упрощать десктопный дизайн до мобильного проще, чем обогащать выхолощенный мобильный, плюс дизайнеры теряют навыки вёрстки.
Копия в ВК Видео. #adaptive
Post #1751
2.95K