Mobile-first подход: проектирование для мобильных

Что значит mobile-first

Mobile-first — подход к проектированию, при котором сайт создаётся сначала для мобильных устройств, а затем расширяется для планшетов и десктопов. Это противоположность традиционному подходу, когда десктопную версию «сжимали» под телефон.

Почему mobile-first важен: 65% интернет-трафика в России — мобильный. Google индексирует мобильную версию первой. Если ваш сайт неудобен на телефоне, вы теряете большинство посетителей ещё до того, как они увидели ваше предложение.

Mobile-first в проектировании

Расстановка приоритетов

На мобильном экране мало места — это заставляет определить, что действительно важно. Какой контент видит пользователь первым? Какое действие должен совершить? Mobile-first заставляет ответить на эти вопросы до начала дизайна.

Контент прежде декора

На 375px шириной экрана нет места для декоративных элементов. Остаётся чистый контент: заголовок, текст, изображение, кнопка. Когда десктопная версия строится на этой основе — она получается чище и сфокусированнее.

Дизайн в Figma

Начинайте прототипирование в Figma с фрейма 375px (iPhone). Разместите контент в одну колонку. Затем создайте фреймы 768px и 1440px и расширяйте layout: добавляйте колонки, боковые панели, дополнительный контент.

Mobile-first в разработке

CSS-подход

Базовые стили пишутся для мобильных — без медиа-запросов. Расширения добавляются через min-width:

• Базовые стили: одна колонка, полная ширина, крупный шрифт
• @media (min-width: 768px): две колонки, sidebar
• @media (min-width: 1024px): три колонки, расширенная навигация

Этот подход проще, чем desktop-first (max-width), потому что расширять проще, чем сжимать.

Производительность

Mobile-first CSS загружает минимум стилей для мобильных (где интернет часто медленнее). Дополнительные стили загружаются только на больших экранах, где обычно быстрее соединение.

UX-паттерны для мобильных

Навигация

Бургер-меню — стандарт. Но не прячьте критически важные ссылки. Некоторые сайты используют bottom navigation (панель внизу) — удобнее для большого пальца. Подробнее о навигации.

Формы

Каждое поле — на отдельной строке. Используйте правильные типы input (tel, email, number) для вызова нужной клавиатуры. Минимизируйте количество полей. О дизайне форм подробнее.

Касания

Минимальный размер touch-target — 44×44px (рекомендация Apple). Расстояние между кнопками — минимум 8px. Популярное действие — ближе к нижней части экрана (зона большого пальца).

Контент

Короткие абзацы (2–3 предложения). Подзаголовки для сканирования. Аккордеоны для длинных блоков. Изображения на полную ширину. Видео с кнопкой воспроизведения (не автоплей).

Типичные ошибки mobile-first

• Бургер-меню на десктопе — mobile-first не значит «мобильный стиль везде». На десктопе разворачивайте навигацию
• Мелкий текст — минимум 16px. Меньше — iOS масштабирует при фокусе на input
• Попапы на мобильных — закрывают весь экран, сложно закрыть. Используйте bottom sheet
• Горизонтальная прокрутка — таблицы и карусели часто ломаются
• Тяжёлые изображения — загрузка hero 5 МБ на 3G. Используйте srcset для адаптивных изображений

Тестирование

Тестируйте на реальных устройствах, а не только в эмуляторе. Проверяйте: скорость загрузки на 3G/4G, удобство касаний (пальцем, не курсором), отображение в landscape-режиме, поведение при появлении клавиатуры.

Mobile-first — основа современной веб-разработки. Мы проектируем и разрабатываем сайты именно в этом подходе. Обратитесь к нам за консультацией.