Адаптивный дизайн (responsive web design) — это подход, при котором одна и та же страница подстраивает свою раскладку под экран, на котором её открыли: от небольшого телефона до широкого монитора. Вместо отдельных мобильной и десктопной версий адаптивный сайт использует гибкую сетку, гибкие изображения и медиазапросы CSS, чтобы перестроить один и тот же контент под каждый размер экрана. Сегодня так делают почти все сайты, и именно этот подход рекомендует Google.
Откуда взялся адаптивный веб-дизайн
Термин ввёл дизайнер Итан Маркотт в статье «Responsive Web Design», опубликованной в журнале A List Apart в мае 2010 года. iPhone тогда было три года, и многие компании держали рядом с основным сайтом отдельную мобильную версию на поддомене m. Маркотт предложил один сайт, который реагирует на устройство, и описал три составляющие:
- Резиновая сетка: ширина блоков задаётся в относительных единицах (процентах), а не в фиксированных пикселях.
- Гибкие изображения: картинки масштабируются внутри своих контейнеров.
- Медиазапросы: правила CSS, которые срабатывают только при выполнении условия, например при минимальной ширине экрана.
Эти три идеи до сих пор описывают, как устроены адаптивные сайты, хотя инструменты CSS с тех пор стали намного удобнее.
Основные принципы
Контент перестраивается, а не исчезает
Адаптивная страница показывает на любом устройстве один и тот же контент, просто иначе расположенный. Три колонки на десктопе превращаются в одну на телефоне, горизонтальное меню сворачивается в кнопку, а большая таблица прокручивается внутри своего блока. Прятать важный контент на мобильных — частая ошибка, тем более что Google индексирует именно мобильную версию страниц.
Между брейкпоинтами раскладка тянется плавно
Раскладка растягивается и сжимается вместе с экраном и меняет структуру только на нескольких значениях ширины, которые называют брейкпоинтами (контрольными точками). Как их выбрать, разобрано в отдельной статье: брейкпоинты для адаптивной вёрстки.
Mobile first
Большинство адаптивных сайтов сейчас верстают по принципу mobile first: базовый CSS описывает телефонную раскладку, а медиазапросы добавляют сложность для больших экранов. Обычно так получается более простой CSS и более быстрые мобильные страницы. Подробнее в статье mobile first в дизайне и вёрстке.
Касания и плотность пикселей тоже часть адаптивности
Адаптивный дизайн касается не только ширины. Телефоном управляют пальцами, у него экран с высокой плотностью пикселей, и его поворачивают из вертикального положения в горизонтальное. На адаптивном сайте зоны нажатия достаточно крупные для большого пальца, изображения чёткие на экранах высокой плотности, а раскладка не ломается при повороте.
Адаптивный (responsive) и adaptive-дизайн
В русском языке словом «адаптивный» обычно называют responsive-подход, но в англоязычной литературе есть и отдельный adaptive design. Разница такая:
| Responsive (адаптивный) | Adaptive | |
|---|---|---|
| Раскладка | Одна резиновая раскладка, которая меняется на брейкпоинтах | Несколько фиксированных раскладок, по одной на класс устройств |
| Между размерами | Плавно тянется | Перескакивает на ближайшую фиксированную раскладку |
| Определение устройства | Не нужно, CSS реагирует на viewport | Часто по user agent на сервере |
| Поддержка | Одна кодовая база | Несколько шаблонов, которые надо синхронизировать |
| Где применяется сейчас | Почти все сайты | Некоторые крупные сайты и сервисы с сильно отличающимися мобильными сценариями |
Полезнее всего различать не названия, а суть: резиновая или фиксированная раскладка, адаптация средствами CSS или на сервере.
Как делают адаптивный дизайн сегодня
Современный CSS сильно упрощает адаптивную вёрстку по сравнению с 2010 годом:
- Мета-тег viewport сообщает мобильному браузеру, что нужно использовать ширину устройства. Без него остальное не работает. Подробнее: мета-тег viewport.
- Flexbox и CSS Grid создают раскладки, которые сами переносят элементы. Правило
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))даёт сетку карточек от одной до четырёх колонок без единого медиазапроса. - Медиазапросы меняют раскладку на выбранной ширине, а также реагируют на ориентацию, тёмную тему, снижение анимации и тип ввода. Синтаксис и примеры: медиазапросы CSS.
- Контейнерные запросы (container queries) позволяют компоненту реагировать на ширину своего контейнера, а не всего экрана, поэтому карточка хорошо выглядит и в боковой колонке, и в основной.
- Резиновая типографика на
clamp()плавно масштабирует заголовки вместе с экраном. - Адаптивные изображения с
srcsetиsizesпозволяют браузеру скачать файл нужного под экран размера.
Фреймворки вроде Tailwind CSS и Bootstrap упаковывают эти приёмы вместе с готовыми брейкпоинтами.
Примеры адаптивных паттернов
- Column drop: колонки по одной уходят вниз по мере сужения экрана.
- Off-canvas-меню: на маленьких экранах меню выезжает сбоку по нажатию на кнопку.
- Приоритетный контент: на мобильных главное действие (поиск, «Забронировать») поднимается наверх.
- Адаптивные таблицы: таблица прокручивается по горизонтали в своём контейнере или строки превращаются в карточки.
- Арт-дирекшн: на мобильных показывается другой кадр изображения с помощью элемента
<picture>.
Как проверить адаптивность сайта
Проверяйте на нескольких значениях ширины, а не только «телефон» и «десктоп». Потяните адаптивный viewport в Chrome DevTools, чтобы найти, где раскладка ломается, затем проверьте конкретные устройства с их настоящими user agent и плотностью пикселей. Здесь удобен просмотр мобильной версии в один клик, например Mobile View Extension: он показывает ту же страницу на пресетах устройств без открытия DevTools. Завершайте проверку на реальных телефонах. Полная методика в статье как проверить адаптивность сайта.
Частые вопросы
Какая главная цель адаптивного дизайна?
Дать каждому посетителю удобную и читаемую страницу с тем же контентом, какой бы ни был у него экран, и всё это из одной кодовой базы.
Адаптивный дизайн и mobile friendly — одно и то же?
Адаптивный дизайн — один из способов сделать сайт удобным для мобильных, и самый распространённый. Но сайт может быть адаптивным и при этом неудобным на телефоне, например если кнопки слишком мелкие или страница долго грузится. Подробнее: адаптация сайта под мобильные устройства.
Кто придумал адаптивный веб-дизайн?
Термин и сам подход предложил Итан Маркотт в 2010 году в статье для A List Apart.