Mobile-first в 2026: что изменилось
Mobile-first в 2026 году — не «сначала сузить десктоп», а проектирование сценариев с телефона: скорость, палец вместо мыши, нестабильная сеть и короткое внимание. Google и Яндекс давно ориентируются на мобильную версию; пользователи — тем более. Разбираем, что изменилось и где чаще всего ломают конверсию.
Что изменилось к 2026 году
Доля мобильного трафика в большинстве B2C-ниш перевалила за 65–75%. INP (отклик на действия) заменил FID в Core Web Vitals — тормозящие кнопки и формы бьют по ранжированию и конверсии.
Экраны стали выше и уже: «половинный скролл» на десктопе на телефоне превращается в три–четыре жеста. Hero-блок должен укладываться в первый экран с явным действием.
ФактMobile-first индексация — норма годами. Если мобильная версия слабее десктопной, страдают и SEO, и продажи.
Новые паттерны адаптивной вёрстки
- Bottom sheet и sticky CTA внизу экрана вместо мелкой кнопки в шапке.
- Крупные зоны нажатия — минимум 44×44 px.
- Прогрессивное раскрытие: сначала суть, детали по tap.
- Контентные карточки вместо широких таблиц на узком экране.
- Ленивая загрузка медиа ниже первого экрана.
Скорость и Core Web Vitals на мобильных
LCP на 4G должен быть ниже 2,5 секунды на типовой странице. CLS ломают баннеры cookie, поздно подгружаемые шрифты и embed без резервирования места.
Навигация и поиск на маленьком экране
Гамбургер-меню остаётся, но для коммерческих сайтов добавляют быстрые ссылки: телефон, мессенджер, «заказать звонок». Поиск по каталогу — с автодополнением и фильтрами в один tap.
Не прячьте цену и контакты за три уровня меню — на мобильном это прямой путь к отказу.
| Элемент | Ошибка | Как правильно |
|---|---|---|
| Меню | 12 пунктов в списке | 5–7 главных + «Ещё» |
| Форма | 10 полей на экране | 3–4 поля, остальное — шаг 2 |
| Таблица | Горизонтальный скролл | Карточки или accordion |
| Видео | Автовоспроизведение со звуком | Poster + tap to play |
| Pop-up | На весь экран при входе | Отложенный или bottom sheet |
Формы и конверсия: где теряют заявки
Мелкие поля, неправильная клавиатура (tel для телефона, email для почты) и отсутствие маски — частые причины брошенных форм. Кнопка отправки должна быть видна без скролла после последнего поля.
Типичные ошибки при проектировании
- Десктопный макет просто «сжали» — текст мелкий, CTA не видно.
- Тяжёлые изображения hero без адаптивных размеров.
- Hover-эффекты как единственный способ показать подсказку.
- Сторонние виджеты блокируют первый экран.
- Нет отдельного сценария для медленной сети.
Процесс в команде: от макета до релиза
- Wireframe сначала для ширины 360 px, потом расширение на планшет и десктоп.
- Design review на реальном iPhone и Android среднего сегмента.
- Performance budget: лимит веса страницы и числа запросов.
- QA-чеклист: формы, меню, оплата, PDF, карты.
- Мониторинг полевых данных (CrUX, Метрика) после релиза.
Итог: mobile-first — бизнес-решение
В 2026 году mobile-first — это измеримая скорость, удобные формы и приоритет сценария «на ходу». Десктоп дополняет, но не определяет структуру.
В Агентуре мы начинаем макет и приёмку с мобильной версии — так меньше сюрпризов на этапе запуска рекламы.
Частые вопросы
Нужен ли отдельный m. поддомен?
Нет, responsive одной версии — стандарт. Отдельный mobile-сайт усложняет SEO и поддержку. Исключение — legacy-проекты с планом миграции.
Как проверить INP без дорогих инструментов?
PageSpeed Insights и Chrome DevTools Performance. Для полевых данных — отчёт CrUX в Search Console или аналоги в Метрике.
Мобильное приложение вместо адаптивного сайта?
Приложение — если есть лояльные повторные покупки и push-канал. Для первого касания и SEO нужен быстрый адаптивный сайт.
Что важнее: красивый hero или скорость?
Скорость первого экрана. Красивый, но грузящийся 5 секунд hero проигрывает простому блоку с оффером и CTA.
Как часто пересматривать mobile UX?
Раз в полгода или после заметного падения мобильной конверсии. Плюс — после крупных обновлений iOS/Android и браузеров.