Адаптивный дизайн
Адаптивность работает за счёт сочетания резиновой сетки, гибких изображений и медиа-запросов CSS, которые меняют стили на разных диапазонах ширины экрана.
Ключевые приёмы
- Резиновая сетка: размеры в процентах и относительных единицах вместо фиксированных пикселей.
- Брейкпоинты — точки, в которых меняется раскладка (типично 640, 768, 1024, 1280 px).
- Изображения с разной плотностью и форматами под разные устройства.
- Скрытие или перестроение элементов на маленьких экранах.
Распространённые ошибки
- Делают сначала десктоп, потом «впихивают» в мобильный — лучше идти от мобильного (mobile-first).
- Прячут важные функции на мобильном «потому что не помещаются» — лучше переосмыслить интерфейс, чем убрать функцию.
- Забывают про средние размеры — планшеты часто выглядят как растянутый мобильный или сжатый десктоп.
Когда применять и когда нет
Применять
- Любой публичный веб-продукт
- Внутренние SaaS, где менеджеры работают и с ноутбука, и с телефона
- Лендинги, маркетинговые сайты, медиа
Не применять
- Когда вы реально делаете отдельные приложения под платформы (нативные iOS/Android), там адаптивность работает иначе
- Очень узкоспециализированные интерфейсы для одного устройства (промышленные панели и т. п.)
Примеры применения
В админке внутреннего SaaS-продукта менеджеры регулярно работают с ноутбука и телефона. Изначально интерфейс был только под десктоп — на телефоне был неудобный «зум». После рефакторинга в адаптивный дизайн команда стала закрывать срочные задачи прямо с телефона: за неделю выросло количество ответов на запросы клиентов после рабочего дня.
Часто задаваемые вопросы
Адаптивный дизайн — общее понятие про подстраивание под экраны. Mobile-first — подход к процессу проектирования с мобильной версии. «Адаптивная вёрстка» (в нашей традиции) — техническая реализация адаптивного дизайна на CSS. В разговорной речи эти термины часто используются как синонимы.
Сейчас почти нет. Отдельные мобильные версии — наследие 2010-х, когда CSS-возможностей было меньше. Современный подход — один сайт с адаптивным дизайном, что и проще поддерживать, и лучше для SEO.