Mobile-first
Mobile-first — это не только про размер экрана, но и про подход к приоритизации. Маленький экран — естественный «фильтр» от лишнего.
Почему работает
- На 4–6 дюймах нельзя «впихнуть» всё, что хочется — команда вынуждена выбирать главное.
- Мобильные пользователи часто на ходу, в стрессе и с плохим интернетом — нужны простые сценарии.
- Если что-то нормально работает на мобильном, на десктопе будет тем более.
Что меняется в процессе
- Эскизы рисуют сначала под узкие экраны.
- Дизайн-система проектируется так, чтобы компоненты «расширялись» к большим экранам.
- В разработке CSS пишется в стиле мобильный → широкий, через медиа-запросы min-width.
Когда применять и когда нет
Применять
- Веб-продукты с большой долей мобильного трафика
- Любые публичные сайты и лендинги
- Любые SaaS-инструменты, которые открывают с разных устройств
Не применять
- Внутренние корпоративные инструменты, которые точно используют только с десктопа
- Очень специализированные продукты под большие экраны (видеомонтаж, CAD-системы)
Примеры применения
Команда новостного сайта переходит с десктоп-first на mobile-first. Сначала это вызывает сопротивление: «как мы покажем все наши блоки рекламы и виджеты на телефоне?». В итоге команда вынуждена пересмотреть, какие виджеты действительно важны, и видит, что 60% из них пользователи никогда не используют. После запуска мобильной версии и приведения десктопа в порядок выручка с мобильного трафика выросла, время на странице — тоже.
Часто задаваемые вопросы
Не совсем. Адаптивный дизайн — общее свойство (интерфейс подстраивается под экран). Mobile-first — методологический подход к проектированию (начинаем с мобильного). Они часто идут вместе, но это разные понятия.
Mobile-first всё равно полезен: он помогает упростить дизайн и выделить главное. Но десктоп-версия в этом случае требует больше внимания, чем мобильная. Подход остаётся, акценты смещаются.