Mobile-first дизайн — это порядок проектирования, при котором первым собирают макет под узкий экран смартфона, а версии для планшета и десктопа наращивают поверх готовой мобильной базы. Что это значит на практике: сначала фиксируют минимальный набор блоков и контента, который помещается в один столбец шириной 360–414 px, и только потом добавляют то, что раскрывается на широких брейкпоинтах.
Порядок сборки влияет на код и на Core Web Vitals. В CSS мобайл-фёрст задаёт базовые стили без медиазапросов, а расширения оборачивают в @media (min-width: ...). Google при индексации использует mobile-first indexing и оценивает именно мобильную версию через PageSpeed Insights и отчёт Удобство для мобильных в Search Console.
§ 01Базовая идея
Отправная точка проектирования от малого экрана — самый жёсткий контейнер: один столбец, крупные интерактивные зоны от 44×44 px, вертикальный порядок блоков сверху вниз. На узком макете нет места балласту, поэтому в первый экран попадает только то, что несёт задачу: заголовок, ключевое действие, основной контент. Как работает расширение: базовые стили пишут без условий, а десктопные надстройки включают через min-width. Такой порядок отличается от старого подхода, где сначала рисовали десктоп, а мобильную версию урезали медиазапросами max-width.
§ 02В чём практический смысл
Мобильный трафик у большинства сайтов держит долю от половины сессий и выше, а Google индексирует контент по мобильной версии. Если на смартфоне блок скрыт или подгружается иначе — в индекс попадёт именно урезанный вариант. Проектирование от мобильных снимает этот риск: то, что видит поисковый робот, совпадает с тем, что видит пользователь телефона. Второй эффект — скорость: узкий макет заставляет отдавать меньше изображений и скриптов на первый экран, что напрямую улучшает LCP.
конверсия +18% — Интернет-магазин косметики на Shopify пересобрал каталог по mobile-first: крупные тап-таргеты, sticky-корзина, ленивая загрузка карточек. Мобильная конверсия выросла с 1.4% до 1.65% за 8 недель. Динамика по GA4 Acquisition и Ecommerce.
LCP 3.8 → 1.9 c — Медиапортал о финансах на WordPress перепроектировал шаблон статьи от смартфона к десктопу: приоритет читаемого текста и preload шрифтов. Мобильный LCP упал с 3.8 до 1.9 с за 5 недель. Замер через PSI и CrUX-75th, глубина просмотра +11%.
§ 03Из чего складывается
Мобильный подход к вёрстке опирается на несколько технических опор:
- Метатег viewport:
<meta name=viewport content=width=device-width, initial-scale=1>— без него масштабирование ломается; - Относительные единицы:
rem,%,vwвместо фиксированных пикселей; - Брейкпоинты снизу вверх: базовые стили →
min-width: 768px→min-width: 1024px; - Гибкие сетки: Flexbox и CSS Grid с переносом колонок;
- Адаптивные картинки:
srcsetи<picture>, чтобы на телефон не уходил десктопный вес.
§ 04Чего не делать
Скрывать контент на смартфоне через display: none ради красоты десктопа — прямой путь к расхождению с индексом, потому что робот берёт мобильную разметку. Второй частый промах — блокировать масштабирование атрибутом user-scalable=no: это бьёт по доступности. Третий — грузить один тяжёлый десктопный скрипт и стиль на все устройства без разделения. Проверить результат помогают отчёт по мобильной версии в Search Console и вкладка Mobile в PageSpeed Insights: там видно, совпадает ли то, что отдаётся телефону, с тем, что нужно для ранжирования.