Розроблення адаптивного дизайну сайту (Desktop, Tablet, Mobile)
Адаптивний дизайн — це не «уменшити desktop-версію». Це проектування окремих компоновок для різних контекстів використання: розмір екрану, тип введення (мишка vs тачскрин), швидкість з'єднання, орієнтація пристрою. Один і той самий контент переупорядковується, скривається або змінює форму залежно від умов.
Брейкпоінти та сітка
Стандартні брейкпоінти, які ми використовуємо (збігаються з Tailwind CSS):
| Назва | Ширина | Типові пристрої |
|---|---|---|
| xs | < 640px | Смартфони (portrait) |
| sm | 640–767px | Смартфони (landscape), маленькі планшети |
| md | 768–1023px | Планшети |
| lg | 1024–1279px | Ноутбуки, iPad Pro |
| xl | 1280–1535px | Desktop |
| 2xl | ≥ 1536px | Широкі монітори |
Для більшості проектів ми проектуємо три ключові стани: Mobile (375px), Tablet (768px), Desktop (1440px). Проміжні брейкпоінти реалізує розробник через CSS.
Сітка для Desktop — частіше за все 12 колонок з gutter 24–32px та max-width контента 1200–1440px. Для Tablet — 8 колонок, для Mobile — 4 колонки з gutter 16px.
Mobile-first vs Desktop-first
Mobile-first — дизайн починається з мобільної версії, потім прогресивно розширюється. Принципово змінює приоритизацію контента: якщо щось не помішується на мобільному — або видаляється, або переосмисляється. Результат: чистіші інтерфейси без «десктопного жиру».
Desktop-first — традиційний підхід, починаємо з desktop, потім адаптуємо. Простіше для клієнта (більший екран — простіше обговорювати), але ризикує «упиханням» контента в мобільний.
На практиці: для контентних сайтів, корпоративних сторінок — mobile-first. Для складних веб-додатків з багатим UI (дашборди, CRM) — desktop-first, з окремим мобільним станом для ключових сценаріїв.
Глибокий розбір: типичні проблеми адаптації
Навігація — найпроблемніший елемент. Горизонтальне меню з 7 пунктів не помішується в мобільний. Рішення: hamburger drawer, bottom navigation bar (для app-like сайтів), priority+ navigation (видимі + «Ще»). Кожне рішення має свій контекст застосування.
Таблиці — таблиці з 5+ колонками не читаються на мобільному. Стратегії:
- Горизонтальний скролл таблиці (простий варіант, не завжди зручно)
- Карточна трансформація: кожен рядок таблиці перетворюється в карточку на мобільному
- Скриття менш важливих колонок (через
hidden md:table-cellв Tailwind) - Prioritized columns: перші 2–3 колонки завжди видимі, решта в expandable row
Зображення — одне зображення для всіх пристроїв — неоптимально. Тег <picture> з srcset дозволяє подавати різні кропи: hero-баннер на desktop — горизонтальний 1440×600, на mobile — вертикальний 375×500 з іншим фокусом. У дизайні ми явно прорабляємо обидва кропи.
Типографіка — розміри не масштабуються пропорційно. H1 в 64px на desktop → 32px на mobile — не просто зменшення, а інший ритм сторінки. Використовуємо fluid typography через CSS clamp(): font-size: clamp(1.5rem, 4vw, 4rem).
Форми — на тачскрин-пристроях вводити текст неудобно, тому форми повинні бути коротше або розбиті на кроки. Поля повинні бути висотою мінімум 44px (Apple HIG) або 48px (Google Material) для комфортного тапа. Правильний type для інпутів (type="tel", type="email") викликає потрібну клавіатуру.
Що ми передаємо по завершенню
Макет у Figma з трьома явними станами (Desktop/Tablet/Mobile) для кожної сторінки. Для складних компонентів — окремі фрейми з аннотаціями поведінки при зміні ширини. Розробник отримує не тільки «як виглядає», але й «як себе ведеться в проміжку».
Строк реалізації
Адаптивний дизайн корпоративного сайту (5–7 сторінок) в трьох брейкпоінтах — 10–16 робочих днів. Лендинг в трьох брейкпоінтах — 4–6 робочих днів. Складний продуктовий інтерфейс з адаптацією — 4–8 тижнів.