Як правильно верстати адаптивні сторінки

Сьогодні без адаптивної верстки не обійтися. Люди переглядають сайти з будь-яких пристроїв - телефонів, планшетів, ноутбуків. Кожен з гаджетів має свої особливості екрана. Щоб сайт не “ламався” та залишався зручним, незалежно від роздільної здатності, потрібно знати основи адаптації. І не просто знати, а застосовувати.

З чого все починається: гнучка сітка

Коли ми кажемо “адаптивна верстка”, то перше, що приходить у голову - це fluid grid, тобто гнучка сітка. Вона дозволяє елементам розтягуватись або стискатись в залежності від ширини екрана. Тут не йдеться про пікселі - все базується на відсотках. Це і є гнучкість.

Кілька практичних моментів:

• блоку не задають жорсткої ширини - краще width:100% або max-width;
• колонки будуються відносно батьківського контейнера;
• важливо не забути про box-sizing: border-box - це врятує від непередбачених розривів.
   

Media Queries - як перемикнути режим

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

Наприклад:

@media (max-width: 768px) {

  .menu { display: none; }

  .nav-menu { display: block; }

}

Що важливо:

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

Що робити з зображеннями

Зображення - один із найскладніших елементів у верстці. Вони часто ламають макет і довго вантажаться. Що можна зробити:

• Застосувати max-width: 100% - і картинка не вилазитиме за межі блоку;
• Використовувати формати WebP або SVG - вони менші та зручніші;
• Працювати з srcset або тегом picture, щоб подавати різні версії зображень на різні пристрої.

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

Що робити коли навігаційне меню не поміщається

На великих екранах меню може виглядати розгорнуто. Але на мобільному? Тут на допомогу приходить “бургер”. Таке приховане меню - найкращий варіант, коли екран малий.

Важливо:

• Кнопки меню мають бути достатньо великими - користувач не повинен цілитися пальцем;
• Не ховайте надто багато пунктів - користувач має знайти потрібне за 1-2 кліки;
• Анімації повинні бути легкими й не перевантажувати сторінку.
   

Перевірка адаптивності: не вірьте тільки емулятору

Навіть якщо все виглядає ідеально в DevTools, не полінуйтеся протестувати сайт на реальних пристроях. Бо:

• різні браузери можуть інтерпретувати CSS по-різному;
• Android і iOS - це зовсім різні світи;
• емульований екран не дорівнює фізичний екран (тач, відступи, системні панелі тощо).

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

Готові рішення: коли можна не вигадувати велосипед

Такі фреймворки як Bootstrap чи Foundation - чудовий варіант, коли немає часу на ручну сітку. Там вже все зроблено: адаптивна решітка, компоненти, класи - бери й використовуй.

Але є нюанс:

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

Адаптивна верстка -  це не про “як швидко зверстати”, а про зручність для людини, яка зайде на сайт. І тоді ваш проєкт не просто працюватиме, а буде зручним і для людей, і для пошуковиків.