Mobile first значит: макет лендинга сначала проектируют для экрана шириной 360-390 пикселей, и только потом расширяют до планшета и компьютера. Узкий экран заставляет выбрать главное, сократить текст и заложить зоны нажатия под палец. Меняется порядок работы, а не сама адаптивность: страница по-прежнему подстраивается под любую ширину экрана.
Откуда берётся сломанный мобильный макет
На лендинги малого бизнеса реклама приводит в основном мобильный трафик. В моей практике доля визитов с телефонов обычно 60-80 процентов, у бьюти-услуг и доставки еды бывает выше. При этом макет по привычке рисуют на широком мониторе, а мобильная версия сайта получается из него сжатием. Подход mobile first меняет порядок работы: сначала проектируется экран шириной 360-390 пикселей, и только потом макет расширяется до планшета и компьютера.
Адаптивная вёрстка при этом никуда не исчезает, страница по-прежнему подстраивается под любую ширину. Меняется точка отсчёта. В desktop first исходный макет широкий, и на телефоне он теряет куски. В mobile first исходный макет узкий, и на широком экране он достраивается.
Звучит как перестановка слагаемых. Но результат отличается заметно: ниже покажу разницу на одном конкретном блоке, а потом пройдусь по сетке, кнопкам и текстам.
Что идёт не так при движении от широкого экрана
Типичная история. Дизайнер открывает макет шириной 1440 пикселей и раскладывает первый экран по трём колонкам: слева заголовок, в центре фото, справа форма. Выглядит сбалансированно, заказчик согласовывает.
Потом страница открывается на экране шириной 375 пикселей. Колонки складываются в столбик, и порядок элементов оказывается случайным: сверху фото, под ним заголовок, форма где-то на третьей прокрутке. Заголовок разросся на четыре строки. Кнопка, рассчитанная на курсор, превратилась в узкую полоску, по которой сложно попасть пальцем.
Ни один из этих дефектов не виден на мониторе, поэтому их не ищут: макет согласован, вёрстка формально адаптивная. Почему сжатая копия широкой страницы не равна мобильной версии, я разбирал в статье Адаптивная вёрстка лендинга. Здесь интересен сам механизм: дефекты рождаются в момент, когда широкую композицию пытаются утрамбовать в узкий экран.
Один блок, два порядка работы
Возьмём первый экран лендинга клининга: заголовок, выгоды, кнопка расчёта и фото. Посмотрим, как он собирается при каждом подходе.
Если рисовать с десктопа
Широкий экран просит композицию в две колонки: слева заголовок с выгодами и кнопкой, справа большое фото бригады. Заголовок на 12 слов, потому что место позволяет. На телефоне фото встаёт над заголовком и занимает почти весь первый экран. Кнопка уезжает на вторую прокрутку. Посетитель с рекламы видит фото швабры и уходит, не узнав ни цену, ни предложение.
Если рисовать с телефона
На ширине 375 пикселей помещается немногое: заголовок до 7 слов, одна строка с главной выгодой, кнопка. Фото либо ставится фоном с затемнением, либо опускается ниже. Решения получаются жёсткими, потому что места нет. Потом макет расширяется: на десктопе фото становится второй колонкой, выгоды разворачиваются в список. Ничего не ломается, потому что главное уже собрано и проверено на самом тесном экране.
Сетка: одна колонка как основа
Базовая сетка мобильного макета это одна колонка с боковыми полями 16-20 пикселей. Всё, что на широком экране должно стоять рядом, сначала выстраивается друг под другом. Такой порядок сам расставляет приоритеты: что выше, то важнее, спрятаться за соседней колонкой нечему.
На планшете колонок становится две, на компьютере те же блоки раскладывает 12-колоночная сетка. Порядок сохраняется, меняется только расположение. Как устроены колонки, контейнер и вертикальные отступы, я разбирал в статье Сетка и отступы.
Мобильный макет это не ужатая копия широкого. Это основа, из которой широкий вырастает.
Пальцы вместо курсора
Курсор попадает в цель размером 20 пикселей, палец нет. Рабочий минимум для зоны нажатия 44 на 44 пикселя, а между соседними ссылками нужен зазор, иначе посетитель открывает не тот пункт меню. Когда макет начинается с телефона, эти размеры заложены с первого эскиза, а не натягиваются на готовый дизайн задним числом.
Наведения на телефоне не существует. Подсказки по hover, меню, раскрывающиеся при наведении курсора, кнопки, которые проявляются над карточкой, на сенсорном экране либо не работают, либо требуют лишнего касания. В mobile first такие приёмы отпадают сами: их негде придумать.
Тексты: узкий экран работает редактором
Строка на телефоне вмещает 35-40 знаков. Заголовок на 12 слов превращается в пять строк, и глаз перестаёт считывать его целиком. Когда текст пишется сразу под узкий экран, лимит места режет лишнее: заголовок до 7 слов, абзац до 4 строк, короткие пункты в списках.
Тест простой: открыть первый экран на телефоне и прочитать за 5 секунд. Если понятно, что предлагают, для кого и что нажать, экран собран. Если нет, текст сокращается дальше. На широком экране такой отбор не работает, там место найдётся для чего угодно.
Брейкпоинты: где макет переключается
Брейкпоинт это ширина экрана, на которой раскладка меняется. Жёсткого стандарта нет, устройств слишком много. На практике хватает трёх переходов, а точные значения подбираются по контенту: макет переключают там, где текущая раскладка перестала выглядеть аккуратно.
| Ширина экрана | Устройства | Колонки | Что меняется |
|---|---|---|---|
| до 480 px | телефоны | 1 | базовый макет, все блоки в столбик |
| 481-768 px | крупные телефоны, планшеты вертикально | 2 | карточки встают парами, форма становится шире |
| 769-1024 px | планшеты горизонтально, ноутбуки | 2-3 | появляются боковые колонки, меню разворачивается |
| от 1025 px | мониторы | 3-4 | контент упирается в контейнер 1100-1200 px |
Обратите внимание на последнюю строку: на большом мониторе контент не растягивается до краёв, а живёт в контейнере. Строка текста шире 700-800 пикселей читается плохо на любом устройстве.
Скорость как побочный эффект
Mobile first дисциплинирует и по весу страницы. Когда старт с телефона, картинки сразу готовятся под маленький экран, а тяжёлые версии подгружаются только на широких. При обратном порядке телефон нередко получает картинку шириной 1920 пикселей, сжимает её до 375 и тратит на это трафик и секунды загрузки.
Для платного трафика это прямые деньги. Посетитель с Директа ждёт первый экран 5 секунд и уходит, а клик уже оплачен. Медленная мобильная версия съедает часть рекламного бюджета ещё до того, как кто-то прочитал оффер. Порог быстрой загрузки главного контента - 2,5 секунды, это метрика LCP из документации web.dev.
Когда оправдан подход desktop first?
Подход mobile first не догма. Если лендинг продаёт B2B-услугу и по Метрике 80 процентов визитов приходит с рабочих компьютеров, рисовать с десктопа разумно. То же с продуктами, где посетитель сравнивает таблицы и конфигурации: на телефоне такие сценарии в любом случае неудобны.
Только решение должно опираться на отчёт по устройствам, а не на ощущения. Владельцу часто кажется, что его клиенты сидят за компьютерами, а Метрика показывает 65 процентов телефонов. Пять минут в отчёте дешевле, чем переделка макета через месяц. Сам отчёт по устройствам описан в справке Метрики.
Как проверить, что мобильная версия лендинга собрана правильно?
Эмулятор в браузере полезен во время вёрстки, но финальную проверку делают на настоящем телефоне. Эмулятор не покажет ни реальную скорость загрузки, ни поведение клавиатуры при заполнении формы, ни то, как страница выглядит под ярким солнцем на улице.
Минимальный прогон: открыть страницу с мобильного интернета, а не по Wi-Fi, прочитать первый экран, заполнить и отправить форму, нажать на номер телефона и кнопки мессенджеров. Полный список проверок без специальных программ есть в статье Как проверить лендинг на телефоне.
Частые вопросы
Что такое mobile first простыми словами?
Это порядок проектирования, при котором макет сначала рисуют для узкого экрана телефона, а потом расширяют под планшет и компьютер. Обратный порядок, от широкого экрана к узкому, называют desktop first.
С какой ширины экрана начинать мобильный макет?
Базовая ширина 360-390 пикселей - под неё попадает большинство современных телефонов. От неё считают все отступы, размеры текста и зоны нажатия.
Какой размер кнопки нужен для пальца, а не для курсора?
Минимум 44 на 44 пикселя для зоны нажатия, с зазором до соседних элементов. Курсор попадает и в меньшую цель, палец на сенсорном экране - нет.
Нужен ли отдельный мобильный сайт вместо адаптивного макета?
Почти никогда. Адаптивная вёрстка на одном коде отдаёт разную раскладку под разные экраны и проще в поддержке. Отдельный мобильный сайт оправдан только в редких технических случаях, не для обычного лендинга.
Коротко
Mobile first это порядок работы: сначала макет для экрана 360-390 пикселей, потом расширение до планшета и десктопа. Узкий экран заставляет выбрать главное, задать порядок блоков, укоротить тексты и заложить нормальные зоны нажатия. Широкая версия из такой основы вырастает без потерь, а обратный путь почти всегда что-то ломает.
Если лендинг уже запущен, начните с отчёта Метрики по устройствам. При доле телефонов выше половины откройте страницу на своём смартфоне и пройдите путь посетителя от первого экрана до отправленной заявки. Обычно уже этот проход показывает, с какого экрана макет рисовали.
