Мобильная версия сайта: где теряется половина клиентов
Вы смотрите на свой сайт на большом мониторе, а ваши клиенты — на экране шириной 375 пикселей, часто на ходу и на плохой связи. Разница между этими двумя опытами и есть та конверсия, которую вы теряете.
В большинстве ниш с телефонов приходит от 60 до 80 процентов трафика. При этом конверсия мобильной версии обычно в полтора-два раза ниже десктопной, и это считают нормой. Норма это только там, где мобильную версию никто не проектировал — её получили автоматически из десктопной.
Есть и вторая причина заняться этим всерьёз: поисковые системы оценивают сайт по мобильной версии. То, что не попало на маленький экран, для поиска фактически не существует.
Что ломается чаще всего
Первый экран занимает три прокрутки
На десктопе заголовок, подзаголовок, кнопка и картинка помещаются в один экран. На телефоне то же содержимое растягивается на три экрана, и кнопка оказывается там, куда доходят не все. Решение — отдельная вёрстка первого экрана для мобильных: короткий заголовок, одна строка пояснения, кнопка сразу.
Формы, которые невозможно заполнить
Мелкие поля, неправильные типы клавиатуры, отсутствие автозаполнения. Проверьте у себя: при нажатии на поле телефона открывается цифровая клавиатура, а на email — клавиатура с собакой? Если нет, вы теряете часть заявок на ровном месте.
Кнопки меньше пальца
Минимальный комфортный размер области нажатия — 44 на 44 пикселя, и между соседними кнопками нужен отступ. Ссылки, набранные подряд в строку, на телефоне превращаются в лотерею.
Всплывающие окна на весь экран
Попап, который на десктопе занимает четверть окна, на телефоне закрывает всё, а крестик оказывается за пределами видимой области. Поисковые системы это отдельно наказывают, а пользователи просто уходят.
Скорость: главный фактор на мобильных
На десктопе с проводным интернетом тяжёлая страница загрузится за секунду. На мобильном интернете в метро — за десять, и большинство посетителей до неё не доживёт. Ориентиры Core Web Vitals: LCP до 2,5 секунды, INP до 200 миллисекунд, CLS не выше 0,1.
- Изображения — главный источник веса: переводите в WebP, задавайте размеры под мобильный экран, включайте отложенную загрузку;
- Шрифты — не подключайте пять начертаний, если используете два;
- Сторонние скрипты — каждый чат, виджет и пиксель добавляет задержку; проверьте, все ли нужны;
- Видео на фоне — на мобильных отключайте, замените статичным кадром.
Проверять скорость нужно именно на мобильном профиле в PageSpeed Insights и на реальном устройстве при медленном соединении, а не на своём телефоне в офисном вайфае. Подробный разбор метрик — в материале про Core Web Vitals.
Чего на телефоне быть не должно
Горизонтальной прокрутки. Если страница ездит вбок — почти всегда виноват один элемент, который шире экрана: широкая таблица, картинка без ограничения ширины или блок с фиксированной шириной в пикселях.
Таблиц в десять колонок. На мобильном их либо превращают в карточки, либо помещают в отдельный контейнер с собственной прокруткой.
Меню, которое перекрывает контент и не закрывается. Проверьте, что бургер-меню закрывается по нажатию вне его области и по кнопке «назад» в браузере.
Текста мельче 16 пикселей. Мельче — и браузер на iOS будет масштабировать страницу при фокусе на поле ввода, ломая вёрстку.
Урезанного содержимого. Если часть текста в мобильной версии просто вырезана из кода «чтобы не мешала», поиск оценивает сайт по этой урезанной версии. Скрывать под аккордеон можно, удалять из разметки — нет.
Чек-лист: проверить свой сайт за 15 минут
| Проверка | Как делать | Что считается провалом |
|---|---|---|
| Скорость первого экрана | Открыть главную на мобильном интернете | Больше 3 секунд до заголовка и кнопки |
| Путь до заявки | Пройти весь маршрут: услуга → цена → форма → отправка | Хоть один шаг непонятен или неудобен |
| Доставка заявки | Проверить письмо и уведомление менеджера | Письмо в спаме или не пришло |
| Горизонтальная прокрутка | Провести пальцем вбок | Страница сдвигается |
| Клавиатуры в формах | Нажать на поля телефона и почты | Открывается обычная буквенная клавиатура |
| Размер кнопок | Попробовать нажать одной рукой на ходу | Промахи по соседним элементам |
| Узкий экран | Открыть на ширине 360 пикселей | Съезжает вёрстка, обрезаются кнопки |
Самый честный тест мобильной версии — попросить постороннего человека оставить заявку с телефона и молча смотреть, где он застрянет.
Мобильный трафик ведёт себя иначе
Разница не только в размере экрана. С телефона заходят в других обстоятельствах: в дороге, в очереди, между делами. Сессии короче, внимание рваное, вероятность вернуться позже выше. Это меняет требования к странице: содержание должно считываться кусками, а не читаться подряд.
Отсюда практические следствия. Абзацы короче, чем на десктопе: три-четыре строки вместо семи. Подзаголовки чаще — человек сканирует, а не читает. Ключевая информация не прячется за «показать ещё». Цена, адрес и телефон доступны без прокрутки в самый низ.
Отдельно стоит продумать, что происходит, когда человек возвращается. Если он ушёл с середины формы, а при возврате она пуста, заявка потеряна. Сохранение введённого в localStorage стоит пары часов работы и заметно поднимает конверсию на мобильных.
Способы связи должны быть мобильными
На телефоне логично звонить и писать в мессенджер, а не заполнять форму из шести полей. Номер должен быть кликабельной ссылкой, чтобы звонок начинался в одно касание. Кнопки WhatsApp и Telegram на мобильной версии часто собирают больше обращений, чем сама форма.
При этом не превращайте экран в гирлянду из плавающих кнопок: две-три точки контакта достаточно, остальное закрывает содержимое и раздражает.
Mobile first — не лозунг, а порядок работы
Проектировать сначала мобильную версию выгодно по простой причине: маленький экран не прощает лишнего. Если содержимое помещается и работает на 375 пикселях, на десктопе оно точно будет работать. Обратный порядок — «сожмём десктоп» — почти всегда даёт три экрана вступления и кнопку, до которой не долистывают.
С чего начать
Пройдите путь клиента со своего телефона и мобильного интернета: от объявления или поиска до отправленной заявки. Засеките время на каждом шаге и отметьте, где заминка. Мобильная версия — не уменьшенная копия сайта, а отдельный сценарий использования, и лечится он тоже отдельно.
Частые вопросы
Почему конверсия на мобильных ниже, чем на десктопе?
Чаще всего из-за трёх вещей: медленной загрузки, растянутого первого экрана и неудобных форм. Плюс сам контекст: с телефона заходят на ходу, сессии короче. Разрыв в полтора-два раза считается нормой только там, где мобильную версию не проектировали отдельно.
Какая ширина экрана считается минимальной?
Проверять стоит на 360–375 пикселях: это самые распространённые узкие экраны. Если на этой ширине нет горизонтальной прокрутки, кнопки не меньше 44 пикселей и текст читается без увеличения — базовые требования выполнены.
Нужна ли отдельная мобильная версия сайта?
Отдельный поддомен вроде m.site.ru сегодня почти не используют: это дублирование контента и двойная поддержка. Правильный путь — адаптивная вёрстка, спроектированная от мобильного экрана, где часть блоков перестраивается, а не просто сжимается.
Как проверить мобильную версию, если нет времени?
Пятнадцать минут и телефон: откройте главную на мобильном интернете, пройдите путь до заявки, отправьте её, проверьте, дошло ли письмо, и проведите пальцем вбок — страница не должна двигаться. Эти пять действий находят большинство проблем.
Влияет ли мобильная версия на позиции в поиске?
Да, напрямую: поисковые системы оценивают сайт по мобильной версии. Если часть содержимого на телефоне вырезана из кода, поиск её просто не увидит. Скорость мобильной версии тоже входит в факторы ранжирования.
Что делать с большими таблицами на телефоне?
Либо перестраивать их в карточки, где каждая строка становится блоком «параметр — значение», либо помещать таблицу в контейнер с собственной горизонтальной прокруткой. Чего нельзя — оставлять таблицу шире экрана: она тащит вбок всю страницу.
