Що таке адаптивна верстка
Адаптивна верстка — це спосіб зробити сайт так, щоб макет автоматично підлаштовувався під ширину екрана. Зміна відбувається в брейкпоінтах — точках, де змінюється розташування блоків (наприклад, меню перетворюється на «бургер»).
Понад половину трафіку — мобільний, і Google ранжує сайти за мобільною версією. Верстаємо адаптивно: без зламаних блоків і горизонтальної прокрутки на телефоні, планшеті й десктопі.
Коректно на всіх пристроях — від смартфона до широкого монітора
Чистий код (BEM, Flexbox, Grid) — легко підтримувати
Швидкість і Core Web Vitals у пріоритеті
Зробити адаптивним наявний сайт. Сайт працює, але на телефоні «пливе». Виправляємо проблемні блоки та брейкпоінти без повної переробки.
Адаптив для нового макета. Верстаємо новий дизайн одразу під смартфон, планшет і десктоп. Якщо макет у Figma — див. верстку з Figma.
Адаптивна верстка
Коли потрібна адаптивна верстка?
Адаптивна верстка необхідна, коли сайт повинен використовуватись на різних присторях, коли цільовий трафік на сайт зростає і потенційні клієнти з ним взаємодіють. Адже незалежно від пристрою, заявка має бути відправлено, а для того щоб зробити замовлення не потрібно використовувати ноутбук.
Як ми це робимо?
Спочатку ми аналізуємо структуру вашого сайту або макета, щоб визначити ключові елементи, які повинні адаптуватися. Бачимо, які блоки не зручні і перешкоджають подальшій взаємодії. При необхідності – створюємо нову структуру.
Для кого?
Послуга адаптивної верстки підходить власникам бізнесу, які хочуть збільшувати свій дохід за рахунок того, що використання пристрою користувача не перешкоджає йому робити замовлення чи залишати заявки.
Що входить у роботу:
Аналіз структури сайту.
Створення та налаштування коду.
Проектування адаптивної верстки.
Тестування на різних пристроях та браузерах.
10 ознак неадаптивного сайту
Відкрийте сайт на телефоні. Якщо є хоч щось із цього — верстку час лагодити.
Доводиться рухати сторінку вбік (горизонтальна прокрутка)
Текст дрібний, доводиться збільшувати пальцями
Кнопки надто близько, легко схибити
Меню не вміщується або не відкривається
Зображення виходять за краї екрана
Блоки накладаються один на одного
Форми незручно заповнювати з телефона
Сайт довго завантажується на мобільному інтернеті
Таблиці обрізаються й не прокручуються
Lighthouse, PageSpeed Insights або емуляція пристрою в Chrome DevTools показують проблеми мобільної версії (звіт «Зручність для мобільних» і Mobile-Friendly Test Google вимкнув у грудні 2023)
Як самостійно перевірити мобільну версію сайту за 5 хвилин
Для першої діагностики не потрібен розробник — вистачить браузера й безкоштовних інструментів Google.
Chrome DevTools
F12 → режим пристрою (Ctrl+Shift+M), перевірте ширини 360, 390 і 768 px.
PageSpeed Insights
Мобільна оцінка та Core Web Vitals реальних користувачів зі звіту CrUX.
Search Console
Звіт «Основні веб-показники», група URL «Мобільні».
Реальні пристрої
iPhone (Safari) і Android (Chrome) — емулятор помічає не все.
Надішліть нам
URL сторінки, модель пристрою та скриншот проблеми — оцінимо обсяг робіт.
Технології та терміни
Проведіть пальцем праворуч, щоб побачити всю таблицю
Термін | Що це простими словами |
|---|---|
| meta viewport | Рядок у коді сторінки, який каже браузеру телефона показувати сайт на ширину екрана, а не зменшену копію десктопа |
| Брейкпоінти | Точки зміни макета під час зміни ширини екрана |
| Mobile-first | Підхід, коли спершу верстають під мобільний, а потім розширюють |
| Flexbox / Grid | Сучасні способи розкладки блоків, гнучкі під будь-який екран |
| srcset / picture | Адаптивні зображення: телефон завантажує маленьку картинку, монітор — велику |
| clamp() | Розмір шрифту плавно змінюється разом із шириною екрана в заданих межах, без стрибків на брейкпоінтах |
| Container queries | Блок підлаштовується під ширину свого контейнера, а не всього екрана — зручно для карток і сайдбарів |
| BEM | Block Element Modifier — методологія іменування CSS-класів, код простіше підтримувати |
| Bootstrap / Tailwind | CSS-фреймворки для швидкої та стабільної адаптивної верстки |
Під які екрани верстаємо: реальні роздільності українських користувачів
Базова сітка брейкпоінтів охоплює більшість пристроїв. Пріоритети уточнюємо за даними GA4 вашого сайту: які екрани у ваших клієнтів, туди й основна увага.
Проведіть пальцем праворуч, щоб побачити всю таблицю
Група | Ширина, px | Що перевіряємо |
|---|---|---|
| Смартфони | 360–414 | Меню, форми, кнопки дзвінка, таблиці |
| Планшети | 768–1024 | Сітка карток, горизонтальна орієнтація |
| Десктоп | 1280–1920 | Основний макет, ширина тексту |
| Широкі та складані екрани | 2560+ | Обмеження ширини контейнера, щоб рядки не розтягувалися |
Ціна адаптивної верстки
Проведіть пальцем праворуч, щоб побачити всю таблицю
Тип проєкту | Що входить | Ціна |
|---|---|---|
| Лендинг | 1 сторінка, адаптив під 3 роздільності: 360, 768 і 1440 px | від $80 |
| Багатосторінковий сайт | Набір шаблонів, усі ключові сторінки | від $200 |
| Виправлення адаптиву | Виправлення наявної верстки | від $50 |
| Додатковий шаблон сторінки | Ще один унікальний шаблон у межах проєкту | за запитом |
Тут — адаптація наявного сайту або верстки під екрани. Перенесення нового макета з Figma в код із pixel-perfect — окрема послуга: верстка з Figma.
Адаптив і Core Web Vitals: чому мобільний сайт повільний
Сайт може правильно виглядати на телефоні й водночас повільно завантажуватися. Часті причини пов’язані саме з версткою.
Проведіть пальцем праворуч, щоб побачити всю таблицю
Проблема | Метрика | Рішення |
|---|---|---|
| Важкі зображення без srcset і WebP | LCP (ціль ≤ 2,5 с) | Адаптивні зображення, WebP/AVIF, пріоритетне завантаження головної картинки |
| Блоки зсуваються під час завантаження картинок і шрифтів | CLS (ціль ≤ 0,1) | Розміри для зображень, резерв місця під банери, font-display |
| Важкий JS меню та слайдерів | INP (ціль ≤ 200 мс) | Полегшені скрипти, відкладене завантаження, CSS замість JS, де можливо |
| Блоки приховані на мобільному, але все одно завантажуються | LCP, загальна вага сторінки | Не завантажувати те, що не показується |
Опишіть свій запит
і ми зробимо для Вас
пропозицію
Напишіть нам, щоб бути в ТОП
Про адаптивну верстку
Чим адаптивна верстка відрізняється від мобільної версії?
Мобільна версія — це часто окремий сайт (m.site), який треба підтримувати паралельно. Адаптивна верстка — це один сайт, який сам підлаштовується під будь-який екран. Другий підхід сучасніший, дешевший у підтримці та кращий для Google.
Чому це важливо для SEO?
Google використовує mobile-first індексацію — оцінює насамперед мобільну версію. Неадаптивний сайт гірше ранжується і втрачає користувачів, які йдуть через незручність. Адаптив — це база, без якої просування буксує.
Чи можна виправити адаптив на готовому сайті?
Так, часто не потрібно переробляти все — достатньо виправити проблемні блоки та брейкпоінти. Подивимося поточну верстку й скажемо, що реально виправити, а що простіше переверстати. Від $50 за виправлення.
Скільки коштує зробити сайт адаптивним?
Виправлення адаптиву на наявному сайті — від $50, адаптивна верстка лендингу — від $80, багатосторінкового сайту — від $200. Підсумок залежить від кількості унікальних шаблонів і того, наскільки старий код. Точну ціну називаємо після перегляду сайту.
Чи можна зробити адаптив без переробки всього сайту?
Часто так. Якщо сайт зверстано на сучасній основі, достатньо переписати стилі проблемних блоків і додати брейкпоінти. Якщо верстка на таблицях або з фіксованою шириною, вигідніше переверстати шаблони — це скажемо після аудиту.
Як перевірити, чи адаптивний сайт?
Відкрийте сайт у Chrome, натисніть F12 і ввімкніть режим пристрою — подивіться ширину 360 і 768 px. Потім перевірте сторінку в PageSpeed Insights на вкладці «Мобільні» та відкрийте її на реальному телефоні. Горизонтальна прокрутка й дрібний текст — головні ознаки проблем.
Чи впливає мобільна версія на позиції в Google?
Так. Google індексує сайти за мобільною версією, тому вміст і зручність на телефоні безпосередньо впливають на ранжування. Повільна або незручна мобільна версія погіршує і Core Web Vitals, і поведінку користувачів.
Що ще посилить результат
Розробка сайтів
Сайти під SEO та продажі з першого рядка коду.
Техпідтримка сайтів
Оновлення, бекапи та безпека за абонплату.
Виправлення помилок сайту
Лагодимо верстку, форми, швидкість і віруси.
Автор матеріалу
15 років у пошуковому просуванні: технічне SEO, стратегія, виведення сайтів на ринки України та інших країн.
Експертиза: Технічне SEO · Стратегія · Аналітика
Матеріал оновлено · Уся команда
