Адаптивний дизайн для початківців: як макет підлаштовується під екран

Крок 1

Зрозумійте, що саме «адаптується»

В українській «адаптивний дизайн» зазвичай означає те, що англійською називають responsive design: NN/g описує його як підхід, коли той самий зміст і функції доступні на екранах різного розміру, але перебудовані під доступне місце. Це не зменшена копія десктопу і не окремий «мобільний сайт» з урізаним змістом. Що змінюється між широким і вузьким екраном:

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

💡 Розробнику для цього потрібен тег viewport «width=device-width»: за web.dev, він каже браузеру підлаштувати сторінку під ширину екрана. Без нього телефон показує зменшений десктоп. Дизайнеру писати код не треба, але знати, чому «на телефоні все крихітне», корисно.

Крок 2

Зміст за пріоритетом, а не «що влізе»

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

• •головна дія сторінки має бути досяжною без довгого гортання й на телефоні;
• •не прибирайте зміст на мобільному, а перебудовуйте його: акордеони, вкладки, горизонтальний скрол для карток;
• •таблиці на вузькому екрані — окрема задача: перетворіть рядки на картки або залиште лише ключові колонки з можливістю відкрити деталі;
• •NN/g наголошує: «спочатку мобільне» не означає «лише мобільне». Якщо на телефоні меню сховане за іконкою, на десктопі його варто показати.

Крок 3

Точки перелому за змістом

Точка перелому (breakpoint) — ширина, на якій макет перебудовується. Web.dev радить не прив'язувати їх до класів пристроїв, брендів чи операційних систем, а почати з вузького екрана й розширювати його, доки макет не почне «ламатися» — саме там і потрібна точка. Між великими перебудовами бувають дрібні правки: трохи більші відступи чи шрифт.

• •намалюйте спочатку вузьку версію, потім розтягуйте фрейм і зупиняйтеся там, де з'являються порожнечі або надто довгі рядки;
• •стежте за довжиною рядка: web.dev нагадує, що за класичною теорією читабельності оптимальна колонка вміщує 70–80 знаків у рядку. Якщо текст розтягується ширше, обмежте ширину контенту;
• •для навчального проєкту зазвичай вистачає трьох макетів: вузький телефон, середня ширина (планшет) і широкий екран;
• •окремі компоненти, як-от картка, можуть перебудовуватися залежно від ширини свого контейнера, а не всього екрана: у CSS для цього є container queries (MDN). Позначте розробнику, як картка виглядає у вузькому й широкому місці.

Крок 4

Налаштуйте Figma, щоб макет тягнувся

Адаптив у Figma — це не три окремі картинки, а фрейми, які правильно поводяться при зміні ширини. Перевіряйте це, просто тягнучи край фрейму. Основні інструменти:

• •сітка з колонок (layout guide; до травня 2025 року функція називалася layout grid): колонки й ряди, за документацією Figma, добре підходять для адаптивних інтерфейсів; для вузького екрана колонок менше, для широкого — більше;
• •обмеження (constraints): наприклад, «Left and right» тримає елемент прив'язаним до обох країв, і він розтягується разом із фреймом;
• •автолейаут: «Hug contents» — блок за розміром вмісту, «Fill container» — заповнює доступне місце, «Fixed» — фіксований розмір;
• •мінімальна й максимальна ширина в автолейауті: картка не стиснеться до нечитабельного стану й не розтягнеться на весь монітор.

💡 Будуйте сторінку з компонентів з автолейаутом: тоді для широкої версії часто достатньо змінити напрямок ряду з вертикального на горизонтальний, а не малювати все заново.

Крок 5

Перевірте на незручних умовах

Адаптив ламається не на «середньому» екрані, а на крайніх випадках. Стандарт доступності WCAG 2.2 дає чіткі орієнтири: зміст має перебудовуватися без горизонтальної прокрутки на ширині, що відповідає 320 CSS-пікселям, а текст — збільшуватися до 200 % без втрати змісту чи функцій. Перевірте:

• •найвужчий екран: довгі заголовки, кнопки з довгим текстом, імена й суми;
• •збільшений текст: чи не налазять блоки один на одного;
• •кнопки й посилання: мінімальна ціль для натискання за WCAG — 24 на 24 CSS-пікселі, для головних кнопок краще більше;
• •зображення: розробник зазвичай задає їм «max-width: 100%», а web.dev радить також вказувати ширину й висоту, щоб сторінка не «стрибала» під час завантаження. Дайте пропорції в макеті;
• •якщо сторінка вже зверстана — в інструментах розробника в Chrome (DevTools) можна швидко подивитися її на різній ширині.

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