Мобильная версия сайта: почему с телефона не оставляют заявки

Вы смотрите на свой сайт на большом мониторе, курсором с точностью до пикселя. Посетитель — на шестидюймовом экране, одной рукой, в дороге, на слабом LTE. Это два разных сайта, и второй вы почти не видите. Заявки теряются в нём.

Сначала посчитайте свой разрыв

В большинстве ниш рунета с телефонов приходит 70–80% визитов, а конверсия мобильных обычно в полтора-два раза ниже десктопной. Разрыв в три раза — уже не поведение аудитории, а поломка вёрстки.

Свои цифры смотрите в Яндекс Метрике: отчёт «Технологии — Устройства» со столбцом цели. При 8000 мобильных визитов конверсия 1% даёт 80 заявок, а 1,8% — уже 144, плюс 64 заявки без рубля на рекламу. Смотрите и отказы по устройствам: если на телефонах они выше на 15 процентных пунктов, рвётся на первом экране, а не в форме.

Палец — не курсор: тапы, зазоры и съеденный экран

Площадь контакта пальца — 8–10 мм, поэтому минимальная зона нажатия — 48 на 48 CSS-пикселей по Material Design и 44 на 44 в гайдлайнах Apple. Считается вся область нажатия, а не размер иконки. Между соседними кликабельными элементами нужен зазор от 8 пикселей, иначе человек, целясь в «Позвонить», попадает в «Написать». Особенно страдает крошечный чекбокс согласия: форма заполнена, а при отправке ошибка. И одной рукой уверенно достаётся нижняя треть экрана — кнопка внизу работает лучше спрятанной в бургер-меню наверху.

Второе — сколько экрана осталось под контент. По вертикали видно около 600 пикселей: липкая шапка забирает 60, плашка про куки — 90, виджет чата и кнопка «наверх» занимают углы, сверху баннер «установите приложение». Остаётся полоска в несколько строк. Правило: помимо шапки на экране живёт один закреплённый элемент, и он не перекрывает кнопку отправки. И следите за шрифтом в полях: если он меньше 16 пикселей, Safari на iOS увеличивает страницу по фокусу и вёрстка уезжает вбок.

Вес, прыжки и мёртвые контакты

Фотография с камеры шириной 4000 пикселей на экране шириной 390 — вдесятеро больше данных, чем нужно. Отдавайте WebP в размерах под экран, ленивую загрузку — всему ниже первого экрана, кроме первой картинки: она портит отрисовку. Ориентир — первый экран за 2,5 секунды на мобильной сети. И задавайте картинкам явные размеры: иначе догружаемый блок сдвигает контент ровно в момент нажатия и палец попадает не туда.

Контакты, которые не работают:

Телефон текстом или картинкой: номер должен набираться тапом, для этого ссылка tel:, почта — mailto:.
Встроенная карта. Тяжёлая и перехватывает скролл: палец попал в неё — страница вместо прокрутки масштабирует карту. Ставьте картинку с кнопкой «Построить маршрут».
Мессенджеры через QR-код: сканировать нечем, кнопка должна открывать приложение.

15 минут с телефоном в руках

Не эмулятор в браузере: свой телефон, Wi-Fi выключен, одна рука.

Зайдите по своей рекламной ссылке, а не из закладок: увидите редиректы и реальную скорость.
Первый экран без скролла: понятно, что продаёте, и есть кнопка?
Пролистайте до конца: уезжает вбок хоть один блок? Горизонтальный скролл — это баг.
Тапните кончиком большого пальца по кнопкам, чекбоксам, пунктам меню. Считайте промахи.
Отправьте настоящую заявку и дождитесь уведомления.
Тапните по номеру и по мессенджеру, проскроллите страницу мимо карты.
Повторите на недорогом Android, не только на флагмане.

Как тестировать и частые ошибки

В PageSpeed Insights смотрите вкладку «Мобильные» и данные реальных пользователей, а не лабораторный балл. Вебвизор в Метрике пишет мобильные сессии с тапами: видно, как человек трижды жмёт в одно место. Карта скроллинга покажет, докручивают ли до формы.

Типичные ошибки:

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

Мобильная версия — не уменьшенная копия сайта, а основной сценарий: узкий экран, толстый палец, полторы секунды терпения. Замерьте разрыв по устройствам и пройдите чек-лист руками — почти всё чинится за день.

И учтите привычку: с телефона охотнее напишут в чат парой фраз, чем станут заполнять форму на ходу, но ждать ответа не будут. AI-ассистент Excella отвечает в чате сразу, уточняет задачу и передаёт менеджеру готовый контакт, включая вечерние и выходные обращения.