Адаптивный дизайн

Что такое адаптив на практике

Адаптивный дизайн — это вёрстка, которая на разных ширинах экрана сохраняет читаемость и сценарий, а не «сжимает десктоп до каши». Отдельный поддомен m. и отдельная «мобильная версия 2012 года» почти всегда хуже одной кодовой базы с гибкой сеткой: два сайта, два индекса, две ошибки.

Это техника ширин и компонентов. Философия «сначала узкий экран» — соседняя тема, Mobile First. Здесь — что должно произойти с блоками, когда окно 360px, 768px и 1280px.

Адаптив не равен «включена галочка в конструкторе». Галочка не чинит таблицу на 12 колонок, фиксированную ширину баннера и меню, которое выезжает за край.

Брейкпоинты — не религия

Брейкпоинт — ширина, на которой сетка меняет правила: колонки складываются, меню становится кнопкой, таблица превращается в карточки. Точки ставят по макету и по реальному контенту, не по списку устройств из презентации.

Типичная ошибка — подогнать вёрстку только под макеты 320 / 768 / 1440 и не посмотреть промежутки. Ломается обычно 390px с крупным шрифтом системы, 820px планшета и 1100px ноутбука, где ещё «не десктоп», но уже не телефон.

Не плодить десять точек «на всякий случай». Каждая точка — ветка поведения, которую надо тестировать. Лучше три осознанных перехода, чем набор магических чисел.

«Сделать как в макете пиксель в пиксель» на всех ширинах — ловушка. Макет — договорённость о иерархии. Живой текст длиннее. Кнопка на немецком длиннее. Адаптив обязан переживать это без выпадения блока.

Сетка и переполнение

Гибкая сетка строится на долях, минимум/максимум ширины и переносе блоков, не на фиксированных 1170px «как в Bootstrap 3 навсегда». Контейнер ограничивает строку. Колонки умеют схлопываться.

Горизонтальный скролл страницы — почти всегда дефект: что-то имеет ширину больше окна. Кандидаты: картинка без ограничения, блок с white-space: nowrap, карта, таблица, виджет чата, отрицательный отступ «для красоты», элемент с фиксированным width: 1400px.

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

Длинные слова, URL и номера в узкой колонке рвут сетку. Для них нужны переносы, а не надежда, что «клиент коротко напишет».

viewport в шапке документа обязателен. Без него телефон рисует «мини-десктоп» и предлагает щипать. Это не адаптив, это забытый мета-тег.

Картинки и медиа

Картинка, которая в макете 600px, в файле 4000px, на мобильном душит и память, и канал. Адаптив картинок — это не только max-width: 100%. Это набор размеров под слоты: герой, карточка, иконка. Иначе даже «резиновый» img качает лишнее. Про вес файлов — в статье как ускорить сайт; здесь важнее, чтобы изображение не выталкивало сетку.

Видео с фиксированным плеером 1280×720 без оболочки ломает узкий экран. Оболочка с сохранением пропорций — базовая гигиена.

Иконки в SVG лучше растровых «на глаз». Растр в интерфейсе на плотном экране мылит кнопки.

Фон-картинка с текстом поверх на узкой ширине часто прячет заголовок: кроп другой. Адаптив проверяют не «картинка влезла», а «текст героя читается».

Компоненты, которые предают

Слайдер с пятью баннерами на десктопе на телефоне становится каруселью, до которой не дотягиваются точки. Часто лучше один оффер и ссылка, чем пять кадров.

Липкая шапка высотой в треть экрана на телефоне крадёт место у контента. Если шапка липкая — компактная.

Модальные окна и чаты перекрывают кнопку заявки. На узком экране виджет в углу — это минус полезной площади и случайные клики.

Карты с зумом перехватывают скролл страницы. На телефоне это пытка. Нужен явный жест или статичный снимок со ссылкой «открыть карту».

Ховеры. На касании нет настоящего hover. Выпадающее меню «по наведению» на планшете не открывается или не закрывается. Для касаний — клик, явная кнопка, нормальный фокус.

Касания и текст

Площадь нажатия у ссылок в подвале и у чекбоксов формы часто меньше пальца. Пункты слипаются. Это не «пользователи толстые», это вёрстка под курсор мыши.

Кегль, который на десктопе «изящный», на телефоне становится мелким серым. Адаптив типографики — отдельные размеры для узкой ширины, не общий 14px везде.

Формы: поля на всю ширину колонки, кнопки не в ряд из четырёх штук. Иначе удобство, описанное в как сделать сайт удобным, на узком экране рассыпается, даже если десктоп приняли.

Как принимать работу

Смотреть не «включил адаптив в DevTools на 375». Смотреть живой телефон, живой планшет и узкое окно ноутбука. Прокрутить услугу, каталог, статью, форму, 404.

Чек-лист приёмки:

• Нет горизонтального скролла страницы на ключевых шаблонах.
• Меню открывается и закрывается, пункт можно попасть пальцем.
• Картинки не вылезают, подписи не наезжают на кнопки.
• Таблицы либо складываются, либо осознанно скроллятся внутри.
• Фокус с клавиатуры виден — адаптив не отменяет доступность.
• Шапка и чат не перекрывают поле ввода и кнопку отправки.

Ориентация. Ландшафт на телефоне — отдельная ширина: шапка плюс клавиатура формы съедают высоту. Проверяют не только «портрет 375». Вырезы и домашняя полоса: кнопки внизу экрана не должны прятаться под жестом системы.

DevTools с пресетом устройства — дымовой тест, не приёмка. Живой Safari и живой Chrome на Android по-разному зумят поля форм и рисуют шрифты. Адаптив, который «идеален в пресете» и ломается на реальном 390px с крупным системным текстом, не принят.

Если макеты были только десктопные, адаптив делают вслепую: разработчик угадывает приоритет блоков. Тогда сначала прототип узкой ширины, потом споры про тени. Сборка сетки и шаблонов — часть дизайна сайта, не «постобработка за вечер».

Что адаптив не обещает

Он не делает тяжёлый слайдер быстрым. Не заменяет понятную структуру. Не чинит текст, который на любой ширине бессмыслен. Он только не даёт интерфейсу развалиться, когда человек пришёл не с тем монитором, который висел в презентации студии.