В большинстве ниш больше половины трафика из Яндекс Директа приходит с мобильных устройств. Но конверсия мобильного трафика зачастую в 2-3 раза ниже десктопной - не потому что люди на телефонах «хуже», а потому что сайты для мобильных сделаны кое-как. В этой статье - конкретные требования к мобильной посадочной странице, которые реально влияют на результат.
Почему мобильная версия - это отдельная задача
Частое заблуждение: «У нас адаптивный дизайн - мобильная версия есть». Адаптивность означает лишь то, что страница не сломана на маленьком экране. Но адаптивный дизайн не равно оптимизированный для мобильных.
Разница между «адаптивно» и «оптимизировано для мобильных»:
| Параметр | Адаптивный дизайн | Оптимизированный для мобильных |
|---|---|---|
| Компоновка | Элементы масштабируются | Элементы специально расставлены для пальца |
| Кнопки | Масштабированные с десктопа | Размер минимум 44x44 пикселя |
| Форма | Те же поля | Тип полей настроен (tel, email, number) |
| Изображения | Уменьшенные | Другие пропорции под экран |
| Скорость | Может быть медленной | Оптимизированы ресурсы для мобильных |
| Контент | Весь контент с десктопа | Возможно скрыты лишние блоки |
Пользователь с телефоном ведёт себя иначе: он в движении, у него меньше времени, он более нетерпелив и скорее уйдёт, если что-то неудобно.
Статистика по мобильному трафику в Директе
По наблюдениям из практики ведения рекламных кампаний в Яндекс Директе:
- Доля мобильного трафика в большинстве ниш: 55-75%
- Средний показатель отказов на мобильных: на 15-25% выше, чем на десктопе
- Конверсия мобильного трафика: в 1,5-3 раза ниже десктопной (при одинаковом качестве трафика)
Этот разрыв - прямая точка роста. Если поднять мобильную конверсию хотя бы до 70% от десктопной, при доле мобильных 65% и бюджете 200 000 руб/мес это может дать десятки дополнительных заявок ежемесячно.
Главные требования к мобильной посадочной
Первый экран: только самое важное
На экране смартфона видимая область - примерно 600-750 пикселей в высоту. Сюда должны войти: - Заголовок с оффером (шрифт 22-26px) - Кнопка CTA или мини-форма - Контактный телефон (кликабельный)
Всё остальное - ниже. Типичная ошибка: шрифт 14px на мобильных, кнопка размером 24x100px, которую сложно нажать.
Размер кнопок и интерактивных элементов
Стандарт Apple и Google: минимальный размер тачевой области - 44x44 пикселя. Если кнопка меньше, пользователи промахиваются или вообще не могут нажать.
Что проверить: - Кнопки формы - Ссылки в тексте (лучше делать блочными, а не строчными) - Чекбоксы (маленькие чекбоксы - бич мобильных форм) - Элементы навигации
Кликабельный телефон
Это элементарное, но до сих пор часто забывают. Номер телефона должен быть обёрнут в ссылку <a href="tel:+79001234567">. Тогда при нажатии телефон предложит совершить звонок.
Проверяйте: откройте свой лендинг на реальном смартфоне и нажмите на номер. Если вместо звонка открывается поиск или ничего не происходит - это нужно исправить.
Поля форм: правильные типы
На мобильных тип поля определяет клавиатуру:
- type="tel" - цифровая клавиатура
- type="email" - клавиатура с @
- type="number" - числовая клавиатура
- type="text" - стандартная QWERTY
Если у вас поле телефона с type="text" - пользователь получает полную клавиатуру, переключается на цифры, вводит неудобно. Это маленький барьер, который статистически снижает конверсию.
Скорость загрузки на мобильных
Мобильные сети медленнее WiFi. Даже 4G при слабом сигнале работает как 3G. Целевое время загрузки на мобильных: до 3 секунд.
Специфические оптимизации для мобильных:
- Изображения в правильном размере под мобильный экран (не 1600px для экрана 390px)
- Использование srcset для подачи разных размеров изображений
- Отложенная загрузка блоков ниже первого экрана
Типичные ошибки мобильной версии
Горизонтальный скролл. Если страница шире экрана - что-то сделано неправильно. Проверьте в DevTools → Toggle Device Toolbar.
Перекрывающиеся элементы. Текст поверх изображения, кнопка за пределами экрана, форма с обрезанными полями.
Поп-апы на мобильных. Всплывающее окно на мобильном, которое перекрывает весь экран и не закрывается - гарантированный уход пользователя. Google ещё с 2017 года понижает сайты с агрессивными интерстициалами на мобильных.
Мелкий шрифт. Стандарт читаемости: минимум 16px для основного текста на мобильных. 12-14px - сложно читать, пользователи не читают, они уходят.
Одна колонка, но очень длинно. На мобильных страница длиннее, чем на десктопе. Это нормально - но только если каждый экран прокрутки несёт ценность. Если пользователь прокручивает через «воду» - он уходит раньше, чем доберётся до формы.
Видео в формате, не поддерживаемом без WiFi. Автовоспроизводящееся видео на 4G «съедает» трафик и время. Часть пользователей откажется от взаимодействия.
Как тестировать мобильную версию
Три уровня проверки:
Уровень 1: Эмулятор в браузере Chrome DevTools → F12 → иконка устройства. Выберите iPhone SE, Samsung Galaxy S20, iPhone 14 Pro. Проверьте отображение первого экрана, работу формы, кликабельность телефона.
Уровень 2: Реальные устройства Откройте на своём смартфоне, попросите коллег проверить на Android и iOS разных версий. Эмулятор не воспроизводит реальную скорость загрузки и поведение касаний.
Уровень 3: Данные из Яндекс Метрики Сегментируйте аудиторию по типу устройства. Сравните показатель отказов, глубину скролла, конверсию для мобильных vs десктоп. Если разрыв больше 2x - это задача первого приоритета.
Специальные инструменты для мобильного трафика
Для горячего мобильного трафика из поиска Яндекса рассмотрите Турбо-страницы - они загружаются мгновенно, кэшируются серверами Яндекса и дают заметно меньший показатель отказов.
В Яндекс Директе есть корректировка ставок по устройствам. Если мобильная конверсия существенно ниже - можно снизить ставки для мобильных до -30-50%, пока не оптимизирован лендинг. Это временная мера, не долгосрочное решение.
Заключение
Мобильная версия лендинга - не «тоже самое, только поменьше». Это отдельная работа над UX, скоростью и конверсией для другого контекста использования.
Начните с диагностики: откройте свой лендинг на телефоне прямо сейчас и пройдите путь пользователя - от первого экрана до отправки формы. Если где-то затрудняетесь - там проблема.
Приоритеты для мобильной оптимизации: 1. Кнопка CTA на первом экране без прокрутки 2. Кликабельный телефон в шапке 3. Правильные типы полей формы 4. Скорость загрузки до 3 секунд 5. Размер шрифта минимум 16px 6. Размер кнопок минимум 44px