Mobile first: что это такое и как применять подход в дизайне и вёрстке

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

Mobile first как способ проектирования

Идею в 2009–2011 годах популяризировал дизайнер Люк Вроблевски, и в первую очередь она про приоритеты, а не про код. На экране телефона без прокрутки помещаются заголовок, одно предложение и одна кнопка. Если начинать с этого пространства, приходится решить:

• какое действие на странице самое важное;
• какой контент обязателен, а какой лишь украшает;
• в каком порядке всё должно идти, когда колонка одна.

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

Mobile first и desktop first в CSS

Одну и ту же раскладку можно написать в обе стороны.

Desktop first описывает широкую раскладку по умолчанию и убирает лишнее через max-width:

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

@media (max-width: 1023px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .cards { grid-template-columns: 1fr; gap: 1rem; }
}

Mobile first описывает одну колонку по умолчанию и добавляет раскладку через min-width:

.cards { display: grid; gap: 1rem; }

@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

У второго варианта есть практические плюсы. На телефоне действуют только базовые правила, и браузеру не нужно разбирать переопределения. Стили наращиваются, а не отменяются, поэтому CSS легче читать. А браузеры и почтовые клиенты, которые игнорируют медиазапросы, показывают нормальную одноколоночную вёрстку вместо сжатой десктопной.

Фреймворки устроены так же: и в Tailwind CSS, и в Bootstrap классы без префикса действуют на всех размерах, а префиксы брейкпоинтов означают «от этой ширины и больше».

Mobile first это ещё и про скорость

Телефон на слабом соединении не должен скачивать то, что нужно только десктопу. На практике это значит:

• по умолчанию отдавать маленькие изображения, а крупные подключать через srcset;
• загружать тяжёлые компоненты вроде карт, видеофонов и больших каруселей только тогда, когда они нужны;
• не класть JavaScript для десктопных функций в начальный бандл.

Google индексирует мобильную версию страниц, так что поисковик оценивает именно то, что видят на телефоне. Как измерить результат, рассказано в статье о проверке скорости сайта на мобильных.

Как применить mobile first на реальном проекте

1. Сначала выстройте иерархию контента. Ещё до визуального дизайна перечислите содержимое страницы в одну колонку в порядке важности.
2. Нарисуйте макет на 360–390 px. Ширина большинства телефонов в ходу лежит между 360 и 440 CSS-пикселями.
3. Расширяйте на естественных брейкпоинтах. Растягивайте холст, пока раскладка не начнёт выглядеть растянутой, и ставьте брейкпоинт там. Типичные значения собраны в статье про брейкпоинты для адаптивной вёрстки.
4. Пишите CSS в том же порядке. Базовые стили для телефонов, запросы с min-width для остального.
5. Проверяйте телефонные размеры по ходу работы, а не в конце. Для этого удобно держать в Chrome открытый мобильный вид: подойдёт режим устройства в DevTools или Mobile View Extension, которое включается в один клик и сохраняет рамку телефона при переходах между страницами.

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

• Mobile first только в CSS. Если дизайн доделали на десктопе, вёрстка «от мобильного» не решит проблему приоритетов контента.
• «Мобильный» как один размер. Телефоны шириной 360 и 440 px отличаются на 20%. Проверяйте оба, плюс горизонтальную ориентацию.
• Прятать контент вместо того, чтобы перестроить. Если блок не стоит показывать на телефоне, стоит спросить, нужен ли он вообще.
• Забыть про сенсор на больших экранах. Планшеты и ноутбуки с сенсорным экраном показывают десктопную раскладку, но наведения у них нет. Эффекты только для мыши оборачивайте в @media (hover: hover).
• Mobile first, десктоп по остаточному принципу. Широким экранам тоже нужно внимание: слишком длинные строки текста и растянутые картинки являются провалом того же процесса, только с другой стороны.

Частые вопросы

Чем mobile first отличается от адаптивного дизайна?

Адаптивный дизайн это цель: один сайт, который подстраивается под любой экран. Mobile first это способ к ней прийти, начиная с самого маленького экрана. Подробнее в статье что такое адаптивный дизайн.

Всегда ли использовать медиазапросы с min-width?

Для большинства раскладок да. Запросы с max-width по-прежнему полезны для мелких исключений, например правки, которая действует только ниже определённой ширины.

Актуален ли mobile first в 2026 году?

Да. У большинства сайтов значительная доля трафика приходит с телефонов, а Google индексирует мобильную версию страниц. Если начинать с мобильного, эти посетители не получат урезанную версию сайта.