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

Адаптивный дизайн (responsive design) — это подход к вёрстке, при котором одна страница автоматически подстраивает раскладку под ширину экрана: от смартфона до большого монитора, без отдельных версий сайта. Вёрстка «течёт» — колонки перестраиваются, изображения масштабируются, меню сворачивается.

Простыми словами: сайт как вода — принимает форму любого «стакана», в который его налили.

Что такое адаптивный дизайн и зачем он нужен

Больше половины трафика в большинстве ниш — мобильный. А с 2019 года Google работает по принципу mobile-first indexing: оценивает и индексирует прежде всего мобильную версию страницы. Если на телефоне сайт «расползается» — это бьёт и по конверсии, и по позициям сразу. Адаптивность тут не «красота», а гигиенический минимум.

Как работает

Гибкая сетка — ширины в процентах, а не жёсткие пиксели.
Media queries — CSS-правила, срабатывающие на разных диапазонах ширины.
Гибкие изображения — картинки не вылезают за контейнер.

На что обратить внимание (типичные ошибки)

Мелкие кнопки, в которые трудно попасть пальцем.
Горизонтальный скролл на мобильном.
Текст, который приходится зумить.
Всплывающие окна на весь экран (Google не любит навязчивые interstitial).

Пример

На десктопе — три колонки товаров в ряд. На планшете остаётся две, на смартфоне — одна на всю ширину, а боковое меню прячется под иконку-«бургер». Это одна и та же страница, просто раскладка перестроилась.

Часто путают с…

Отдельная мобильная версия (m.site) — это другой поддомен с отдельным кодом; адаптивный дизайн — один URL для всех.
Динамическая подача (dynamic serving) — сервер отдаёт разный HTML под устройство; в адаптиве HTML один.

Вопросы и ответы