Адаптивний дизайн сайту: що це і як його забезпечити

Адаптивний дизайн — це спосіб зробити сайт так, щоб одна й та сама сторінка зручно відкривалась на будь-якому екрані: від широкого монітора до смартфона. Макет не зменшується пропорційно, а перебудовується: колонки стають одна під одною, меню ховається в кнопку, шрифт і кнопки лишаються такого розміру, щоб ними було зручно користуватись пальцем.

Нижче — що це таке без жаргону, з чого складається адаптивна верстка, як перевірити свій сайт самостійно за 15 хвилин і що вимагати від студії, яка робить вам сайт.

Що таке адаптивний дизайн простими словами

Сайт має одну адресу й один код. Браузер дізнається ширину екрана і за правилами в CSS вирішує, як розкласти блоки. Три базові речі, на яких це тримається, описав ще 2010 року Ітан Маркотт у статті Responsive Web Design:

• гнучка сітка — ширини задаються не в пікселях, а відносно екрана;
• гнучкі зображення — картинка не виходить за межі свого блоку;
• медіазапити — окремі правила CSS для різних ширин екрана.

Українською «адаптивний дизайн», «адаптивна верстка» і «адаптивний сайт» зазвичай означають одне й те саме. Суворо кажучи, англійською розрізняють два підходи:

На практиці сучасні сайти поєднують обидва: сітка гнучка, а на кількох ширинах макет перебудовується помітно. Коли в Україні кажуть «адаптив», мають на увазі саме це.

Адаптивний сайт чи окрема мобільна версія

Ще десять років тому багато компаній робили окрему мобільну версію на піддомені на кшталт m.site.com. Сьогодні для нового сайту це майже завжди гірший вибір:

Google у своїй документації прямо рекомендує адаптивний дизайн як найпростіший у впровадженні й підтримці варіант.

Чому адаптивність потрібна кожному сайту

Більшість людей відкриває сайти з телефона. За даними Statista, мобільні пристрої вже кілька років дають понад половину світового вебтрафіку. У окремих нішах — доставка, послуги поруч, реклама в Instagram — частка телефонів ще вища. Подивіться свою цифру в Google Analytics: звіт «Технології», розбивка за категорією пристрою.

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

Незручний сайт на телефоні не отримує заявок. Людина не буде збільшувати пальцями дрібний текст і цілитись у крихітну кнопку. Вона повернеться у видачу й відкриє сайт конкурента. Що саме заважає людям залишити заявку, розбираємо в статті про UX-аудит сайту.

Як забезпечити адаптивний дизайн: з чого складається адаптивна верстка

Адаптив закладається ще в дизайні: для головних сторінок малюють не лише десктоп, а й мобільний екран. Потім верстальник переносить це в код. Ось що має бути на кожному адаптивному сайті.

1. Мета-тег viewport

Один рядок у коді сторінки: <meta name="viewport" content="width=device-width, initial-scale=1">. Без нього телефон показує сайт як зменшений десктоп, і жодні інші правила не допоможуть. Опис на MDN.

2. Точки перелому під контент, а не під моделі телефонів

Точки перелому (breakpoints) — ширини екрана, на яких макет перебудовується. Їх ставлять там, де «ламається» конкретний блок, а не під iPhone чи Samsung: моделей сотні, і завтра вийде нова. На цьому сайті, наприклад, дві основні точки — 1024 і 500 пікселів, а між ними сітка тягнеться плавно.

3. Гнучка сітка

Блоки розкладаються через CSS Grid і Flexbox, ширини задаються у відсотках або частках, відступи й шрифти — через відносні одиниці. Якщо макет зроблений у пікселях, а в коді потрібні відносні величини, перерахунок можна зробити в нашому безкоштовному конвертері px у vw.

4. Адаптивні зображення

Телефону не потрібна картинка шириною 2 000 пікселів. Браузеру дають кілька розмірів одного зображення (атрибути srcset і sizes), і він сам вибирає потрібний. Це прямо впливає на швидкість: зображення — зазвичай найважча частина сторінки. Як це працює — у довідці MDN, а що ще сповільнює сайт на телефоні — у статті про швидкість завантаження сайту.

5. Шрифт, який читається без збільшення

Основний текст на телефоні — не менше 16 пікселів, рядки не надто довгі, достатній контраст із фоном. Заголовки зменшуються на вузьких екранах, щоб одне слово не займало весь рядок.

6. Кнопки під палець

Google радить робити зону натискання не меншою за 48×48 пікселів — це приблизно подушечка пальця — і не ставити такі зони впритул одна до одної. Ще одна часта помилка — ефекти наведення мишею: на телефоні миші немає, і кнопка після дотику «залипає» в іншому кольорі. Тому ми вмикаємо ефекти наведення тільки на пристроях з мишею чи тачпадом.

7. Таблиці, форми й усе широке

Широка таблиця або прайс не повинні розтягувати всю сторінку — вони прокручуються всередині свого блоку. У формах поле телефону відкриває цифрову клавіатуру, поле email — клавіатуру з «@», а номер телефону на сайті — це посилання, за яким можна одразу подзвонити.

Як перевірити адаптивність сайту самостійно

Спеціальні знання не потрібні. Google закрив свій Mobile-Friendly Test наприкінці 2023 року, тож перевіряємо так.

Крок 1. У браузері на комп’ютері. Відкрийте сайт у Chrome, натисніть F12, потім Ctrl+Shift+M (на Mac — Cmd+Shift+M). Увімкнеться режим пристрою: вгорі можна вибрати модель телефона або тягнути ширину вікна й дивитися, як перебудовується сторінка.

Крок 2. На справжньому телефоні. Емулятор не показує все: реальну швидкість, клавіатуру, яка перекриває форму, незручні для пальця місця. Пройдіть сайт так, як його пройде клієнт: від головної до заявки.

Крок 3. У PageSpeed Insights. Вставте адресу в PageSpeed Insights і дивіться вкладку «Мобільний пристрій»: там і швидкість, і підказки на кшталт «замалі зони натискання».

Чекліст для кроку 2:

1. Сторінку не можна прокрутити вбік — нічого не виходить за край екрана.
2. Текст читається без збільшення пальцями.
3. У кнопки й посилання легко влучити з першого разу.
4. Меню відкривається, закривається й не перекриває контент назавжди.
5. Зображення не обрізані на найважливішому місці.
6. Таблиці й прайси прокручуються всередині себе, а не ламають сторінку.
7. Форма заявки заповнюється зручно, клавіатура не ховає кнопку «Надіслати».
8. Номер телефону натискається і відкриває дзвінок.
9. Спливаючі вікна можна закрити, і хрестик не виходить за межі екрана.
10. Сторінка відкривається швидко через мобільний інтернет, а не лише через Wi-Fi.

Якщо не проходять три пункти й більше, проблема зазвичай не в окремих дрібницях, а в тому, що сайт від початку робили під десктоп.

Що вимагати від студії, яка робить вам сайт

• Мобільні макети в дизайні. Хоча б для головної, сторінки послуги й форми заявки. Якщо мобільний вигляд «вирішить верстальник», вирішувати доведеться вам — на етапі приймання.
• Адаптивність у вартості. Це не додаткова опція: у нас адаптив входить у кожен проєкт і окремо не оплачується.
• Приймання за чеклістом. Домовтеся заздалегідь, на яких ширинах і пристроях перевіряєте сайт перед запуском. Чекліст вище підходить.
• Той самий контент на телефоні. Ховати на мобільному половину тексту — погана ідея і для людей, і для Google.

Якщо ваш нинішній сайт не адаптивний, «дотягнути» його зазвичай дорожче, ніж здається: верстку доводиться переписувати майже повністю. Тоді варто порахувати, чи не вигідніше одразу оновити сайт повністю. Як виглядають наші сайти на телефоні, можна подивитись у кейсах.