Мобильная версия лендинга: реклама из соцсетей идёт с телефона

Адаптивный лендинг — страница, которая автоматически подстраивается под размер экрана: на компьютере блоки стоят в несколько колонок, на телефоне перестраиваются в одну, текст и кнопки остаются удобными. Для рекламы в соцсетях и Telegram это не дополнительная опция, а базовое требование. Люди видят рекламу в телефоне и переходят на страницу с телефона. Если она неудобна, реклама работает впустую.

Адаптивность против отдельной мобильной версии

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

Первый экран на телефоне

На экране телефона помещается мало. Главное должно быть видно сразу, без прокрутки:

• заголовок, который читается без увеличения;
• короткий подзаголовок;
• кнопка действия;
• изображение, которое не занимает весь экран.

Частая проблема — на компьютере первый экран выглядит отлично, а на телефоне заголовок уезжает вниз под огромную картинку, и кнопку не видно.

Текст и шрифты

• Размер шрифта, который удобно читать без увеличения.
• Короткие абзацы: длинный текст на узком экране выглядит как стена.
• Достаточный межстрочный интервал.
• Контраст текста и фона, особенно при чтении на улице.

Кнопки и ссылки

Кнопки должны быть достаточно крупными, чтобы попасть по ним пальцем, и не стоять вплотную друг к другу. Телефон должен быть кликабельным, чтобы звонок начинался одним нажатием. Кнопка Telegram должна открывать приложение, а не веб-версию. Закреплённая внизу экрана кнопка связи удобна на длинных страницах.

Формы на телефоне

• Поля крупные, клавиатура соответствует типу поля: цифровая для телефона.
• Выпадающие списки и кнопки вместо ручного ввода.
• Сообщения об ошибках понятны и видны рядом с полем.
• После отправки — понятное подтверждение.

Скорость

Мобильный интернет бывает медленным, и тяжёлая страница грузится долго. Сжимайте изображения, не ставьте тяжёлое видео в фон первого экрана, уберите лишние скрипты и виджеты. Проверяйте скорость именно мобильной версии.

Как проверить свою страницу

1. Откройте лендинг на нескольких телефонах — с маленьким и большим экраном, на разных системах.
2. Откройте его по ссылке из рекламы внутри Instagram и Telegram: встроенные браузеры приложений иногда показывают страницу иначе, чем обычный браузер.
3. Пройдите весь путь: прочитайте, нажмите кнопку, заполните форму, отправьте.
4. Проверьте горизонтальную прокрутку: её не должно быть.
5. Используйте режим разработчика в браузере компьютера для быстрой проверки разных размеров, но не заменяйте им реальные устройства.

Мобильная версия и стоимость рекламы

Удобство страницы на телефоне влияет не только на заявки, но и на эффективность рекламы. Рекламные системы учитывают поведение посетителей после клика, а поисковые — качество посадочной страницы. Если люди массово уходят в первые секунды, алгоритм хуже находит тех, кто совершает целевое действие, и каждая заявка обходится дороже. Поэтому, если люди приходят из Instagram и Telegram, прежде чем менять креативы, стоит пройти страницу с телефона и убрать то, что мешает.

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

• Текст выходит за край экрана, появляется горизонтальная прокрутка.
• Всплывающее окно закрывает весь экран, и крестик не найти.
• Таблицы и сравнения не помещаются и не читаются.
• Видео в фоне грузится дольше, чем человек готов ждать.
• Форма в самом низу длинной страницы без кнопок перехода к ней.

Если хотите проверить, как ваш лендинг выглядит для людей из рекламы, напишите — протестируем на реальных устройствах и составим список правок.