Пользователь открывает мобильный лендинг в метро, видит текст, рассчитанный на монитор, и тянется пальцем в верхний угол экрана за кнопкой заявки. Палец не достаёт, вкладка закрывается. Аналитика покажет обычный отказ на первом экране, но причина в другом: лендинг спроектировали для десктопа и просто сжали под телефон.
Большая часть трафика на рекламный лендинг приходит со смартфонов: из соцсетей, мессенджеров, поиска на ходу. Если страница заточена под широкий экран и мышь, а не под палец и узкую ленту, конверсия падает ещё до того, как человек прочитал оффер. Проблема не в контенте и не в дизайне в целом, а в трёх конкретных вещах: куда дотягивается палец, сколько секунд страница грузится и сколько касаний нужно, чтобы оставить заявку.
Эта статья не про стоимость лендинга и не про выбор конструктора. Речь о том, как спроектировать мобильный лендинг так, чтобы он конвертировал трафик со смартфонов, а не просто одинаково выглядел на всех экранах.
Почему мобильный лендинг нельзя просто ужать с десктопа
Адаптивная верстка меняет ширину блоков, но не меняет логику восприятия. На десктопе человек видит страницу целиком и может сканировать её глазами за секунду. На смартфоне он видит один экран за раз и прокручивает вслепую, ожидая, что следующий блок ответит на следующий вопрос.
Когда лендинг просто сжимают, ломаются три вещи. Горизонтальное меню на пять пунктов превращается в гамбургер, и человек не видит, что на странице есть раздел с ценами. Фотография во всю ширину десктопного экрана на телефоне превращается в узкую полосу с обрезанным лицом. Текст, который на мониторе читался абзацами по три строки, на телефоне растягивается на десять строк и выглядит сплошной стеной.
Мобильный лендинг проектируют отдельно: сначала раскладка под узкий экран и одну колонку, потом её масштабируют вверх под десктоп, а не наоборот. Такой подход называют mobile first. Он меняет порядок работы: сначала решают, что человек увидит первым экраном с телефона, а остальное добавляют как дополнение для большого монитора.
Зона большого пальца: где ставить кнопки и меню
Когда человек держит телефон одной рукой, большой палец свободно достаёт только часть экрана. Нижняя треть и центр, зона лёгкого доступа. Верхние углы требуют перехвата телефона второй рукой, и часть пользователей на это просто не пойдёт: проще закрыть вкладку.
| Зона экрана | Доступность для большого пальца | Что размещать |
|---|---|---|
| Нижняя треть | Легко, без перехвата руки | Кнопка заявки, меню, форма |
| Центр экрана | Средне, нужен небольшой наклон пальца | Текст, карточки, фото |
| Верхние углы | Трудно, требуется перехват телефона | Логотип, второстепенные ссылки, юридическая информация |
Практический вывод: закрепите основную кнопку заявки внизу экрана так, чтобы она оставалась видимой при скролле, а верхнюю часть header сделайте компактной: логотип и телефон, без лишних пунктов меню. Цвет, текст и расположение кнопки отдельно разбирали в статье о том, как кнопки лендинга влияют на заявки.
Скорость загрузки: что тормозит мобильный лендинг
Мобильный интернет медленнее домашнего Wi-Fi, а телефон слабее десктопа по процессору. То, что грузится незаметно на мониторе, на смартфоне превращается в секунды ожидания, и человек уходит до того, как увидит оффер.
Google оценивает скорость страницы через три метрики Core Web Vitals. Largest Contentful Paint должен укладываться в 2,5 секунды: это время, за которое прогружается самый крупный видимый элемент, обычно заголовок или фото в первом экране. Interaction to Next Paint должен быть не больше 200 миллисекунд: это задержка между нажатием на кнопку и визуальным откликом страницы. Cumulative Layout Shift должен оставаться не выше 0,1: это показатель того, насколько элементы страницы прыгают при загрузке.
На мобильных лендингах эти метрики обычно портят три вещи: несжатое фото в шапке весом в несколько мегабайт, сторонние скрипты вроде виджетов чатов и пикселей аналитики, а также шрифты, которые подгружаются после текста и сдвигают макет. Решение не требует программиста: сжать изображения перед загрузкой, отложить подключение чатов и пикселей до клика или прокрутки, задать шрифту запасной вариант, чтобы текст не прыгал при подгрузке.
Подробный чек-лист по ускорению сайта на телефонах, с конкретными шагами про изображения, кэш и шрифты, собран в статье о мобильной оптимизации сайта.
Форма в одно касание: как сократить путь до заявки
Форма с десктопа, перенесённая на телефон без изменений, обычно требует имя, телефон, email, выбор услуги из выпадающего списка и галочку согласия. На мониторе это выглядит безобидно. На экране шириной семь сантиметров каждое поле это отдельный тап, отдельная клавиатура и отдельный шанс закрыть вкладку.
Правило для мобильного лендинга: одно обязательное поле, максимум два. Чаще всего это телефон, потому что заявку можно обработать без имени и почты. Остальные данные уточняют в разговоре.
- Кнопка и поле ввода не меньше 44 на 44 пункта на iOS и 48 на 48 dp на Android: это минимум, заданный гайдлайнами Apple и Google, чтобы палец не задевал соседний элемент.
- Тип клавиатуры соответствует полю: для телефона цифровая клавиатура через атрибут type tel, а не стандартная буквенная.
- Кнопка отправки остаётся видимой без скролла внутри формы, иначе человек не понимает, что можно отправлять.
- Автозаполнение из телефона включено, чтобы часть полей подставлялась сама.
Чем меньше полей и чем точнее размер кнопок под палец, тем выше доля тех, кто дошёл до конца формы, а не закрыл её на середине.
Первый экран: что человек должен понять до скролла
На десктопе первый экран, это широкая полоса с заголовком, подзаголовком, фото и кнопкой. На телефоне в тот же первый экран помещается заметно меньше контента, поэтому каждое слово в нём работает за троих.
Без скролла должно быть видно: что продают, для кого и что сделать дальше. Если заголовок десктопной версии занимает одну строку, на мобильном он часто растягивается на три, и под кнопку просто не остаётся места. Решение не в том, чтобы уменьшить кегль до нечитаемого, а в том, чтобы сократить сам текст заголовка для мобильной версии отдельно от десктопной.
Форму или кнопку заявки стоит продублировать на первом экране и ещё раз в конце страницы, а между ними держать её закреплённой внизу. Так человек, который прочитал страницу до конца, но не готов оставить заявку сразу, не будет листать назад в поисках кнопки.
Как собрать всю структуру лендинга от заголовка до итоговой формы, подробно разбирали в статье о посадочной странице, которая приносит заявки.
Шрифты, кнопки и отступы под маленький экран
Текст, удобный для чтения с расстояния полуметра на мониторе, на телефоне держат в руках на расстоянии тридцати сантиметров, и это другая задача верстки.
Основной текст на мобильном лендинге не стоит делать мельче 16 пикселей: при меньшем размере браузер на iPhone автоматически увеличивает масштаб страницы при фокусе на поле ввода, и верстка визуально ломается. Межстрочный интервал нужен шире, чем кажется привычным: палец и экран ближе к глазам иначе искажают восприятие плотного текста.
Отступы между блоками делают больше, а не меньше. На узком экране соседние кнопки и ссылки легко задеть пальцем по ошибке, если между ними меньше 8 пикселей свободного пространства. Это тот же принцип, что лежит в основе минимального размера кнопки: расстояние между кликабельными элементами защищает от случайного тапа.
Цвет кнопки и текста на ней должен держать контраст даже под прямым солнцем, когда человек смотрит в экран на улице, а не только в комфортной подсветке офиса.
Как проверить мобильный лендинг руками
Перед запуском рекламы лендинг стоит пройти вручную, а не только прогнать через автоматический анализатор скорости.
- Открыть страницу на реальном телефоне через мобильный интернет, а не Wi-Fi в офисе, и засечь, сколько секунд видно первый экран.
- Заполнить форму одной рукой, держа телефон большим и указательным пальцем, без подпорки второй рукой.
- Проверить, видна ли кнопка заявки без скролла и остаётся ли она доступной при открытой клавиатуре.
- Повторить на Android и iOS: клавиатуры, отступы безопасной зоны и масштабирование у них отличаются.
Такая проверка занимает пятнадцать минут и находит проблемы, которые не видны ни в макете, ни в отчёте о скорости: неудобный тап, съехавшую кнопку под клавиатурой, слишком мелкий чекбокс согласия.
Частые ошибки мобильного UX, которые режут конверсию
- Всплывающее окно с подпиской или скидкой перекрывает весь экран сразу при входе, а крестик для закрытия размером в несколько пикселей.
- Видео в шапке с автозапуском съедает трафик мобильного интернета и тормозит загрузку текста под ним.
- Выпадающее меню с десятком пунктов, скопированное с десктопной версии, вместо короткого списка из трёх важных ссылок.
- Форма из восьми полей, потому что на десктопе она «не перегружала» страницу.
- Текст кнопки «Отправить» вместо конкретного действия, например «Получить расчёт», из-за чего человек не понимает, что произойдёт после нажатия.
Каждая из этих ошибок по отдельности кажется мелочью. Вместе они складываются в разрыв между тем, сколько человек кликнули по рекламе, и тем, сколько дошли до формы.
Частые вопросы
Чем мобильный лендинг отличается от обычного адаптивного сайта
Адаптивный сайт меняет ширину блоков под размер экрана, но порядок контента и логика остаются той же, что на десктопе. Мобильный лендинг проектируют отдельно: с иным порядком блоков, укороченными заголовками, формой на одно-два поля и кнопкой в зоне большого пальца. Адаптивность решает задачу вместиться в экран, мобильный UX решает задачу конверсии именно со смартфона.
Какой размер кнопки удобен для нажатия пальцем
Apple рекомендует минимум 44 на 44 пункта, Google для Android, 48 на 48 dp. Это примерно от 9 до 12 миллиметров в физическом размере, независимо от плотности пикселей экрана. Кнопки меньше этого размера увеличивают число случайных нажатий на соседние элементы, особенно если человек держит телефон одной рукой на ходу.
Сколько полей должно быть в форме на мобильном лендинге
Чаще всего достаточно одного поля: номер телефона. Если нужна дополнительная квалификация заявки, добавляют второе поле, например имя или выбор услуги из короткого списка. Каждое дополнительное поле на узком экране увеличивает число касаний и шанс, что человек закроет форму на середине, не дойдя до кнопки отправки.
Как узнать, что мобильный лендинг грузится слишком медленно
Ориентир, метрики Core Web Vitals: LCP не больше 2,5 секунд, INP не больше 200 миллисекунд, CLS не выше 0,1. Их можно проверить бесплатно в PageSpeed Insights, указав адрес страницы. Если хотя бы одна метрика выходит за эти значения на мобильном срезе отчёта, часть трафика с рекламы уходит, не дождавшись загрузки.
С чего начать
Если лендинг уже запущен, начните с диагностики, а не с переделки дизайна.
- Откройте страницу с телефона через мобильный интернет и пройдите путь до заявки своим большим пальцем: станет видно, где кнопка не достаётся и где форма слишком длинная.
- Проверьте три метрики Core Web Vitals в PageSpeed Insights для мобильной версии и устраните то, что дальше всего от нормы: обычно это вес изображений или сторонние скрипты.
- Сократите форму до одного-двух полей и закрепите кнопку заявки внизу экрана так, чтобы она не исчезала при скролле.
- Соберите первый экран отдельно для мобильной версии: короткий заголовок, одна фраза о выгоде, кнопка без скролла.
Если разбираться с этим самостоятельно некогда, мобильный лендинг под смартфонный трафик с нуля или доработку текущей страницы делают в команде, которая занимается разработкой лендингов.
