Разработка адаптивного дизайна сайта (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 недель.