Больше 60% трафика в Украине — мобильный. В некоторых нишах (услуги, доставка, локальный бизнес) — все 80%. А большинство сайтов до сих пор проектируются так: сначала «красивый» десктоп на 1920px, потом «как-нибудь ужмём» под телефон.
Результат предсказуем: на телефоне текст мелкий, кнопки неудобные, формы не работают. Половина потенциальных клиентов уходит, даже не узнав, что вы предлагаете.
Что такое mobile-first
Mobile-first — это подход к разработке, при котором сначала проектируется мобильная версия, а потом — расширяется для планшетов и десктопа.
Это не просто «адаптивность». Адаптивный сайт только подстраивает готовый макет под разные размеры экрана, а подход «mobile-first» означает, что структура, контент и ключевые действия с самого начала разрабатываются в первую очередь для пользователя на мобильном устройстве.
Разница:
| Параметр | Desktop-first | Mobile-first |
|---|---|---|
| Начало дизайна | 1920 px | 375 px |
| Контент | «Впихнём всё» | «Только самое важное» |
| Приоритет | Картинки и анимации | Скорость и удобство |
| CTA | Где-то сбоку | Первый элемент на экране |
| Скорость загрузки | 4–6 секунд | 1–3 секунды |
Почему для Google это важно
С 2021 года Google использует mobile-first indexing: поисковый робот оценивает вашу мобильную версию, а не десктопную. Если мобильная версия неполная, медленная или неудобная — позиции падают.
Факторы, на которые смотрит Google:
- Core Web Vitals — скорость, стабильность, отзывчивость. (Подробный гайд с примерами и планом правок).
- Mobile usability — нет горизонтальной прокрутки, кнопки не слишком мелкие, текст читаемый без масштабирования.
- Контент — мобильная версия содержит тот же контент, что и десктопная.
Как mobile-first влияет на конверсию
Простой пример: сайт салона красоты. Трафик — 75% мобильный. Основное действие — запись на приём.
До mobile-first: форма записи — внизу длинной страницы. На телефоне нужно скроллить 8 экранов. Конверсия — 0,8%.
После mobile-first: кнопка «Записаться» — в первом экране, липкая (sticky) на мобильном. Форма — 2 поля. Конверсия — 3,2%.
Рост в 4 раза. Контент тот же. Изменился только приоритет элементов.
Принципы mobile-first дизайна
1. Контент-приоритет
На маленьком экране нет места для лишнего. Задайте себе вопрос: «Если бы у меня был только один экран — что на нём самое важное?»
Обычно это:
- Заголовок с оффером.
- Одна кнопка действия.
- Одно доказательство (отзыв, число, кейс).
2. Удобство касания (touch-friendly)
- Кнопки — минимум 44×44 px (рекомендация Apple и Google).
- Расстояние между интерактивными элементами — минимум 8 px.
- Никаких ховер-эффектов как единственного способа взаимодействия.
3. Скорость
Мобильный интернет медленнее. Поэтому:
- Картинки в формате WebP/AVIF с lazy loading.
- Минимум JavaScript.
- Шрифты — максимум 2.
- Критический CSS — inline.
4. Навигация
- Бургер-меню — нормально, если в нём 5–7 пунктов.
- Самые важные действия — вне меню (телефон, запись, мессенджер).
- Поиск — легко доступен.
5. Формы
- 2–3 поля максимум.
- Правильные типы полей (
type="tel",type="email") для правильной клавиатуры. - Автозаполнение включено.
- Кнопка отправки — крупная и контрастная.
Как проверить свой сайт
Быстрая проверка (2 минуты)
- Откройте сайт на телефоне.
- Попробуйте заполнить форму заявки.
- Попробуйте найти цены.
- Попробуйте позвонить (кликнув на номер).
Если хоть один шаг вызвал затруднения — нужна доработка.
Инструменты
- Google Mobile-Friendly Test — базовая проверка.
- PageSpeed Insights — скорость и Core Web Vitals.
- Chrome DevTools → Device Mode — эмуляция устройств.
Чек-лист mobile-first сайта
| # | Требование | ✅ / ❌ |
|---|---|---|
| 1 | Кнопки ≥ 44×44 px | |
| 2 | Текст читается без масштабирования | |
| 3 | Нет горизонтальной прокрутки | |
| 4 | CTA виден на первом экране | |
| 5 | Форма — 2–3 поля | |
| 6 | Телефон кликабельный | |
| 7 | Картинки оптимизированы (WebP, lazy load) | |
| 8 | Загрузка < 3 секунд на 4G | |
| 9 | Навигация удобна | |
| 10 | Контент мобильной = десктопной версии |
Частые вопросы
Нужно ли делать отдельную мобильную версию?
Нет. Современный подход — один адаптивный сайт (responsive), спроектированный mobile-first. Отдельный m.site — устаревшая архитектура.
Mobile-first дороже в разработке?
Нет. Если проектировать с нуля — стоимость та же. Переделка существующего desktop-first сайта — зависит от масштаба, но обычно дешевле, чем новый сайт.
А как насчёт сложных таблиц и графиков?
Используйте горизонтальный скролл в контейнере таблицы или перестраивайте таблицу в карточки на мобильном.
Какой процент мобильного трафика считается «много»?
Если больше 50% — mobile-first обязателен. Проверьте в GA4 → Технологии → Обзор.
Связанные материалы
- Core Web Vitals: как страдает скорость
- Сайт не приносит заявок — диагностика
- 10 ошибок при создании сайта
Нужен mobile-first сайт?
Мы проектируем все сайты mobile-first: от wireframes до запуска. Быстрая загрузка, удобные формы, конверсия на каждом экране.
Связанные материалы
