Адаптивный дизайн

Механика строится на трёх вещах: гибкой сетке в относительных единицах, изображениях, которые не вылезают за контейнер и отдаются в нужном разрешении, и медиазапросах, переключающих раскладку на выбранных ширинах. Современная практика — mobile first: сначала проектируется самый узкий экран, где приходится расставить приоритеты жёстко, и только потом добавляются возможности широких. Обратный порядок обычно заканчивается мобильной версией, из которой «вырезали лишнее», и вместе с лишним уезжает половина смысла.

Коммерческий вес темы прямой. В России мобильная доля трафика для большинства ниш превышает половину, а в товарных категориях и в услугах, которые ищут «здесь и сейчас», она выше. Google индексирует сайты по мобильной версии, Яндекс учитывает удобство на мобильных при ранжировании. Практически это значит, что показатель конверсии и позиций определяет именно узкий экран: если на нём форма заявки требует три прокрутки и промахивающихся нажатий, десктопная красота ничего не спасёт.

Частые ошибки повторяются от проекта к проекту: мелкие цели нажатия и элементы, стоящие вплотную друг к другу; таблицы и прайсы, которые на телефоне уезжают за край; всплывающие окна, закрывающие контент так, что крестик не попадает в экран; фиксированные шапки, съедающие треть высоты; и тяжёлые фоновые изображения, отдаваемые мобильным в десктопном разрешении. Отдельный пункт — тестирование только в режиме эмуляции браузера: реальный телефон показывает и скорость, и попадание пальцем, и поведение клавиатуры, которых в эмуляторе не видно.

Смежные термины

• Дизайн-системаДизайн-система — связка токенов, компонентов и правил их применения, существующая одновременно в макетах и в коде: она задаёт цвета, типографику, отступы и состояния элементов так, чтобы новый экран собирался из готового, а не изобретался заново.
• Core Web VitalsCore Web Vitals — три метрики скорости и стабильности страницы от Google: LCP (отрисовка главного элемента) должен укладываться в 2,5 секунды, INP (отклик на действие) — в 200 миллисекунд, CLS (сдвиг вёрстки) — в 0,1.
• PWAPWA — сайт, который ведёт себя как приложение: устанавливается на домашний экран прямо из браузера, работает офлайн за счёт service worker и умеет присылать push-уведомления, но не требует публикации в App Store и Google Play.
• ВайрфреймВайрфрейм — черновая схема экрана без цвета, шрифтов и картинок: на ней фиксируют состав блоков, их приоритет и переходы между экранами, чтобы договориться о логике интерфейса до того, как начнётся дорогая отрисовка.
• SEOSEO — работа над сайтом и его окружением ради органических позиций в Яндексе и Google: техническая база, семантика, контент, коммерческие и поведенческие факторы, ссылочный профиль; первые устойчивые результаты появляются через 3–6 месяцев.

Услуги по теме

• UX/UI дизайн сайтов и приложенийПроектируем интерфейсы, которые доходят до продакшена: от исследования и структуры до UI-кита и передачи в разработку. Всё живёт в Figma как компоненты с реальными состояниями и брейкпоинтами, а не как папка со статичными картинками. Один и тот же процесс работает для лендинга, корпоративного сайта, интернет-магазина, веб-приложения и мобильного продукта.
• Разработка сайтов под ключДелаем сайты, которые не разваливаются через полгода: от одностраничника на CMS до магазина и веб-приложения на React и Next.js. Один подрядчик на дизайн, код, интеграции и запуск.
• Разработка лендинга под ключОдна страница, одна цель — заявка. Собираем лендинг под конкретный оффер и трафик, с которым вы будете на него заходить: контекст, таргет, соцсети или email.

Почитать подробнее

• Медленный сайт теряет деньги: Core Web Vitals и конверсияСкорость сайта — это не техническая метрика, а строка в отчёте о выручке. Разбираем Core Web Vitals простым языком, показываем, как найти настоящую причину медленной загрузки, и даём список исправлений, отсортированный по отдаче на час работы.
• Дизайн-система: когда она окупается, а когда это дорогая игрушкаБольшинству команд, которые просят дизайн-систему, нужны библиотека компонентов и дисциплина именования. Разбираем, где проходит граница, как посчитать окупаемость до старта и что входит в минимальную рабочую версию.