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

Mobile-first — не модное слово, а деньги. Как проверить посадочную за 20 минут и что чинить в первую очередь перед рекламой.

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

«С десктопа заявки есть, с рекламы — мало». «Отказы 70%, хотя сайт красивый». В большинстве ниш больше половины кликов из Яндекс Директа приходит с телефона. Если мобильная версия — урезанная копия desktop «как получится», вы теряете лидов до того, как пользователь дочитает до формы.

Разберём подход mobile-first: почему мобильный трафик решает судьбу кампании, зоны большого пальца, поля форм, скорость на смартфоне и чек-лист тестирования перед запуском рекламы. Материал связан с аудитом перед рекламой и настройкой целей в Метрике.

Почему mobile-first — не мода, а экономика

Mobile-first значит: сначала проектируем и тестируем опыт на узком экране, потом адаптируем на desktop. Не «сжали макет 1440 px до 375», а собрали иерархию блоков, CTA и форму под сценарий «человек в метро, одна рука, 30 секунд внимания».

Цифры из практики

  • 50–70% кликов по поисковой и РСЯ-рекламе — смартфоны.
  • На локальных услугах (клиники, ремонт, доставка) мобильная доля заявок доходит до 80%.
  • Конверсия mobile часто ниже desktop на 30–50% при «одном и том же» сайте — это не «хуже аудитория», а хуже UX.

Яндекс в отчётах Метрики отдельно показывает «Мобильные» vs «Десктоп». Сравните конверсию по цели «заявка» до запуска масштабирования бюджета. Если mobile в 2 раза хуже при 60% трафика — половина денег работает в полсилы.

Desktop-макет «на телефоне вроде видно» — не мобильная версия. Это масштабированная неудобность.

Как пользователь ведёт себя на телефоне

Сценарий платного визита на мобильном:

  1. Клик по объявлению — ожидание загрузки 1–3 сек.
  2. Сканирование первого экрана: «то или не то».
  3. Быстрый скролл к цене, отзывам или кнопке.
  4. Либо звонок / мессенджер одним тапом, либо форма — если доверие есть.

Отличия от desktop: меньше терпения к скорости, выше цена ошибки «мелкая кнопка», чаще прерывание (звонок, смена вкладки). Форма из шести полей на 320 px ширины — барьер; на 1440 px — терпимо.

Зоны большого пальца (thumb zones)

Экран держат одной рукой. Зона комфортного тапа без перехвата хвата — нижняя половина экрана и нижние углы. Верх экрана и левый верхний угол — «stretch zone», туда не ставьте единственный CTA.

Практические правила

  • Primary CTA — в первом экране по центру или в sticky-панели снизу («Оставить заявку»).
  • Телефон и мессенджер — крупные кнопки, не ссылка 12 px в шапке.
  • Бургер-меню с единственной ссылкой «Контакты» в far top-left — плохой паттерн для лендинга под рекламу; лучше дублировать CTA в контенте.
  • Sticky footer с кнопкой — хорошо для конверсии, но проверьте, что не перекрывает поля формы и не конфликтует с cookie-bar.

На проектах лендинга под ключ мы макетируем mobile-экран первым: H1, подзаголовок, CTA, один блок доверия — всё в thumb-friendly зоне.

Формы на мобильном: каждое поле на вес золота

Сокращайте поля

Имя + телефон достаточно для первого касания. Бюджет, должность, «как узнали о нас» — в CRM после звонка менеджера, не на холодной форме.

Типы input

  • type="tel" + маска +7 — цифровая клавиатура сразу.
  • type="email" для почты — с @ на клавиатуре.
  • Font-size полей минимум 16 px — иначе iOS Safari увеличивает масштаб страницы при фокусе.
  • Labels над полями, не placeholder вместо label — после ввода непонятно, что где.

Отправка и обратная связь

Кнопка «Отправить» на всю ширину, min-height 48 px. После клика — loader, блокировка повторной отправки, понятное «Спасибо, перезвоним за 15 минут». Ошибки валидации — текстом под полем, не alert().

Если половина лидов — звонок, настройте цель на tel: в Метрике (см. цели и конверсии).

Скорость на мобильном: жёстче, чем кажется

LCP на 3G/4G — главный фильтр. PageSpeed «в офисе на Wi‑Fi» обманывает.

Что резать в первую очередь

  1. Hero-изображение: WebP, width 800–1200 px для mobile, < 200 KB.
  2. Слайдеры на первом экране — заменить одним статичным кадром на mobile.
  3. Видео-фон на первом экране — отключить для max-width: 767px.
  4. Сторонние виджеты (чат, карта, Instagram) грузить после scroll или по клику.
  5. Шрифты: 2 начертания, subset кириллицы, font-display: swap.

Целевой LCP на мобильном для посадочной под рекламу — до 2,5 сек. Между 2,5 и 4 сек — работайте над оптимизацией параллельно с кампанией. Больше 4 сек — не масштабируйте бюджет, пока не почините (п. 1 чек-листа аудита).

Типографика и контент на маленьком экране

  • H1 — 24–32 px, не больше 3 строк без переноса смысла.
  • Абзацы по 2–3 строки; длинные «простыни» не читают на телефоне.
  • Таблицы тарифов — карточки или горизонтальный scroll с подсказкой, не микрошрифт 10 px.
  • Аккordeоны для FAQ — да; восемь экранов текста подряд — нет.

Оффер above the fold на 375×667 px (iPhone SE) должен быть виден целиком: заголовок + одна выгода + CTA. Проверяйте в DevTools device mode, но финал — только на железе.

Мобильное доверие

На узком экране кейсы и отзывы не «ниже некуда» — их часто не дoscrollивают. Вынесите один сильный кейс или цифру («127 проектов», «срок от 14 дней») в первый или второй экран.

Кликабельный телефон, WhatsApp/Telegram, ссылка на портфолио — в зоне большого пальца. Юридическая информация и политика — в футере достаточно ссылки рядом с формой.

Чек-лист тестирования перед рекламой

Пройдите на реальном смартфоне в мобильной сети (не Wi‑Fi):

  1. Переход по тестовой ссылке с UTM из макета объявления — страница открывается, метки на месте.
  2. Первый экран за < 3 сек, оффер понятен без скролла.
  3. Один главный CTA виден и нажимается.
  4. Нет горизонтального scroll, текст не «вылезает» за край.
  5. Форма: 2–3 поля, отправка, письмо/CRM, цель Метрики сработала.
  6. Клик по телефону — набор номера, цель «звонок» OK.
  7. Кнопка мессенджера открывает приложение.
  8. Sticky-элементы не перекрывают контент.
  9. Страница «Спасибо» или модалка после заявки читаемы на 320 px.
  10. Webvisor включён — через неделю посмотреть 10 mobile-сессий с отказом.

Дополнительно: попросите коллегу «не из маркетинга» пройти путь за 60 секунд. Если не может сформулировать «что предлагают» и «что нажать» — править до Директа.

Mobile-first при разработке нового сайта

Если вы заказываете сайт под ключ, зафиксируйте в ТЗ:

  • утверждение mobile-макета до desktop или параллельно;
  • отдельное hero для mobile при необходимости;
  • тестовые устройства в приёмке;
  • Lighthouse mobile Performance не ниже согласованного порога.

Для интернет-магазина mobile-first критичен в корзине и оплате; для корпоративного сайта — в формах «запросить КП» и страницах услуг, куда ведёт реклама.

Когда мобильная версия «не спасёт»

Если оффер не цепляет, трафик не целевой или форма не доходит до CRM — оптимизация thumb zones не вернёт заявки. Начните с аудита сайта: отделим проблемы UX от проблем воронки и аналитики. Статья «Сайт не приносит заявки» — про полный список причин.

Типичные mobile-ошибки в конструкторах и Tilda

Конструкторы ускоряют запуск, но повторяют одни и те же ловушки:

  • Zero Block с абсолютным позиционированием — на 375 px элементы наезжают друг на друга.
  • Pop-up на весь экран через 2 секунды — bounce с рекламы.
  • Форма Tilda без маски телефона — ошибки ввода на мобильном.
  • Два sticky-блока (cookie + CTA) — занимают 40% экрана.
  • Видео-обложка блока на mobile без отключения — LCP 6+ сек.

Перед рекламой прогоните чек-лист аудита именно на телефоне, не только в редакторе «mobile preview».

Как измерить mobile-конверсию правильно

  1. В Метрике: отчёт «Стандартные отчёты → Технологии → Устройства».
  2. Добавьте метрику «Достижение цели lead_form_submit» и конверсию.
  3. Фильтр «Источник = Яндекс Директ» — сравните только платный трафик.
  4. Если mobile CR < 50% от desktop при > 50% трафика — приоритет mobile P0.

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

Mobile-first и дизайн-система

На кастомных проектах мы задаём сетку от 320 px: 4 px baseline, кратные отступы 8/16/24, минимальный touch target 48 px. Desktop расширяет сетку до 12 колонок, а не «прилепляет поля по бокам».

Компоненты, которые обязательно проектируем mobile-first:

  • hero с H1 не более 3 строк;
  • карточки тарифов — stack, не 3 колонки;
  • таблицы — карточный вид;
  • галерея кейсов — swipe, не hover.

Когда mobile-версия не единственный приоритет

B2B с длинным циклом сделки и трафиком с desktop (например, узкие промышленные запросы) может иметь 40/60 mobile/desktop. Всё равно проверяйте mobile — директор «между встречами» часто кликает с телефона, а договор подписывает с ноутбука.

Сравнение: desktop-first vs mobile-first в цифрах

Условный лендинг B2B, 1000 визитов из Директа, 60% mobile:

  • Desktop CR 3%, mobile CR 1% → суммарно ~18 заявок.
  • После mobile-first правок mobile CR 2,5% → ~24 заявки (+33%) при том же бюджете.

Выигрыш без увеличения расходов на клик — только за счёт UX. Именно поэтому мы не сдаём проект, пока не пройден чек-лист на реальном iPhone/Android.

Accessibility и mobile

Контраст кнопки и текста, focus-состояния, aria-label у иконок «позвонить» и «написать» — не только для WCAG, но и для реальных пользователей 45+ с сниженным зрением. Мелкий серый текст «от 75 000 ₽» на бежевом фоне на солнце на экране смартфона не прочитают.

После запуска рекламы: первые 14 дней

  1. Ежедневно: отказы mobile vs desktop в Метрике.
  2. Раз в 2 дня: 3 записи Webvisor mobile с отказом.
  3. Раз в неделю: PageSpeed mobile после любых правок контента.
  4. Не менять структуру первого экрана чаще раза в неделю — иначе не понять, что сработало.

Viewport, safe area и notch

На iPhone с «челкой» fixed footer может попадать под home indicator. Используйте env(safe-area-inset-bottom) для padding sticky-блоков. Meta viewport: width=device-width, initial-scale=1 без user-scalable=no — блокировка зума ухудшает доступность и раздражает пользователей 45+.

Реклама + mobile: что проверить в кабинете Директа

  • Корректировка ставок на mobile отдельно — если mobile CR выше, можно повысить; если ниже — сначала сайт, не ставки.
  • Мобильные предпочитающие объявления — убедитесь, что быстрые ссылки ведут на mobile-friendly URL.
  • Расширения «Позвонить» — дублируют tel: на сайте; цели должны учитывать оба канала.

Если mobile-конверсия стабильно ниже — вернитесь к чек-листу аудита, пункты 1, 4, 7. Если сайт «не приносит заявки» в целом — 12 причин и план P0/P1.

Тестовые устройства: минимальный набор

Для приёмки mobile достаточно:

  • iPhone SE или аналог 375 px ширины — «узкий» экран;
  • Android 6–7 ″ среднего сегмента — массовый трафик;
  • планшет — если РСЯ даёт заметную долю.

BrowserStack или LambdaTest — запасной вариант, но реальный LTE на телефоне не заменить.

PWA, AMP и «ускоренные страницы»

Для большинства B2B-лендингов PWA и AMP не обязательны. Важнее нормальный LCP на обычной адаптивной вёрстке. AMP имеет смысл только если вы осознанно ведёте трафик на AMP-URL и поддерживаете две версии. Не усложняйте стек ради badge «быстрый сайт», пока не закрыты базовые пункты: сжатие hero, tel:, форма, CTA. Сначала измеримый mobile UX, потом эксперименты с форматами.

Жесты и интерактив на mobile

Swipe-галереи, табы, аккordeоны — нормально, если отзываются на первый тап без «мертвой» зоны. Избегайте hover-эффектов как единственного способа показать информацию: на touch их нет. Если тарифы спрятаны за табы без явных подписей — пользователь не найдёт цену. Для рекламного лендинга лучше вертикальный скролл с явными блоками, чем «интерактив ради интерактива».

Связка mobile UX и Метрики

В отчёте «Карта кликов» на mobile часто видно «мёртвые» зоны, куда пользователи бьют пальцем, ожидая ссылку. Добавьте кликабельность или уберите обманчивую графику. Сегментируйте цели lead_form_submit и phone_click по устройству — если 80% звонков с mobile, форма на первом экране может быть вторичной. Данные бьют интуицию и экономят споры в команде.

Нужен лендинг, собранный с mobile-first с нуля — смотрите лендинг под ключ или напишите через контакты: покажем mobile-макеты из кейсов, оценим сроки и проверим первый экран на реальном телефоне до старта. Настройка целей на mobile-сценарии — Метрика: цели.