Больше половины заказов в большинстве магазинов приходит с телефонов, а верстают их всё ещё «от десктопа»: сначала делают красивую широкую версию, а потом на бегу ужимают её под мобильный. В результате на телефоне — мелкие кнопки, фильтр, который невозможно применить одной рукой, и оформление заказа, где палец постоянно промахивается. Каждый такой недочёт — это ушедший покупатель, который просто закрыл вкладку.
Разберём mobile-first не как модный лозунг, а как рабочий метод: почему проектировать нужно от мобильного к десктопу, как выбирать брейкпоинты и тач-цели и как сделать каталог, фильтр и корзину удобными на телефоне в магазине на 1С-Битрикс. Тема тесно связана с производительностью, которую мы поднимаем в рамках аудита и оптимизации 1С.
Коротко
- Mobile-first — это порядок проектирования: сначала мобильная версия как основная, потом добавление под десктоп.
- Брейкпоинты ставят там, где ломается контент, а не под конкретные модели телефонов.
- Тач-цели около 44–48 px и достаточные отступы спасают мобильную конверсию, особенно в оформлении.
- Фильтр, каталог и корзину на телефоне проектируют отдельно, а не ужимают десктопные.
Что такое mobile-first по-настоящему
Термин звучит везде, но понимают его по-разному. Адаптивность — это способность сайта подстраиваться под разные экраны. Mobile-first — это направление проектирования: вы начинаете с мобильной версии как основной и наращиваете её до десктопа, добавляя элементы для широких экранов, а не наоборот.
Разница не косметическая. Когда проектируют «от десктопа», в широкую версию влезает всё — три колонки, большой слайдер, развесистое меню, — а потом это мучительно впихивают в узкий экран. Когда проектируют «от мобильного», вы с самого начала вынуждены выбрать главное и уместить его в 360 пикселей ширины. Этот отбор идёт на пользу и мобильному, и десктопу: интерфейс получается сфокусированным, а не перегруженным.
Почему это важно для магазина
Для интернет-магазина mobile-first — не эстетика, а деньги и трафик. Причин несколько.
- Большинство трафика — мобильное. Плохой телефонный интерфейс режет продажи там, где их больше всего.
- Поиск оценивает по мобильной версии. Именно её поисковики берут за основу ранжирования.
- Скорость на телефоне критична. Слабый процессор и связь безжалостны к тяжёлым страницам.
- Оформление — самое хрупкое место. Мелкие поля и кнопки на шаге заказа стоят прямых потерь.
Иными словами, мобильная версия — это не «вторая», а главная витрина, и относиться к ней нужно соответственно.
Брейкпоинты от контента, а не устройств
Частая ошибка новичков — привязывать брейкпоинты к конкретным моделям телефонов. Устройств слишком много, и гнаться за каждым бессмысленно. Правильный подход — ставить точку перелома там, где ломается ваш контент.
| Диапазон | Типичные устройства | Что меняется в раскладке |
|---|---|---|
| до ~480 | Телефоны | Одна колонка, шторки, крупные кнопки |
| ~480–768 | Крупные телефоны, малые планшеты | Две колонки в каталоге |
| ~768–1024 | Планшеты | Появляется боковая панель |
| от ~1024 | Десктоп | Многоколоночная раскладка, фильтр сбоку |
Значения в таблице — ориентир, а не догма. Реальные брейкпоинты задаёт ваша вёрстка: раздвигайте окно и добавляйте точку перелома ровно там, где раскладка начинает выглядеть плохо. Так вы получаете плавную адаптацию под любые экраны, а не под три «эталонных» устройства.
Тач-цели и удобство пальца
На десктопе курсор точен, на телефоне — палец широк и неточен. Поэтому размер и расположение интерактивных элементов на мобильном критичны. Ориентир для тач-цели — около 44–48 пикселей по высоте с достаточными отступами между соседними элементами.
Отдельно важны: достаточный контраст текста, отсутствие горизонтальной прокрутки, крупный шрифт основного контента и заметная, но не перекрывающая экран кнопка действия. Мелочи вроде расстояния между пунктами меню на телефоне решают, дойдёт ли человек до покупки.
Каталог и карточка на телефоне
Каталог — сердце магазина, и на телефоне он живёт иначе, чем на десктопе. Что важно продумать:
- Одна-две колонки товаров. На узком экране плитка в одну-две колонки читается лучше, чем сжатая многоколоночная сетка.
- Крупное фото и цена. Главное в карточке каталога — изображение, название и цена; остальное вторично.
- Кнопка «в корзину» под пальцем. Заметная и достаточно крупная, без необходимости заходить в товар.
- Ленивая загрузка. Товары подгружаются по мере прокрутки, а не все сразу.
В карточке товара на телефоне выносят наверх главное: фото, цену, наличие и кнопку заказа, а характеристики, описание и отзывы разворачивают вкладками или аккордеонами, чтобы не гнать пользователя через бесконечную прокрутку.
Умный фильтр в мобайле
Боковая панель фильтра, удобная на десктопе, на телефоне не помещается. Её выносят в отдельный экран или шторку, открывающуюся по кнопке «Фильтр». Хороший мобильный фильтр:
- Открывается по кнопке. Не занимает место в потоке, а вызывается явным действием.
- Показывает счётчики. Сколько параметров выбрано и сколько товаров найдётся при применении.
- Применяется одним действием. Кнопка «Показать N товаров» внизу, а не пересчёт на каждый чих.
- Легко сбрасывается. Быстрый сброс всех фильтров одним тапом.
В 1С-Битрикс за фильтр отвечает компонент catalog.smart.filter, и он поддерживает мобильную раскладку, но её почти всегда дорабатывают под конкретный каталог: удобство шторки, поведение счётчиков и скорость применения важнее стандартного вида.
Корзина и оформление заказа
Оформление — самый хрупкий шаг мобильного магазина: здесь теряют больше всего. Каждая мелочь вёрстки бьёт по конверсии, потому что пользователь уже готов платить, и любое трение его отталкивает.
- Крупные поля ввода. Достаточная высота и правильные типы клавиатуры (телефон, e-mail) для быстрого ввода.
- Минимум полей. Спрашивайте только необходимое; лишние поля на телефоне убивают конверсию.
- Заметная кнопка оформления. Крупная, на видном месте, не перекрытая клавиатурой.
- Понятные ошибки. Валидация подсказывает, что не так, прямо у поля, а не общим сообщением наверху.
- Прогресс шагов. Пользователь видит, сколько шагов осталось до завершения.
Корзина и оформление в 1С-Битрikс строятся на штатных компонентах, но их мобильную вёрстку почти всегда шлифуют под пальцы. Здесь окупается каждый вложенный час — это самый прямой рычаг мобильной конверсии.
Изображения и скорость
Главная причина медленной мобильной версии — в телефон грузят то же, что и в десктоп: тяжёлые картинки, лишний скрипт, крупные шрифты. Mobile-first требует обратного — отдавать мобильному минимум необходимого.
- Адаптивные изображения. Телефону — картинка его размера, а не десктопная в полном разрешении.
- Современные форматы. Сжатые форматы изображений экономят вес без потери качества.
- Отложенная загрузка. Картинки ниже экрана грузятся по мере прокрутки.
- Урезанный JavaScript. На мобильном не тянут тяжёлые слайдеры и скрипты, которые там не нужны.
Скорость сильно зависит и от серверной части. Композитный сайт отдаёт статику мгновенно, а тяжёлую динамику догружает; про правильное окружение мы писали в статье про хостинг и BitrixVM, а массовые правки вёрстки удобно выкатывать через процесс из материала про CI/CD и деплой.
Адаптив, мобильная версия или PWA
Частый вопрос: делать одну адаптивную вёрстку, отдельный мобильный сайт или PWA? Короткий ответ — почти всегда начинать стоит с качественного адаптива.
- Адаптивная вёрстка. Один код под все экраны — дешевле в поддержке и лучше для SEO. Базовый выбор.
- Отдельная мобильная версия. Оправдана, когда мобильный сценарий сильно отличается от десктопного.
- PWA. Нужна, когда важны офлайн-возможности, установка на экран и приложение-подобный опыт.
Отдельный мобильный сайт на поддомене сегодня скорее обуза: два кода, дубли, риски для индексации. Если бизнесу нужен приложение-подобный опыт, разумнее смотреть в сторону PWA поверх адаптива, а не в сторону второго сайта. Когда мобильный сценарий требует нестандартной логики, её выносят в отдельную разработку — как мы описывали в материале про разработку модуля 1С-Битрикс.
Как тестировать
Адаптивность нельзя проверить «на глаз в одном браузере». Нужен слоёный подход.
- Режим устройств в браузере. Быстрая проверка раскладки на разных ширинах.
- Реальные телефоны. Финальную оценку дают настоящие устройства разных размеров и мощности.
- Ключевые сценарии. Поиск, фильтр, добавление в корзину и оформление проверяют на реальном устройстве.
- Измерение скорости. Мобильные показатели скорости — отдельный обязательный тест.
Именно в реальных сценариях на настоящем телефоне вылезают мелкие проблемы вёрстки, которые в эмуляторе незаметны, а на практике превращаются в потерянные продажи.
Частые ошибки
- Проектируют от десктопа. Перегруженную широкую версию мучительно ужимают под телефон.
- Мелкие тач-цели. Кнопки и поля слишком малы и близки — палец промахивается.
- Фильтр не адаптирован. Десктопная панель не помещается, применить фильтр на телефоне мучительно.
- Тяжёлые картинки. В телефон грузят десктопные изображения в полном разрешении.
- Перегруженное оформление. Лишние поля и мелкие кнопки на самом дорогом шаге.
- Горизонтальная прокрутка. Контент вылезает за экран — верный признак сломанного адаптива.
- Тестируют только в эмуляторе. Проблемы реальных устройств остаются незамеченными.
Чек-лист внедрения
- Проектирование от мобильного. Мобильная версия сделана как основная, десктоп — надстройка.
- Брейкпоинты от контента. Точки перелома там, где ломается раскладка, а не под модели телефонов.
- Тач-цели в норме. Кнопки и поля около 44–48 px с достаточными отступами.
- Каталог адаптирован. Одна-две колонки, крупное фото, цена и кнопка под пальцем.
- Фильтр в шторке. Открывается по кнопке, со счётчиками и применением одним действием.
- Оформление вылизано. Крупные поля, минимум ввода, заметная кнопка, понятные ошибки.
- Скорость на телефоне. Адаптивные изображения, отложенная загрузка, урезанный скрипт, композит.
- Проверено на устройствах. Ключевые сценарии протестированы на реальных телефонах.
Вывод
Mobile-first — это не про то, чтобы сайт «как-то открывался» на телефоне, а про порядок мышления: сначала главное на узком экране, потом расширение под десктоп. Для магазина это прямой рычаг: большинство трафика мобильное, поиск оценивает вас по мобильной версии, а оформление заказа на телефоне — самое хрупкое место воронки.
Ставьте брейкпоинты по контенту, делайте тач-цели крупными, проектируйте фильтр и корзину под палец и не грузите в телефон десктопный вес. Тогда мобильная версия станет не «второй», а главной и самой продающей витриной вашего магазина на 1С-Битрикс.
