Почему порядок вообще имеет значение?

Из-за дисциплины. На маленьком экране помещается только главное, и это заставляет отобрать действительно важное. Обратный порядок — сначала десктоп, потом «ужать» — приводит к тому, что на телефоне остаётся всё то же самое, только мельче и неудобнее.

Всегда ли нужен такой подход?

Нет. Если ваша аудитория работает преимущественно с компьютера — внутренние сервисы, сложные B2B-инструменты, панели управления, — проектировать логичнее от десктопа. Смотрите на реальную статистику своего сайта, а не на общие тренды.

Увеличивает ли это стоимость проекта?

Нет, порядок работы на стоимость не влияет. Мобильные макеты нужны в любом случае — это 30–40% дизайнерского времени независимо от того, с чего начинали. Меняется только последовательность и качество результата.

Mobile-first: почему дизайн начинается с телефона

Q: Чем mobile-first отличается от адаптивной вёрстки?

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

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

Разбираем, почему последовательность вообще имеет значение.

В чём разница

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

Mobile-first: дизайнер начинает с экрана шириной 375 пикселей. Помещается мало, значит нужно отобрать главное. Потом экран расширяется, и появляется место для дополнительного.

Результат отличается не оформлением, а составом. В первом случае на телефоне оказывается всё то же самое, только мельче. Во втором — только то, что действительно нужно.

Почему это работает

Дело в ограничении, которое заставляет принимать решения.

На десктопе места много, и вопрос «нужен ли этот блок» не встаёт: он же помещается. В результате страница обрастает разделами, которые никто не просил, но которые «не мешают».

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

Проще говоря: ограничение — это инструмент отбора.

Какие решения меняются

Порядок блоков. На телефоне человек читает строго сверху вниз. Значит, последовательность аргументов должна работать линейно, а не «глаз сам найдёт нужное».

Объём первого экрана. На десктоп помещается заголовок, подзаголовок, кнопка, изображение и блок с преимуществами. На телефон — заголовок, строка конкретики и кнопка. Отбор жёсткий, и он полезен: что должно остаться, разобрано в статье первый экран сайта.

Навигация. Не «уберём меню в бутерброд», а вопрос: какие два-три раздела нужны человеку на телефоне прямо сейчас.

Формы. Восемь полей на десктопе выглядят нормально, на телефоне — как препятствие. Проектируя от мобильного, вы сразу приходите к минимуму, о котором в статье форма заявки на сайте.

Таблицы и фильтры. На маленьком экране они не помещаются в привычном виде, и это заставляет придумать нормальное решение сразу, а не «как-нибудь сожмём».

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

Когда подход не нужен

Честно: не всегда.

Аудитория работает с компьютера. Внутренние сервисы, панели управления, сложные B2B-инструменты, профессиональное ПО. Здесь проектировать логичнее от десктопа.

Сложные интерфейсы с плотными данными. Таблицы, графики, редакторы — на телефоне они полноценно не живут, и делать вид, что живут, вредно.

Ваша статистика говорит обратное. Если в аналитике 80% посетителей с десктопа — ориентируйтесь на них, а не на общие тренды.

Ключевое: смотрите свои данные. Доля мобильных различается в разы между нишами.

Практическое следствие для заказчика

Два вопроса подрядчику на этапе дизайна:

«Покажите мобильные макеты вместе с десктопными». Не после, а вместе. Если мобильных версий нет в составе работ — это не полный дизайн, о чём в статье сколько стоит дизайн сайта.

«С чего начинали проектирование?» Ответ многое говорит о подходе.

И при приёмке — проверяйте на реальном телефоне, проходя полный путь до заявки. Методика в статье адаптивная вёрстка.

Побочная выгода

Проектирование от мобильного улучшает и десктопную версию.

Причина простая: то, что выжило после жёсткого отбора, — и есть действительно важное. Десктопная версия, собранная из этого набора с добавлением воздуха, получается чище страницы, которую собирали «пока помещается».

Это же снижает риск того, что через год сайт обрастёт блоками, которые никто не читает.

Итог

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

Меняется результат: на телефоне остаётся то, что нужно, а не всё то же самое мельче.

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