Почему мобильный важнее десктопа
По Яндекс.Радару, средний сайт в 2026 году получает 68-78% трафика с мобильных устройств. В нишах B2C (красота, услуги локальные, еда, бьюти) цифра доходит до 85-90%. Это значит, что если мобильная версия лендинга работает плохо, вы теряете не “часть” аудитории, а основную её массу.
Частая ошибка: “мы проверили на десктопе, выглядит хорошо, мобильная версия сверстается автоматически”. Не сверстается. Автоматический адаптив от Tilda или WordPress это механическое сжатие десктопной сетки до 320 пикселей. Большая часть блоков ломается или становится неудобной.
Ниже 15 ошибок, которые вижу в 70% присланных на аудит лендингов. Каждую разбираю с тем, как её починить.
1. Мелкие кликабельные элементы
Минимальный размер кнопки или ссылки на мобильном 44x44 пикселя. Это требование iOS HIG и Material Design, а также здравого смысла - средняя ширина пальца 9-11 мм.
Если кнопка меньше 40x40, 15-30% кликов промахиваются. Посетители начинают попадать по соседним элементам, нервничают, закрывают вкладку.
Как починить. В CSS добавить min-height: 48px; min-width: 48px; для всех интерактивных элементов на мобильном. Тестировать реальным пальцем, не курсором.
2. Текст меньше 14 пикселей
В 2026 году минимальный размер основного текста 16 пикселей. 14 пикселей это мелко, 12 - нечитаемо. На мобильном экране 375px ширины 16px это оптимум.
Заголовки H1 на мобильном 24-32 пикселя, H2 20-26, H3 18-22. Основной текст 16-18, подписи 14.
Как починить. В CSS через медиа-запросы переопределить размеры для экранов до 768px. Тестировать на реальном телефоне без увеличения масштаба.
3. Горизонтальный скролл
Классика провала. На десктопе всё помещается, на мобильном какой-то блок выходит за пределы экрана, и страница начинает скроллиться вбок.
Причина обычно одна: фиксированная ширина в пикселях у какого-то элемента (width: 1200px). На мобильном этот элемент становится шире экрана и сдвигает всё остальное.
Как починить. Проверить в DevTools через эмуляцию мобильного, overflow-x: hidden на body не решение проблемы, а её маскировка. Искать элемент с фиксированной шириной и менять на max-width или проценты.
4. Формы с множеством полей в одну колонку
На десктопе форма в две колонки выглядит компактно. На мобильном те же поля в две колонки становятся шириной 160px и текст в них перенос. Пользователь не может нормально заполнить.
Как починить. На мобильном все поля формы в одну колонку, на всю ширину экрана. Это базовое правило.
5. Клавиатура закрывает кнопку отправки
Пользователь заполняет форму, клавиатура выезжает и закрывает кнопку “Отправить”. Он думает, что кнопки нет, и уходит. Особенно часто встречается в финальных CTA.
Как починить. Разместить кнопку СНАД формой, а не сбоку или ниже. Или использовать sticky-кнопку, которая всегда видна.
6. Меню-гамбургер без индикации раздела
Мобильное меню часто скрывается в иконку гамбургера. Пользователь не понимает, на какой странице находится, потому что активный пункт не подсвечен в закрытом меню.
Как починить. Показывать текущий раздел рядом с иконкой меню, либо использовать хлебные крошки в верхней части страницы.
7. Нет sticky-CTA на мобильном
Посетитель проскроллил 10 экранов, увлёкся чтением, хочет кликнуть. Ищет кнопку наверху, её нет. Скроллит вниз, находит только через 2-3 экрана. Потеряно 3-5 секунд, часть людей просто закрывает вкладку.
Как починить. Фиксированная sticky-плашка внизу экрана с основным CTA (WhatsApp, Telegram, звонок). Появляется после 2-3 экранов скролла.
8. Тяжёлые фото и видео
Десктопное фото 1920x1080 весит 300-500 КБ. На мобильном это же фото подтягивается целиком, хотя экран показывает его в 400 пикселей шириной. Трафик тратится зря, страница грузится 4-6 секунд.
Как починить. Использовать srcset для отдачи разных размеров фото под разные экраны. Мобильное фото 750x400 весит 50-100 КБ. Разница в 5 раз.
9. Автозапуск видео со звуком
На мобильном это почти всегда провал. Посетитель сидит в общественном транспорте, открывает лендинг, из телефона начинает орать видео. Он закрывает вкладку раньше, чем успевает найти кнопку выключения звука.
Как починить. Видео только без звука, атрибут muted, автоплей опциональный. Или вообще без автоплея, только по клику.
10. Таблицы без горизонтальной прокрутки
Таблица с 5 колонками на десктопе выглядит нормально. На мобильном она либо выходит за экран (см. ошибку 3), либо сжимается до нечитаемого.
Как починить. Обернуть таблицу в <div style="overflow-x: auto">, тогда она получит горизонтальную прокрутку внутри своего контейнера. Либо на мобильном перестраивать таблицу в список карточек.
11. Всплывающие окна
Pop-up со скидкой, который перекрывает весь экран на мобильном без видимой кнопки закрытия. Это прямое нарушение рекомендаций Google, за это понижают в мобильном поиске.
Как починить. Либо убрать попапы на мобильном совсем, либо делать их с крупной кнопкой закрытия (48x48 минимум) в углу. Появление через 20-30 секунд, а не сразу.
12. Неправильные input-типы
Поле “телефон” имеет тип text. Пользователь на мобильном получает стандартную клавиатуру с буквами, цифры набирать неудобно. Аналогично для email, даты, URL.
Как починить.
type="tel"для телефона.type="email"для email.type="number"для цифровых данных.type="date"для дат.inputmode="numeric"там, где нужна только цифровая клавиатура.
Разница в удобстве заполнения формы в 2-3 раза.
13. Отсутствие feedback после нажатия
Пользователь нажал на кнопку, ничего не изменилось. Он не понимает, засчиталось ли нажатие. Жмёт ещё раз, получает дубль заявки.
Как починить. CSS-псевдокласс :active с лёгким изменением цвета или размера. Либо мгновенный loader после клика. Время отклика должно быть до 100 мс.
14. Длинные заголовки
Заголовок, который на десктопе умещается в одну строку, на мобильном переносится на 3-4 строки. Если это заголовок первого экрана, он занимает весь первый экран, а оффер и кнопка улетают ниже.
Как починить. Короткие заголовки (до 7-9 слов) как основной вариант. Более длинные формулировки в подзаголовок, там перенос менее критичен.
15. Неотзывчивые блоки с сеткой
Блоки “3 колонки преимуществ” или “4 шага процесса” сверстаны в CSS Grid на 3 или 4 колонки жёстко. На мобильном три колонки по 120 пикселей это нечитаемо.
Как починить. Медиа-запросы, которые переводят сетку в 1 или 2 колонки при ширине экрана меньше 768px. Либо grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)), что даёт автоматическую адаптацию.
Чек-лист перед запуском
Когда лендинг готов, пройдите 6 тестов на реальных устройствах.
| Проверка | Что делать |
|---|---|
| Тест на iPhone | Откройте лендинг в Safari на iPhone любой модели последних 3 лет |
| Тест на Android | Откройте в Chrome на Android 12-14 |
| Проверка форм | Заполните форму целиком пальцем, не курсором |
| Скорость | PageSpeed Insights, раздел Mobile, цель 85+ |
| Скролл | Проскроллите всю страницу, нет горизонтального сдвига |
| Возврат | Нажмите “Назад” в браузере, страница корректно восстанавливается |
Это 20-30 минут работы. Пропускать нельзя, потому что десктопный просмотр не показывает 80% мобильных проблем.
Вывод
Мобильная версия лендинга это не автоматическое сжатие десктопной, а отдельная проработка. 15 перечисленных ошибок встречаются в 7 из 10 аудитов. Починка каждой занимает от 10 минут до часа, общая переработка мобильной версии лендинга 3-6 часов. Рост конверсии после починки обычно 25-50 процентов.
Смежные материалы: Адаптивная вёрстка лендинга: почему сжатая версия не мобильная, Скорость загрузки лендинга: как ускорить и Формы заявок на лендинге: сколько полей оставить.
