Вы запустили рекламу, трафик идёт, но заявок с мобильных почти нет. Открываете сайт на телефоне — и видите: текст мелкий, кнопка где-то в середине, надо прокручивать три экрана чтобы найти телефон. Это не проблема рекламы — это проблема мобильной версии.
По данным Google, 53% мобильных пользователей уходят с сайта, если он грузится дольше 3 секунд. А по данным Baymard Institute, недостатки мобильного UX — причина потери 67% заявок с телефонов. Это деньги, которые уже оплачены рекламой и просто выброшены.
Шесть исправлений в этом гайде — не теория. Это конкретные технические и дизайнерские решения, каждое из которых проверено на реальных проектах. Внедряйте по порядку — результат будет виден в первые 48 часов.
✕ Плохо — нет адаптива
Десктопная двухколонная сетка сжата в мобильный экран. Текст нечитабельный, кнопки крошечные, надо горизонтально скроллить.
✓ Хорошо — адаптивная вёрстка
Одна колонка. Крупные шрифты. Кнопка на полный экран. Изображение на всю ширину. Всё читается с первого взгляда.
A
Минимальный размер кнопки на мобиле — 44×44px
Apple и Google рекомендуют минимум 44×44 пикселей для тач-элементов. Кнопки меньше этого размера — промахи пальцем, раздражение, потерянные заявки. На мобиле кнопка должна быть на всю ширину экрана.
B
Шрифт основного текста — не меньше 16px
Текст 12–13px на десктопе на мобиле становится нечитаемым. Google автоматически снижает рейтинг страниц с мелким текстом. Минимум 16px для основного текста, 18–20px для подзаголовков.
C
Две колонки на десктопе → одна на мобиле
Все грид-сетки должны перестраиваться: блок преимуществ из 3 колонок — в 1, карточки услуг из 2 — в 1. Если контент выходит за экран и появляется горизонтальный скролл — это критическая ошибка.
Быстрая проверка: откройте сайт в Chrome → F12 → Ctrl+Shift+M → выберите iPhone. Если контент выходит за экран или появляется горизонтальная прокрутка — адаптив сломан. Это нужно исправить в первую очередь.
По данным исследования UX-лаборатории Nielsen Norman Group, нижняя треть экрана смартфона — зона максимальной досягаемости большого пальца при однорукой эксплуатации. Именно туда нужно поместить главный призыв к действию.
✕ Плохо — кнопка в теле страницы Оставить заявку
↓ кнопка уехала при скролле
Кнопка между блоками. При скролле уходит с экрана. Чтобы нажать — нужно возвращаться наверх или искать по странице.
✓ Хорошо — зафиксирована внизу Кнопка зафиксирована внизу экрана. Видна при любом скролле. Большой палец достигает без усилий. Один тап — заявка.
!
Текст кнопки — конкретная выгода, а не «Отправить»
«Рассчитать стоимость →» конвертирует в 2 раза лучше, чем «Оставить заявку». «Получить проект бесплатно →» лучше, чем «Подробнее». Кнопка должна отвечать: что получу за клик?
!
Высота кнопки — не менее 52px, цвет контрастный
Кнопка высотой 36px на мобиле — промах пальцем в 30% случаев. Оптимум: 52–56px. Цвет должен контрастировать с фоном страницы — кнопка не должна «сливаться» при разных темах ОС.
Генератор лидов автоматически добавляет виджет мессенджера и попап прямо над вашей мобильной sticky-кнопкой.
Установить за 2 минуты → ✕ Плохо — меню уходит Шапка ушла вверх ↑ нет кнопки
Шапка с телефоном и кнопкой исчезла при скролле. Чтобы позвонить — нужно вернуться в начало страницы.
✓ Хорошо — шапка зафиксирована +7 999 000-00-00
Заказать
Рассчитать стоимость →
Шапка зафиксирована: логотип + кликабельный телефон + кнопка. Видны всегда. Дополнительно — sticky-кнопка снизу.
Что должно быть в мобильной sticky-шапке: логотип (небольшой) + кликабельный номер телефона с тегом tel: + одна кнопка CTA. Высота шапки — не более 56px, чтобы не съедать экранное пространство.
Исследования показывают: 57% мобильных пользователей не скроллят дальше первого экрана, если не нашли ничего интересного сразу. Кнопка должна быть в зоне видимости при открытии — до любого взаимодействия.
✕ Плохо — кнопка за fold-линией
↓ граница экрана
Оставить заявку
Слишком много текста. Кнопка ниже fold-линии — при открытии не видна. Надо скроллить, чтобы найти.
✓ Хорошо — всё влезает в экран
Рассчитать стоимость →
↓ граница экрана
Заголовок + подзаголовок (2 строки) + кнопка — всё умещается в первый экран. Никакого скролла не нужно.
A
Заголовок — максимум 2 строки на мобиле
Длинный заголовок «съедает» место кнопки. Сокращайте до сути: не «Профессиональное изготовление кухонь под заказ в Москве», а «Кухня на заказ за 21 день». Короче = кнопка видна сразу.
B
Подзаголовок — только если помещается с кнопкой
Проверьте на iPhone SE (375px экран) — самый маленький из популярных. Если на нём кнопка не помещается — сокращайте подзаголовок или убирайте его с первого экрана мобильной версии.
Правило первого экрана на мобиле: заголовок (макс. 2 строки) + подзаголовок (макс. 1–2 строки, опционально) + кнопка CTA. Всё остальное — ниже fold-линии. Проверяйте на устройствах с экранами 360–375px в ширину.
✕ Плохо — стена текста
Огромный абзац текста. На маленьком экране читать сложно и лень. Пользователь пролистывает мимо.
✓ Хорошо — коротко и по делу
Читать подробнее ↓
Получить расчёт →
Рассчитать стоимость →
Только ключевые тезисы + ссылка «Читать далее» для тех, кто хочет больше. Кнопка видна сразу.
✕ Плохо — лишняя нагрузка «Наша компания основана в 2010 году и за более чем 14 лет успешной работы на рынке мебели на заказ мы накопили огромный опыт в изготовлении высококачественных кухонных гарнитуров, шкафов-купе, прихожих и другой корпусной мебели для жилых и коммерческих помещений любой сложности...»
Длинный абзац. На мобиле занимает 5–6 строк. Никакой конкретики. Читать никто не будет.
✓ Хорошо — только факты - Кухня под ключ за 21 день — без переносов
- Гарантия 3 года — на весь гарнитур
- Цена фиксируется в договоре — ни рубля сверху
Три тезиса — три главных смысла. Читается за 5 секунд. Кнопка помещается в экран.
Правило мобильного текста: один абзац на мобиле — максимум 3 строки. Если больше — разбивайте на буллеты или используйте аккордеон «Читать подробнее». Весь вторичный контент скрывается по умолчанию.
Длинная страница на мобиле = медленная загрузка + усталость от скролла. Пользователи просто не доходят до кнопки в конце. Слайдеры для отзывов, кейсов, фото работ и сотрудников — обязательный элемент мобильного UX.
✕ Плохо — стопка карточек
Страница растянута на сотни пикселей. Пользователь скроллит мимо, не читая. Кнопка бесконечно далеко внизу.
✓ Хорошо — слайдер
Один отзыв занимает фиксированную высоту. Второй чуть виден справа — приглашение свайпнуть. Страница компактная.
A
Peek-эффект: следующая карточка виднеется на 20–30px
Если следующий элемент слайдера чуть выглядывает с правого края — пользователь автоматически хочет свайпнуть. Это называется peek-эффект. Без него 40% пользователей не понимают, что можно свайпать.
B
Что ставить в слайдер на мобиле
Отзывы клиентов, кейсы и примеры работ, фото команды или производства, логотипы партнёров. Правило: если блок на мобиле занимает больше трёх карточек — это слайдер.
C
Точки-индикаторы и счётчик «1 / 8»
Добавьте индикатор прогресса — точки или счётчик. Пользователь видит сколько всего отзывов и понимает, что материала много. Это повышает доверие: «у них 8 отзывов, не только один».
Пока вы внедряете слайдеры —
Генератор лидов уже дорабатывает мобильных посетителей виджетом мессенджера и умным попапом.
Установить за 2 минуты → Итог Чеклист мобильной версии: 12 пунктов перед запуском
Откройте сайт на телефоне и пройдитесь по каждому пункту. Каждая галочка — это реальные заявки, которые вы перестаёте терять.
Адаптивность и структура
- Нет горизонтального скролла — контент не выходит за экран
- Шрифт основного текста — не менее 16px
- Все кнопки — не менее 44×44px, удобно нажимать пальцем
- Двухколонные блоки — перестроены в одну колонку
Первый экран
- Заголовок и кнопка CTA видны без скролла на экране 375px
- Заголовок — не более 2 строк на мобиле
- Кнопка CTA — с конкретной выгодой, не «Подробнее»
Навигация и CTA
- Шапка зафиксирована — телефон и кнопка видны при скролле
- Телефон в шапке кликабельный — тег tel: открывает звонок
- Липкая кнопка снизу — зафиксирована при скролле
Контент
- Длинные абзацы — сокращены или скрыты под «Читать далее»
- Отзывы, кейсы, фото — в слайдере с peek-эффектом и индикатором