Mobile-first дизайн: зачем он в веб-разработке

Большинство сайтов до сих пор проектируют на 27-дюймовом мониторе, а потом «подгоняют» под телефон. Результат знаком: главная страница впечатляет на совещании, а в мобильной версии основная кнопка прячется за тремя экранами прокрутки, меню скрывает полсайта, а форма обратной связи просит ввести номер телефона в поле, которое открывает буквенную клавиатуру.

Mobile-first переворачивает этот порядок. Вы проектируете и верстаете сначала для самого маленького экрана, решаете, что там действительно важно, а потом добавляете макет, контент и функции по мере того, как экран становится больше. Звучит как техническая деталь. На практике это меняет то, как команда думает о контенте, приоритетах и скорости, и напрямую влияет на трафик, видимость в поиске и конверсию.

В статье объясняем, что означает mobile-first дизайн, чем он отличается от адаптивного дизайна сайта, почему он важен для бизнеса, каких принципов придерживаться и как внедрить его на реальном проекте, не ухудшив десктопную версию. Мы применяем этот подход в разработке UI/UX дизайна для корпоративных сайтов, интернет-магазинов, порталов и SaaS-продуктов.

Что означает mobile-first дизайн

Если в одном предложении: mobile-first дизайн — это стратегия, при которой сначала проектируют мобильную версию сайта или продукта, а большие экраны рассматривают как расширение этой основы, а не наоборот.

Идею популяризировал Люк Вроблевски, продуктовый дизайнер, который начал продвигать ее примерно с 2009 года, а позже описал в книге «Mobile First». Его аргумент прост. Дизайн для маленького экрана заставляет решить, что действительно важно, потому что места на все нет. Эти решения делают продукт лучше на любом экране, а не только на телефоне.

Зачем этой идее понадобилось отдельное название? Первые пятнадцать лет веба десктоп был по умолчанию. Команды проектировали под монитор, а мобильная версия появлялась в последнюю очередь, часто как отдельный сайт «m.» с урезанными функциями. Когда смартфоны стали основным устройством, эта модель сломалась: поддерживать два сайта дорого, мобильный всегда отставал, и пользователи это замечали. Mobile-first дал командам способ строить один продукт, который работает везде, начиная с самого сложного случая.

В основе mobile-first подхода лежит принцип progressive enhancement, прогрессивного улучшения. Вы начинаете с надежного, быстрого, удобного ядра, которое работает на самом ограниченном устройстве и соединении. Потом добавляете слои: более широкие макеты, дополнительную навигацию, богатые медиа, эффекты при наведении, боковые панели. Если какой-то слой не загрузился или не поддерживается, ядро все равно работает.

Противоположный подход называется graceful degradation, постепенная деградация. Сначала строят полную десктопную версию, а потом убирают или сжимают элементы, пока они не поместятся на мобильном. Это не всегда ошибка, но на сайтах с большим количеством контента такой подход часто дает мобильные страницы, похожие на остатки: слишком длинные меню, таблицы с горизонтальной прокруткой, изображения, в разы тяжелее, чем нужно экрану.

На практике mobile-first сводится к трем привычкам:

• определять приоритет контента сначала на самом маленьком экране;

• писать CSS так, чтобы базовые стили были мобильными, а большие экраны добавлялись сверху;

• измерять скорость на телефоне среднего класса, а не на ноутбуке разработчика.

Mobile-first, responsive и adaptive дизайн: в чем разница

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

Адаптивный дизайн (responsive web design) — это техника. Макет использует гибкие сетки, гибкие изображения и media queries, чтобы одна страница плавно подстраивалась под любую ширину экрана. Термин responsive design ввел Итан Маркотт в 2010 году. Если коротко, это один макет, который «течет» под любой экран.

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

Mobile-first — это стратегия. Она отвечает на вопрос «с чего начинаем?». Mobile-first сайт можно сделать с адаптивной версткой, и именно так делают большинство современных команд. Можно сделать адаптивный сайт и по desktop-first. Техника та же, но отправная точка и приоритеты разные.

Главный вывод: mobile-first — это стратегия, адаптивность — это техника. Адаптивная верстка — это способ технически реализовать макет, который подстраивается под экран, а mobile-first определяет, с какого экрана вы начинаете думать.

Mobile-first vs desktop-first в CSS

В коде разницу видно в media queries.

В mobile-first стилях базовые правила описывают мобильный макет. Большие экраны добавляют через min-width media queries: «от 768 пикселей и шире показать две колонки», «от 1200 пикселей показать боковую панель». Каждый запрос что-то добавляет.

В desktop-first стилях базовые правила описывают десктоп, а меньшие экраны обрабатывают через max-width media queries, которые переопределяют и убирают: «меньше 1024 пикселей скрыть боковую панель», «меньше 768 пикселей поставить колонки друг под другом». Каждый запрос что-то забирает.

Простой пример. Карточка услуги на мобильном занимает всю ширину экрана: изображение, название, краткое описание, кнопка. На планшете такие карточки встают в две колонки, на десктопе в три, и рядом появляется боковой фильтр. В mobile-first стилях адаптивная верстка описывает сначала одну колонку, а дальше для каждого брейкпоинта добавляет только одно правило: количество колонок и появление фильтра.

Почему это важно? С min-width телефоны загружают и применяют только базовые стили плюс то, что им нужно. С max-width телефоны часто получают полные десктопные стили, а потом их переопределяют: больше CSS, больше работы для браузера и больше шансов на ошибки в макете. Mobile-first стили также обычно проще поддерживать, потому что у каждого брейкпоинта понятная задача.

Почему mobile-first важен для бизнеса

Mobile-first — не прихоть дизайнера. Он влияет на три вещи, которые важны бизнесу: сколько людей дойдет до сайта, как сайт ранжируется и сколько посетителей станет клиентами. Если вы планируете новый сайт или перезапуск, эти аргументы касаются любого проекта, от лендинга до разработки корпоративного сайта.

Доля мобильного трафика в Украине

По данным StatCounter, в сентябре 2026 года в Украине десктоп дал около 68 % просмотров страниц в выборке сервиса, мобильные устройства — около 31 %, планшеты — меньше 1 %. Для сравнения, в мире картина обратная: около 59 % приходится на мобильные и около 39 % — на десктоп.

Почему украинские цифры так отличаются? StatCounter считает просмотры на сайтах, где установлен его счетчик, и эта выборка не повторяет структуру всего украинского интернета. Для потребительских ниш (доставка еды, услуги, розница, путешествия) доля смартфонов в трафике обычно значительно выше, чем показывает общая статистика, а B2B-сайты и корпоративные порталы в рабочее время действительно получают больше десктопных визитов.

Поэтому лучший аргумент лежит в вашей аналитике. В GA4 сравните сессии и конверсии по категории устройства. Многие компании с удивлением видят, что мобильные дают большинство визитов, но значительно меньшую долю заявок или продаж. Причина редко в том, что мобильные пользователи «не покупают». Чаще мобильная версия просто усложняет покупку.

Полезное упражнение: разбейте основную воронку конверсии по устройствам. Посмотрите на каждый шаг: страница входа, страница услуги или товара, форма или корзина, подтверждение. Если мобильные и десктоп «отваливаются» примерно одинаково, мобильная версия, вероятно, в порядке. Если мобильные резко падают на конкретном шаге, вы нашли страницу, которую нужно исправлять первой.

Mobile-first для B2B. B2B-компании часто считают, что их клиенты работают только с компьютера. По данным StatCounter, в Украине доля десктопного трафика высокая, а B2B-сайты в рабочее время обычно получают еще больше десктопных визитов. Но покупатели все равно находят компании, читают кейсы и проверяют контакты с телефона, часто между встречами или в дороге. B2B-сайт, которым неудобно пользоваться с телефона, теряет часть этого раннего исследования, а значит и шанс попасть в короткий список.

SEO и mobile-first индексация

Google использует mobile-first индексацию. Это значит, что Googlebot Smartphone, мобильная версия поискового робота, — основной для почти всех сайтов, и Google в первую очередь использует мобильную версию страницы для индексирования и ранжирования. Подробнее о том, как Google пришел к этой модели, мы рассказывали в статье про mobile-first индекс Google.

Для бизнеса это имеет конкретные последствия:

• Если контент, заголовки, внутренние ссылки или микроразметка есть только на десктопе, Google может их не увидеть.

• Если мобильная версия медленная или нестабильная, страдают сигналы качества страницы. Core Web Vitals измеряют скорость загрузки (LCP), реакцию на действия пользователя (INP) и визуальную стабильность (CLS), в том числе на реальных мобильных визитах.

• Если на мобильных страницах сразу выскакивают pop-up, закрывающие контент, Google считает это плохим опытом.

Как эти сигналы сочетаются с другими факторами, мы описали в статье о SEO-факторах ранжирования. Коротко: сайт, слабый на мобильных, слаб и в поиске, даже если десктопная версия отличная.

Конверсия и пользовательский опыт

Мобильные посетители ведут себя иначе. Они часто спешат, отвлекаются, у них медленнее соединение, и они держат телефон одной рукой. Мобильная конверсия быстро падает, когда страница требует от них слишком многого.

Здесь помогают два понятия. Thumb zone — это зона экрана, до которой удобно дотянуться большим пальцем, держа телефон одной рукой, в основном нижняя и средняя часть. Основные действия, размещенные там, используют чаще. Мобильный checkout — это место, где теряют больше всего денег: длинные формы, мелкие поля, нет автозаполнения, нет быстрой оплаты через Apple Pay или Google Pay, неожиданные расходы на последнем шаге.

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

Для интернет-магазинов mobile-first решения определяют весь дизайн. Подробно об этом мы пишем в гайде о том, как разработать дизайн интернет-магазина, в том числе о карточках товаров, закрепленной кнопке «Купить» и оформлении заказа.

Ключевые принципы mobile-first дизайна

Вот принципы, которые мы применяем на проектах, каждый с коротким примером «так / не так».

Приоритизация контента. Решите, что пользователю нужно в первую очередь на маленьком экране, и поставьте это первым.

• Так: показать ценностное предложение, главное действие и самую важную информацию на первом экране.

• Нет: начинать мобильную страницу с полноэкранного слайдера имиджевых фото, отодвинув главное сообщение на три свайпа вниз.

Визуальная иерархия. На узком экране нет места для нескольких конкурирующих акцентов.

• Так: одна четкая основная кнопка на экран, второстепенные действия оформлены как второстепенные.

• Нет: три одинаково яркие кнопки друг под другом.

Зоны нажатия. Палец менее точен, чем курсор. Material Design от Google рекомендует зоны нажатия минимум 48×48 dp, а Human Interface Guidelines от Apple — минимум 44×44 pt.

• Так: делать кнопки и ссылки достаточно большими и оставлять между ними пространство.

• Нет: ставить мелкие текстовые ссылки вплотную друг к другу в футере.

Thumb zone. Размещайте частые действия там, куда дотягивается палец.

• Так: рассмотреть нижнюю навигацию или закрепленную панель действий внизу для ключевых задач.

• Нет: прятать единственную кнопку «Записаться» в верхнем правом углу.

Навигационные паттерны. Навигация должна быть достаточно простой, чтобы пользоваться ею одной рукой.

• Так: короткое основное меню, понятные названия, заметный поиск. Бургер-меню подходит для второстепенных разделов, а два-три самых важных пункта можно оставить видимыми.

• Нет: переносить десктопное мега-меню на сорок ссылок в мобильную шторку.

Читабельная типографика. Текст, нормальный на десктопе, на телефоне может быть нечитаемым.

• Так: основной текст минимум 16 пикселей, комфортный межстрочный интервал, короткие абзацы.

• Нет: уменьшать шрифт, чтобы поместить больше.

Типы полей в формах. Правильный тип поля открывает правильную клавиатуру.

• Так: поля типа email, tel и number, автозаполнение, минимум полей.

• Нет: просить номер телефона в обычном текстовом поле или разбивать дату на три крошечных списка.

Медиа, которые уважают экран. Видео и анимация могут хорошо работать на мобильных, но только когда поддерживают контент.

• Так: короткие сжатые видео с обложкой, которые пользователь запускает сам.

• Нет: тяжелое фоновое видео на главной, которое съедает мобильный трафик и задерживает появление контента.

Ни один из этих принципов не сложен. Сложно применять их последовательно на каждой странице и в каждом компоненте. Поэтому мы превращаем их в правила внутри дизайн-системы: минимальные размеры кнопок, токены отступов, шкала типографики, паттерны форм. Когда правила живут в компонентах, каждая новая страница следует им автоматически.

Как писать контент для маленьких экранов. Mobile-first — это не только макет. Текст, написанный для десктопа, на телефоне часто превращается в сплошную стену. Ставьте главную мысль в первое предложение каждого блока, держите абзацы короткими, используйте содержательные подзаголовки и списки, а второстепенные детали прячьте в раскрывающиеся блоки только тогда, когда они действительно второстепенные. Контент, который работает на телефоне, почти всегда работает и на десктопе, а наоборот бывает редко.

Изображения и видео. На мобильном каждое изображение конкурирует за внимание и трафик. Отдавайте изображения под размер экрана, используйте современные форматы, а видео на первом экране заменяйте статичным кадром с кнопкой запуска. Проверьте, чтобы важный текст не был «вшит» в картинку: на маленьком экране его не прочитать, а поисковые системы и AI‑ассистенты его не увидят.

Скорость на мобильных устройствах

Скорость на мобильных важнее, чем где-либо. У телефонов слабее процессоры, мобильные сети менее стабильны, а пользователи менее терпеливы. Страница, которая грузится за две секунды в офисном Wi-Fi, на телефоне среднего класса со слабым сигналом может грузиться в разы дольше. В Украине к этому добавляются перебои со связью во время отключений, когда люди пользуются мобильным интернетом даже дома.

Основные факторы, влияющие на скорость:

Изображения. На большинстве сайтов это самая тяжелая часть страницы. Адаптивные изображения с атрибутом srcset позволяют браузеру выбрать файл под размер экрана, поэтому телефон не загружает изображение на 2500 пикселей для экрана шириной 400.

Современные форматы. WebP и AVIF сжимают значительно лучше JPEG и PNG при похожем качестве. Отдавать их с резервным вариантом для старых браузеров — сегодня стандартная практика.

Lazy loading. Изображения и видео ниже видимой зоны загружаются только тогда, когда пользователь до них прокручивает. Это ускоряет первый экран, который замечают и человек, и Google.

JavaScript. Тяжелые скрипты блокируют основной поток и делают страницу «тормозящей», что ухудшает INP. Сторонние скрипты, например чат-виджеты, трекеры и инструменты A/B-тестов, — часто главные нарушители. Каждый должен заслужить свое место.

Шрифты. Несколько гарнитур с множеством начертаний быстро накапливаются. Обычно хватает двух гарнитур и нескольких начертаний.

Для измерения используйте PageSpeed Insights, который объединяет лабораторные данные Lighthouse с данными реальных пользователей, когда они есть, и запускайте Lighthouse в Chrome DevTools во время разработки. Тестируйте на замедленном соединении и профиле устройства среднего класса, а не только на собственном телефоне.

Как внедрить mobile-first в проекте

Вот как мы внедряем mobile-first на клиентских проектах. Процесс одинаково работает для нового сайта и для редизайна.

1. Контент-аудит. Начните с контента, а не с макета. Составьте перечень того, что должна донести каждая ключевая страница, и расставьте приоритеты с точки зрения пользователя. На редизайне используйте аналитику, чтобы увидеть, что мобильные посетители действительно читают и нажимают. Этот шаг часто показывает, что половину существующего контента можно сократить или перенести.

2. Мобильные вайрфреймы. Сначала нарисуйте мобильную версию ключевых страниц: главная, страницы услуг или товаров, контакты или оформление заказа. Фокус на порядке и приоритете, а не на визуальных деталях. Только после согласования мобильной структуры расширяйте макеты для планшета и десктопа.

3. Дизайн с auto layout и компонентами. В Figma auto layout и хорошо построенные компоненты позволяют создавать макеты, которые подстраиваются под разную ширину, и рано показывают, как каждый блок будет вести себя на большом экране.

4. Брейкпоинты от контента. Выбирайте брейкпоинты там, где контент начинает выглядеть неправильно, а не копируйте размеры популярных устройств. В коде CSS Grid и Flexbox позволяют переставлять блоки между брейкпоинтами без дублирования разметки.

5. Тесты на реальных устройствах. Эмуляторы и режим устройств в Chrome DevTools отличны во время разработки, но показывают не все. Тестируйте на реальных телефонах, в том числе на бюджетном Android и старом iPhone. Облачные сервисы вроде BrowserStack дают доступ к большому количеству реальных устройств и браузеров.

На каких устройствах тестировать. Эмулятор в браузере полезен, но не заменяет реальных телефонов. Минимальный набор: один новый и один более старый Android среднего ценового сегмента, один iPhone, желательно с меньшим экраном, и планшет, если аналитика показывает заметную долю планшетов. Проверяйте не только внешний вид, но и скорость на мобильном интернете, работу форм с экранной клавиатурой и поведение при повороте экрана.

6. Измерение после запуска. Отслеживайте мобильную конверсию, Core Web Vitals и поведение по устройствам в GA4 и Search Console. Mobile-first — не разовое решение: новые функции и контент могут постепенно его сломать, если никто не следит.

Кто должен быть вовлечен? Mobile-first лучше всего работает, когда дизайнеры, frontend-разработчики и владелец контента работают вместе с первого вайрфрейма. Дизайнеры определяют приоритет и макет, разработчики указывают, что дорого строить или медленно грузится, а владелец контента подтверждает, что сокращенные мобильные тексты по-прежнему говорят то, что нужно бизнесу.

Как это выглядит на практике, смотрите в наших кейсах UI/UX дизайна, от инвестиционных и девелоперских платформ до сервисов бронирования и аналитических продуктов. Если вам нужна команда, которая проектирует mobile-first с первого вайрфрейма, наша разработка UI/UX дизайна охватывает исследования, дизайн и передачу в разработку.

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

Некоторые ошибки вредят одновременно и пользовательскому опыту, и видимости в поиске. Вот те, которые мы видим на аудитах чаще всего.

Скрытый контент на мобильных. Тексты, вкладки или разделы, которые есть на десктопе, прячут на мобильных «для экономии места». При mobile-first индексации контент, которого нет на мобильном, может не существовать и для Google. Если что-то важно, покажите это на мобильном тоже, возможно компактнее.

Навязчивые pop-up (interstitials). Полноэкранные окна с подпиской, скидкой или предложением установить приложение, которые закрывают контент сразу после открытия страницы. Они раздражают, увеличивают количество отказов и считаются плохим опытом с точки зрения Google. Баннеры согласия на cookie и обязательные уведомления допустимы, если без необходимости не блокируют всю страницу.

Мелкие зоны нажатия. Ссылки и кнопки вплотную, иконки без достаточного отступа, крошечный «крестик» для закрытия окна. Люди промахиваются, раздражаются и уходят.

Функции только для десктопа. Конфигураторы, калькуляторы, таблицы сравнения или виджеты бронирования, которые работают только мышью или только на широком экране. Если функция важна для конверсии, она должна работать на мобильном.

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

Забытая десктопная версия. Обратная ошибка реже, но встречается: десктоп, который просто растягивает мобильную версию, с огромными кнопками и пустым пространством. Хороший mobile-first так же тщательно планирует расширение для больших экранов, как и основу.

Что еще стоит проверить

Mobile-first и реклама. Значительная часть рекламных кликов в соцсетях происходит с телефона, поэтому посадочные страницы для кампаний в Meta или TikTok стоит проектировать и тестировать прежде всего на мобильном: быстрая загрузка, понятное предложение и кнопка действия на первом экране, короткая форма. Страница, которая хорошо выглядит только на десктопе, заставляет платить за клики, которые не становятся заявками.

Доступность на мобильном. Многие люди увеличивают шрифт в настройках телефона. Проверьте, что сайт не ломается при увеличенном тексте, не запрещает масштабирование страницы, имеет достаточный контраст на солнце и понятные подписи к иконкам. Это полезно не только людям с нарушениями зрения, но и всем, кто пользуется телефоном на ходу.

Быстрые действия для мобильных посетителей. На телефоне люди чаще хотят позвонить, написать в мессенджер или проложить маршрут, чем заполнять форму. Кнопки звонка, Viber или Telegram и ссылка на карту с адресом должны быть заметными и работать одним нажатием. Отслеживайте эти действия в аналитике как конверсии, иначе часть мобильных заявок останется незамеченной.

Проверка вашего сайта на мобильном за 15 минут. Откройте сайт на собственном телефоне через мобильный интернет, а не офисный Wi-Fi. Найдите ключевую услугу или товар, дочитайте одну страницу до конца, заполните главную форму и попробуйте позвонить или написать компании. Записывайте каждый момент, когда пришлось увеличивать масштаб, ждать, листать вбок или искать кнопку. Попросите сделать то же двух-трех людей вне команды, желательно на разных телефонах. Такой быстрый тест обычно показывает самые важные мобильные проблемы еще до любого формального аудита и дает понятный список того, с чего начать.

Повторяйте такую проверку после каждого крупного обновления сайта, потому что новые блоки и скрипты чаще всего ломают именно мобильную версию.

Отдельно проверьте, как сайт выглядит в браузерах, встроенных в мессенджеры и соцсети: многие открывают ссылки именно там.