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

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

Простими словами: сайт як вода — набуває форми будь-якої «склянки», у яку його налили.

Що таке адаптивний дизайн і навіщо він потрібен

Понад половина трафіку в більшості ніш — мобільна. А з 2019 року Google працює за принципом mobile-first indexing: оцінює й індексує насамперед мобільну версію сторінки. Якщо на телефоні сайт «розповзається» — це б’є і по конверсії, і по позиціях одразу. Адаптивність тут не «краса», а гігієнічний мінімум.

Як працює

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

На що звернути увагу (типові помилки)

Дрібні кнопки, у які важко влучити пальцем.
Горизонтальний скрол на мобільному.
Текст, який доводиться зумити.
Спливаючі вікна на весь екран (Google не любить нав’язливі interstitial).

Приклад

На десктопі — три колонки товарів у ряд. На планшеті лишається дві, на смартфоні — одна на всю ширину, а бокове меню ховається під іконку-«бургер». Це одна й та сама сторінка, просто розкладка перебудувалася.

Часто плутають з…

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

Питання та відповіді