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