Адаптивний сайт — це сайт, який автоматично підлаштовується під розмір екрана. На комп’ютері блоки стоять у кілька колонок, на смартфоні вишиковуються в одну, меню згортається в кнопку, а текст лишається читабельним без збільшення. Для користувача це просто «зручний сайт», для бізнесу — обов’язкова умова.
Чому адаптив обов’язковий
- Більшість відвідувачів — із телефона. Особливо в рекламі й соцмережах.
- Google оцінює мобільну версію. Пошуковик індексує й ранжує сайт насамперед за тим, як він виглядає й працює на смартфоні.
- Заявки. Якщо форму незручно заповнити пальцем, а на телефон не можна натиснути, людина просто йде.
Адаптив, гумова верстка й мобільна версія
Адаптивна верстка
Один сайт і одна адреса для всіх пристроїв. Дизайн перебудовується за контрольними точками ширини екрана. Це стандарт сьогодні: простіше підтримувати, немає дублів сторінок.
Гумова верстка
Елементи просто розтягуються й стискаються пропорційно. На дуже вузьких екранах такий сайт часто стає незручним, тому її зазвичай поєднують з адаптивом.
Окрема мобільна версія
Окремий сайт на піддомені на кшталт m.site.com. Підхід застарів: дві версії складніше підтримувати, а помилки в налаштуванні призводять до дублів у пошуку.
Що входить у хороший адаптив
- Текст читається без збільшення, рядки не надто довгі.
- Кнопки й посилання досить великі для пальця й не стоять впритул.
- Немає горизонтальної прокрутки.
- Зображення підвантажуються в розмірі під екран, а не в повній роздільності.
- Форми короткі, з правильною клавіатурою: цифровою для телефона, з @ для пошти.
- Телефон клікабельний, месенджери відкриваються в застосунку.
- Спливаючі вікна не закривають увесь екран.
Типові помилки адаптиву
- Прихований контент. На телефоні прибирають блоки, «щоб було коротше», а разом із ними — ціни, відгуки й важливий для SEO текст. Краще скоротити й переупорядкувати, ніж ховати.
- Таблиці, що не вміщуються. Широкі таблиці цін виїжджають за край екрана. Їх варто перебудувати в картки або дати акуратну горизонтальну прокрутку всередині блоку.
- Липкі елементи на пів екрана. Закріплена шапка, банер cookie й кнопка чату разом закривають половину екрана телефона.
- Важкі зображення. Картинки в роздільності для монітора вантажаться мобільним інтернетом секундами.
Адаптив і швидкість
Адаптивний сайт має не лише правильно виглядати, а й швидко завантажуватися мобільною мережею. Використовуйте сучасні формати зображень (WebP, AVIF), віддавайте картинки під розмір екрана, відкладайте завантаження того, що нижче першого екрана, і не підключайте скрипти, без яких можна обійтися.
Як перевірити свій сайт
- Відкрийте сайт на своєму телефоні й пройдіть шлях клієнта: знайти послугу, ціну, залишити заявку.
- Поверніть телефон горизонтально — нічого не має ламатися.
- У браузері на комп’ютері увімкніть режим розробника й подивіться сайт на різних ширинах екрана.
- Перевірте мобільну швидкість у PageSpeed Insights.
Якщо адаптиву немає
Старий сайт без адаптиву можна доопрацювати, але іноді дешевше й швидше зробити новий дизайн: стара верстка часто опирається переробці. Рішення залежить від того, наскільки сайт застарів і чи влаштовує вас решта. Ми робимо адаптив частиною будь-якого проєкту — детальніше в послузі створення сайту під ключ і розробка дизайну.
Часті запитання
Адаптив збільшує вартість сайту?
Сьогодні адаптив — стандартна частина розробки, а не додаткова опція. Якщо студія пропонує його за окремі гроші, варто уточнити, що саме входить у базову ціну.
Чи треба окремо малювати дизайн для телефона?
Так, хоча б для ключових сторінок. Мобільний дизайн — це не зменшений десктоп, а продуманий порядок блоків і розмір елементів для пальця.
