Если коротко:
у вас может быть идеальный сайт на десктопе и при этом мёртвый бизнес на мобиле.
Я регулярно вижу одну и ту же картину:
- владелец смотрит сайт с ноутбука — всё красиво, аккуратно, удобно;
- рекламный трафик льётся в основном с телефонов;
- в отчётах: с десктопа конверсия норм, с мобилы — стыд и боль.
И вот вы сидите, обсуждаете «неэффективный маркетинг» и «дорогие клики»,
а правда в том, что ваша мобильная версия просто выгоняет людей, причём тихо и без скандала.
Давайте разберу, как именно мобилка на Битрикс обычно убивает продажи и что я делаю, чтобы она перестала быть декоративной.
1. Симптомы: мобилка есть, но толку от неё ноль
Если вы узнаёте себя хотя бы по части пунктов — да, мобилка у вас “для галочки”:
- На телефоне всё очень мелкое: тексты, кнопки, формы. Нужны пальцы младенца.
- Чтоб увидеть цену/кнопку «Купить», нужно проскроллить пол-экранчика баннеров, акций, текста “о компании”.
- Меню — это трёхэтажный бургер, где непонятно, куда нажать, а где просто текст.
- Формы на телефоне — ад: поля прыгают, клавиатура закрывает половину экрана, кнопка «Отправить» уехала вниз.
- На мобиле сайт заметно тормозит: подлагивает скролл, элементы подгружаются с задержкой.
И при этом в отчётах по устройствам:
- трафика с мобилы больше,
- конверсия с мобилы в 2–3 раза меньше, чем с десктопа.
Это не «особенность аудитории». Это фактически включенный режим “анти-продаж” для телефонов.
2. Главная ошибка: «Мы просто ужали десктоп, и так сойдёт»
Типичная логика разработки:
- сверстали сайт под десктоп,
- прикрутили адаптив;
- проверили на одном-двух разрешениях в браузере,
- если ничего сильно не поехало — «ну всё, мобильная есть».
Реальность:
- блоки идут в той же логике, что и на десктопе (где у вас два-три столбца и куча места);
- важные элементы (цена, кнопка, оффер) уезжают вниз под декоративные блоки;
- половина «красоты» превращается на телефоне в кашу и лаги.
Мобильная версия — это не «ужмите всё, что было».
Это отдельный сценарий, где:
- другая концентрация внимания
- другой контекст (человек едет, стоит, ждёт, пара минут максимум)
- другие ограничения (экран, пальцы, связь)
Если это не понимать — мобилка всегда будет обрубком десктопа.
3. Что обычно не так на мобильной версии Битрикс-сайта
3.1. Первый экран: главного не видно
Самая частая дичь:
- сверху огромный логотип,
- потом меню,
- потом слайдер, который никто не свайпает,
- и только где-то внизу — оффер, цена, кнопка «Купить» или «Оставить заявку».
Человек открыл сайт, посмотрел пару секунд, не увидел ничего нужного и ушёл.
Он не обязан искать, чем вы ему полезны.
Что должно быть на первом экране мобилки:
- понятный заголовок: что вы делаете и для кого;
- самое важное действие: «Заказать», «Рассчитать», «Купить», «Оставить заявку»;
- минимум мусора.
На телефоне ваш первый экран должен сразу стрелять в задачу пользователя, а не греть его корпоративным пафосом.
3.2. Кнопки и формы: «попробуй попадись»
Признаки плохой мобилки:
- кнопки меньше нормального пальца;
- расстояния между элементами минимальны — легко промахнуться;
- форма растянута на 3–4 экрана, без подсказок и нормального порядка полей;
- нет автоподстановки (для телефона — цифровая клавиатура, для e-mail — с @, точкой и т.п.).
Человек пытается:
- нажать «Купить», попадает в «Перейти в профиль»,
- заполняет номер, а маска формы гавкает «неверный формат»,
- листает вверх-вниз, чтобы найти, где ошибка.
С третьего раза он не будет пытаться, честно.
3.3. Меню, в котором можно жить, но нельзя купить
Ещё один стандартный цирк:
- бургер-меню открывает половину жизни компании: «О нас», «Миссия», «Партнёры», «Новости», «Блог», «Вакансии»;
- раздел «Каталог» или «Услуги» где-то внизу, тем же размером, что и всё остальное;
- часть важных разделов (например, подвиды услуг) спрятаны в третий уровень вложенности.
На мобиле никто не готов ковыряться в археологии меню.
Нужны:
- 3–5 основных пунктов;
- быстрый доступ к каталогу / услугам / записи / заявке;
- всё второстепенное — вниз или в отдельный блок «Ещё».
3.4. Скорость: сайт тяжелее, чем нужно
Мобильная связь + тяжёлый сайт = боль.
Что я обычно вижу:
- фулл-HD баннеры по 1–3 МБ каждый;
- подключены все библиотечки JS, что есть в проекте, на каждую страницу;
- никакого lazy-load картинок, всё сразу тащится;
- «красивые» анимации, которые нагибают слабые телефоны.
На десктопе это ещё кое-как переваривается.
На мобиле — пользователю проще закрыть вкладку, чем ждать.
4. Как я подхожу к мобилке на Битрикс-проектах
Шаг 1. Смотрю не в DevTools, а как живой пользователь
Да, инспектор в браузере — это удобно.
Но я всегда беру телефон и:
- захожу на сайт с реального устройства;
- прохожу путь: главная → нужный раздел → карточка товара/услуги → заявка/заказ;
- отмечаю, где:
- неудобно жать,
- нужно слишком много думать,
- непонятно, что делать дальше,
- всё тормозит.
Параллельно смотрю аналитику:
- конверсию по устройствам;
- отказы и глубину просмотра по мобайлу;
- на каком шаге мобильные чаще всего отваливаются.
Шаг 2. Пересобираю первый экран под мобильный сценарий
Я не пытаюсь умещать всю вашу красивую десктопную шапку в мобилу.
Я задаю один вопрос: что должен сделать пользователь с телефона?
- Позвонить?
- Оставить заявку?
- Заказать обратный звонок?
- Купить товар в пару кликов?
И под это уже собираю первый экран:
- заголовок → короткий подзаголовок → одна понятная кнопка → доверие (1–2 маркера);
- всё, остальное вниз.
Шаг 3. Упрощаю навигацию: минимум уровней, максимум логики
Делаю так:
- из меню выкидываю всё, что не помогает продавать (историю компании, инвесторам, философию — вниз или в футер);
- оставляю ключевые действия: каталог / услуги, акции, контакты, личный кабинет (если он реально используется);
- важные разделы выношу отдельными блоками на главной в мобильной версии — не только в меню.
Человек с телефона должен за 1–2 шага попадать туда, где он может принять решение и оставить контакты, а не в «О нас».
Шаг 4. Привожу формы в человеческий вид для мобилки
Мой стандартный набор:
- убираю всё лишнее, оставляю 2–4 поля максимум;
- делаю большие кликабельные области, нормальные отступы;
- настраиваю адекватную клавиатуру: телефон → цифры, e-mail → буквы с @;
- делаю нормальный шаг «после отправки»: ясно сообщение, что заявка принята, можно не тыкать ещё 5 раз.
И обязательно: проверяю формы с реального телефона, а не через «ну они же есть в верстке».
Шаг 5. Лечу скорость: режу жир, включаю ленивую загрузку
Здесь всё прагматично:
- сжимаю картинки, включая баннеры;
- включаю lazy-load изображений ниже первого экрана;
- вычищаю лишние скрипты, которые не критичны на мобиле;
- смотрю TTFB: если сервер тупит — решаю вопрос с окружением/кашем, а не виню только фронт.
Задача — чтобы:
- первые полезные элементы появлялись за 1–2 секунды,
- не было ощущения «всё зависло».
Шаг 6. Смотрю на данные, а не на ощущения
После правок мне неинтересно «кажется, стало удобнее».
Мне интересно:
- как поменялась конверсия мобильного трафика;
- как изменились отказы и глубина просмотра с телефонов;
- увеличилось ли количество оформленных заказов/заявок именно с мобилы.
Если цифры растут — значит, мы не просто «перекрасили мобилку», а вернули часть потерянных денег.
5. Что в итоге получает бизнес от нормальной мобильной версии
Когда мобилка сделана не «для отчёта», а как отдельный сценарий, обычно происходит следующее:
- конверсия с телефонов подтягивается к десктопной (а иногда и обгоняет);
- становится не страшно включать мобильную рекламу на полную;
- люди перестают писать «ничего не нажимается / всё тормозит / неудобно»;
- у вас в принципе меняется взгляд на сайт:
вы начинаете думать не «как это выглядит на ноуте», а «как это живёт в руках у нормального человека».
И да, очень часто рост выручки/заявок получается не за счёт увеличения бюджета, а за счёт того, что вы перестаёте отталкивать половину своей аудитории устройством, с которого они реально заходят.