Що таке адаптивна верстка сайту, навіщо вона потрібна та як перевірити адаптивність

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

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

Що змінюється на адаптивному сайті

Верстка перетворює дизайн на сторінку, яку відображає браузер. HTML задає структуру вмісту, а CSS — правила його оформлення та розташування. В адаптивній реалізації ці правила враховують доступну ширину й інші умови перегляду. Такий підхід також називають responsive-версткою.

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

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

Адаптивність потрібна не тільки смартфонам. Людина може відкрити сайт у вузькому вікні ноутбука, розділити екран між двома програмами або повернути планшет. Тому перевіряти слід поведінку сторінки в діапазоні ширин, а не лише її вигляд на кількох популярних пристроях.

Як сторінка підлаштовується під розмір екрана

Гнучка сітка дає блокам змогу змінювати ширину й розташування. Для цього використовують, зокрема, CSS Grid і Flexbox — інструменти побудови сіток та розміщення елементів. Важливий результат: текст не виходить за межі колонки, картки не накладаються одна на одну, а відступи не забирають більшу частину екрана.

Гнучкі зображення та відео мають уміщуватися у свої блоки. Фото не повинне розтягувати сторінку вбік або непропорційно стискатися. При цьому зменшення картинки на екрані саме собою не зменшує розмір завантажуваного файла: підбір зображень для різних умов перегляду — пов’язане, але окреме завдання.

Контрольні точки, або брейкпойнти, визначають, коли потрібно змінити компонування: перенести колонку, перебудувати навігацію чи змінити відступи. Для цього застосовують медіазапити CSS — умови, за яких діють певні стилі. Точки обирають за поведінкою вмісту, а не за принципом «потрібні рівно три макети для телефона, планшета й комп’ютера».

Налаштування viewport повідомляє мобільному браузеру, як визначати ширину області перегляду. Без відповідного налаштування він може показувати зменшену широку сторінку замість очікуваного вузького компонування. Водночас одне правильне налаштування viewport не виправить негнучкі блоки або незручну навігацію.

Підхід mobile-first означає, що проєктування починають із малого екрана, а потім розширюють компонування для більшого простору. Він допомагає спочатку визначити пріоритети, але не дозволяє нехтувати зручністю на комп’ютері.

Навіщо потрібна адаптивна верстка сайту

Передусім — щоб відвідувач міг виконати свою задачу. Для інформаційного сайту це прочитати матеріал і знайти потрібний розділ, для магазину — порівняти товари й оформити замовлення, для сайту послуг — дізнатися умови та зв’язатися з компанією. Коли контактну кнопку перекриває банер, проблема вже не в естетиці: людина не може скористатися функцією.

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

Для пошуку важлива повноцінність мобільного вмісту. Google використовує мобільну версію контенту для індексації та ранжування й рекомендує responsive-дизайн як просту для підтримки конфігурацію. Однак сама адаптивність не гарантує високих позицій: вона не замінює корисний зміст, доступність сторінок для пошукового робота та роботу над іншими характеристиками сайту.

Чи потрібна окрема мобільна версія

За responsive-підходу сторінка має ту саму адресу й базову HTML-структуру незалежно від пристрою, але відображається по-різному. Окрема мобільна версія може бути реалізована на інших адресах або через іншу конфігурацію подавання вмісту. Це різні технічні рішення, а не обов’язкові доповнення одне до одного.

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

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

Для початкової перевірки достатньо вбудованих інструментів розробника. Вони дозволяють змінювати розміри області перегляду й помічати, де компонування перестає працювати.

1. Відкрийте потрібну сторінку та інструменти розробника. У Windows і Linux можна натиснути Ctrl + Shift + I, у macOS — Command + Option + I. Інший шлях — меню Chrome, «Інші інструменти», «Інструменти розробника».
2. Увімкніть панель пристроїв. Натисніть значок телефона й планшета — Toggle device toolbar. У списку Dimensions виберіть Responsive, щоб задавати довільну ширину.
3. Перевірте вузьке, середнє та широке компонування. Наприклад, почніть із 375, 768 і 1280 CSS-пікселів. Це приклади тестових ширин, а не обов’язкові стандарти чи повний набір перевірок.
4. Плавно змінюйте ширину між цими значеннями. Стежте за перенесенням заголовків, карток і меню. Особливо уважно перегляньте момент, коли бічна колонка зникає або навігація згортається.
5. Перезавантажте сторінку на вузькій ширині. Порівняйте результат із простим звуженням уже відкритої сторінки. Перевірте також низьку широку область перегляду, характерну для горизонтального положення телефона.

CSS-пікселі описують розміри інтерфейсу й не обов’язково відповідають фізичним пікселям дисплея. Тому не потрібно переносити в поле ширини велику роздільну здатність із характеристик смартфона.

Режим пристроїв — це наближення, а не повноцінний запуск на вибраному телефоні. Навіть вибір певної моделі зі списку не відтворює всі особливості її браузера, операційної системи та обладнання.

Що перевіряти на справжньому телефоні

Відкрийте сайт у звичайному мобільному режимі браузера, без примусового запиту комп’ютерної версії. Перевірте його у вертикальному й горизонтальному положенні, а за можливості — на пристроях із різними операційними системами. Далі пройдіть шлях від першого відкриття до потрібного результату, а не просто погортайте сторінку.

Текст, зображення та основний вміст

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

Для широкої таблиці чи карти може бути доречне окреме горизонтальне прокручування всередині їхнього блока. Це не те саме, що горизонтальне прокручування всієї сторінки через невдало задану ширину. Важливо, щоб читач розумів, як дістатися до решти даних, і не втрачав заголовків та зв’язків між ними.

Меню, кнопки та спливні елементи

Відкрийте всі рівні меню, застосуйте фільтр, закрийте панель і поверніться до вмісту. Кнопки мають натискатися без випадкового вибору сусідньої дії. Якщо потрібний пункт з’являється лише при наведенні миші, перевірте, який спосіб доступу передбачено на сенсорному екрані.

Окремо огляньте повідомлення про файли cookie, чат і рекламні вікна. Кнопка закриття не повинна опинятися за межами екрана, а закріплені панелі — перекривати важливі елементи. Повторіть перевірку після прокручування: поведінка блока вгорі та внизу сторінки може відрізнятися.

Форми та екранна клавіатура

Заповніть форму, відкрийте список варіантів і перевірте повідомлення про помилки. Після появи клавіатури має залишатися можливість дістатися до активного поля й кнопки надсилання. Зверніть увагу, чи зручно вводити номер телефону, електронну адресу та інші потрібні дані.

Для магазину перевірте вибір варіанта товару, зміну кількості й перехід до оформлення. Тестові замовлення та платежі виконуйте лише в погодженому тестовому режимі, щоб не створювати випадкових покупок. Мета — побачити не тільки форму, а й результат дії та зрозуміле підтвердження.

Чому потрібно перевірити збільшення тексту

Адаптивність пов’язана з доступністю, але не дорівнює їй. Навіть сторінка без горизонтального прокручування може бути незручною для людини, яка збільшує текст або користується клавіатурою замість миші.

На комп’ютері збільште масштаб браузера до 200% і перевірте, чи не обрізаються підписи, кнопки та поля. Це корисна базова перевірка: критерій рекомендацій із доступності вебвмісту WCAG щодо зміни розміру тексту передбачає можливість його збільшення до 200% без втрати вмісту чи функцій, із визначеними винятками для субтитрів і зображень тексту. Один такий тест не підтверджує відповідність сайту всім вимогам доступності.

Для звичайного вертикального читання додатковий орієнтир — перебудова вмісту за ширини 320 CSS-пікселів без потреби прокручувати сторінку у двох напрямках. Винятки стосуються елементів, для яких двовимірне розташування суттєве, наприклад карт і таблиць даних. Не слід «виправляти» проблеми забороною масштабування: потрібно усувати причину обрізання або перекриття.

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

Чи достатньо автоматичного тесту адаптивності

Ні: автоматичний звіт доповнює ручну перевірку, але не замінює її. PageSpeed Insights оцінює характеристики сторінки для мобільних і настільних пристроїв та показує результати автоматичних перевірок на основі Lighthouse. Це допомагає знаходити проблеми швидкодії й частину технічних недоліків, але не є сертифікатом зручності всіх екранів і сценаріїв.

Під час перевірки вибирайте потрібний тип пристрою та аналізуйте конкретні зауваження, а не лише загальний бал. Добрий результат завантаження головної сторінки не відповідає на питання, чи можна закрити фільтр у каталозі або виправити помилку в адресі доставки.

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

Що передати розробнику, якщо знайдено проблему

Замість повідомлення «на телефоні все з’їхало» зафіксуйте конкретні умови: сторінку, модель пристрою, браузер, положення екрана та дію, після якої виникла помилка. Додайте знімок екрана або короткий запис. Для перевірки на комп’ютері вкажіть ширину області перегляду й масштаб браузера.

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

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

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

Оцінюйте адаптивність за можливістю виконати потрібну дію

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

Якщо сайт потребує комплексного оновлення, вимоги до адаптивності варто включити в спільне завдання на дизайн, програмування й тестування. Веб розробка від REDSTONE охоплює корпоративні сайти, інтернет-магазини, CRM-системи для роботи з клієнтами, хмарні програмні сервіси за моделлю SaaS, веб- і мобільні застосунки. Компанія також пропонує брендування, UI/UX-дизайн — проєктування інтерфейсів і користувацького досвіду — та технічну підтримку.

Команда супроводжує проєкт від уточнення вимог і підготовки макетів до розробки, тестування та запуску. Обсяг перевірки адаптивності й умови подальшої підтримки варто погодити перед початком робіт.