ГлавнаяГлоссарийАдаптивный дизайн

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

responsive design, отзывчивая вёрстка

Адаптивный дизайн — это вёрстка, которая на одном коде подстраивает страницу под экран любого размера.

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

Для SEO это почти обязательное условие: Google индексирует сайты по мобильной версии (mobile-first), и кривая вёрстка на телефоне бьёт по позициям напрямую. Один URL вместо пары «основной + m.» упрощает индексацию и не размывает ссылочный вес между версиями.

Суть
Резина под экран

Одна вёрстка подстраивается под смартфон, планшет и десктоп.

Как
CSS @media

Медиазапросы меняют сетку по контрольным точкам 480 и 1024 px.

Зачем
60% мобильных

Больше половины трафика идёт со смартфонов, иначе уйдут к конкуренту.

Адаптив — основа mobile-first индексации: робот смотрит мобильную версию.
Пример

Одна вёрстка на CSS-сетке: на мониторе 1920px меню в строку и три колонки товаров, на телефоне 360px — бургер-меню и один товар в ряд. Это критично, ведь Google индексирует мобильную версию в первую очередь.