Практический курс-гайд

Рост заявок

Фишек

Трафик с мобайла

Вы запустили рекламу, трафик идёт, но заявок с мобильных почти нет. Открываете сайт на телефоне и видите: текст мелкий, кнопка где-то в середине, надо прокручивать три экрана чтобы найти телефон. Это не проблема рекламы — это проблема мобильной версии.

По данным Google, 53% мобильных пользователей уходят с сайта, если он грузится дольше 3 секунд. А по данным Baymard Institute, недостатки мобильного UX — причина потери 67% заявок с телефонов. Это деньги, которые уже оплачены рекламой и просто выброшены.

Шесть исправлений в этом гайде — не теория. Это конкретные технические и дизайнерские решения, каждое из которых проверено на реальных проектах. Внедряйте по порядку — результат будет виден в первые 48 часов.

Адаптив — это не просто «уменьшить». Это перестройка структуры: блоки из двух колонок становятся одной, шрифты увеличиваются, кнопки растут под палец. Без этого всё остальное бесполезно.

Apple и Google рекомендуют минимум 44×44 пикселей для тач-элементов. Кнопки меньше этого размера — промахи пальцем, раздражение, потерянные заявки. На мобиле кнопка должна быть на всю ширину экрана.

Текст 12–13px на ПК версии на мобиле становится нечитаемым. Google автоматически снижает рейтинг страниц с мелким текстом. Минимум 16px для основного текста, 18–20px для подзаголовков.

Все грид-сетки должны перестраиваться: блок преимуществ из 3 колонок — в 1, карточки услуг из 2 — в 1. Если контент выходит за экран и появляется горизонтальный скролл — это критическая ошибка.

Плохо

Нет адаптива

ПК-версия двухколонная сетка сжата в мобильный экран. Текст нечитабельный, кнопки крошечные, надо горизонтально скроллить.

Хорошо

Адаптивная вёрстка

Одна колонка. Крупные шрифты. Кнопка на полный экран. Изображение на всю ширину.
Всё читается с первого взгляда.

Быстрая проверка: откройте сайт в Chrome → F12 → Ctrl+Shift+M → выберите iPhone. Если контент выходит за экран или появляется горизонтальная прокрутка — адаптив сломан. Это нужно исправить в первую очередь.

На мобиле человек держит телефон одной рукой. Большой палец удобно достаёт до нижней трети экрана. Зафиксированная кнопка внизу — это CTA в самом кликабельном месте на весь скролл.

«Рассчитать стоимость →» конвертирует в 2 раза лучше, чем «Оставить заявку». «Получить проект бесплатно →» лучше, чем «Подробнее». Кнопка должна отвечать: что получу за клик?

Кнопка высотой 36px на мобиле — промах пальцем в 30% случаев. Оптимум: 52–56px. Цвет должен контрастировать с фоном страницы — кнопка не должна «сливаться» при разных темах ОС.

Плохо

Кнопка в теле страницы

Кнопка между блоками.
При скролле уходит с экрана. Чтобы нажать — нужно возвращаться наверх или искать по странице.

Хорошо

Зафиксирована внизу

Кнопка зафиксирована внизу экрана. Видна при любом скролле. Большой палец достигает без усилий.
Один тап — заявка.

По данным исследования UX-лаборатории Nielsen Norman Group, нижняя треть экрана смартфона — зона максимальной досягаемости большого пальца при однорукой эксплуатации. Именно туда нужно поместить главный призыв к действию.

Когда меню уходит при скролле, исчезает телефон и кнопка «Заказать». Пользователь хочет позвонить на третьем экране, а контактов нет. Sticky-шапка решает это навсегда.

Плохо

Меню уходит

Шапка с телефоном и кнопкой исчезла при скролле. Чтобы позвонить, нужно вернуться в начало страницы.

Хорошо

Адаптивная вёрстка

Шапка зафиксирована: логотип + кликабельный телефон + кнопка. Видны всегда. Дополнительно — sticky-кнопка снизу.

Что должно быть в мобильной sticky-шапке: логотип (небольшой) + кликабельный номер телефона с тегом tel: + одна кнопка CTA. Высота шапки — не более 56px, чтобы не съедать экранное пространство.

Первый экран — то, что видно сразу после загрузки, без единого свайпа. Если кнопка не попадает в этот экран, большая часть посетителей её вообще не увидит. Особенно на маленьких экранах.

Длинный заголовок «съедает» место кнопки. Сокращайте до сути: не «Профессиональное изготовление кухонь под заказ в Москве», а «Кухня на заказ за 21 день». Короче = кнопка видна сразу.

Проверьте на iPhone SE (375px экран) — самый маленький из популярных. Если на нём кнопка не помещается — сокращайте подзаголовок или убирайте его с первого экрана мобильной версии.

Плохо

Кнопка за fold-линией

Слишком много текста. Кнопка ниже fold-линии при открытии не видна. Надо скроллить, чтобы найти.

Хорошо

Всё влезает в экран

Заголовок + подзаголовок (2 строки) + кнопка — всё умещается в первый экран. Никакого скролла не нужно.

Исследования показывают: 57% мобильных пользователей не скроллят дальше первого экрана, если не нашли ничего интересного сразу. Кнопка должна быть в зоне видимости при открытии — до любого взаимодействия.

Длинные абзацы на ПК версии — норма. На мобиле — это стена текста, которую никто не читает. Сокращайте до ключевых смыслов или используйте «Читать далее» для разворачивания.

«Наша компания основана в 2010 году и за более чем 14 лет успешной работы на рынке мебели на заказ мы накопили огромный опыт в изготовлении высококачественных кухонных гарнитуров, шкафов-купе, прихожих и другой корпусной мебели для жилых и коммерческих помещений любой сложности...»

Длинный абзац. На мобиле занимает 5–6 строк. Никакой конкретики. Читать никто не будет.

Кухня под ключ за 21 день — без переносов

Гарантия 3 года — на весь гарнитур

Цена фиксируется в договоре — ни рубля сверху

Три тезиса — три главных смысла. Читается за 5 секунд. Кнопка помещается в экран

Плохо

Стена текста

Огромный абзац текста. На маленьком экране читать сложно и лень. Пользователь пролистывает мимо.

Хорошо

Коротко и по делу

Только ключевые тезисы + ссылка «Читать далее» для тех, кто хочет больше. Кнопка видна сразу.

Правило мобильного текста: один абзац на мобиле — максимум 3 строки. Если больше — разбивайте на буллеты или используйте аккордеон «Читать подробнее». Весь вторичный контент скрывается по умолчанию.

8 карточек отзывов одна под другой на мобиле — это 2400px скролла только по блоку отзывов. Слайдер показывает один отзыв, второй чуть выглядывает — и страница остаётся короткой.

Длинная страница на мобиле = медленная загрузка + усталость от скролла. Пользователи просто не доходят до кнопки в конце. Слайдеры для отзывов, кейсов, фото работ и сотрудников — обязательный элемент мобильного UX.

Если следующий элемент слайдера чуть выглядывает с правого края — пользователь автоматически хочет свайпнуть. Это называется peek-эффект. Без него 40% пользователей не понимают, что можно свайпать.

Отзывы клиентов, кейсы и примеры работ, фото команды или производства, логотипы партнёров. Правило: если блок на мобиле занимает больше трёх карточек — это слайдер.

Добавьте индикатор прогресса — точки или счётчик. Пользователь видит сколько всего отзывов и понимает, что материала много. Это повышает доверие: «у них 8 отзывов, не только один».

Плохо

Cтопка карточек

Страница растянута на сотни пикселей. Пользователь скроллит мимо, не читая. Кнопка бесконечно далеко внизу.

Хорошо

Cлайдер

Один отзыв занимает фиксированную высоту. Второй чуть виден справа — приглашение свайпнуть. Страница компактная.

Откройте сайт на телефоне и пройдитесь по каждому пункту. Каждая галочка —
это реальные заявки, которые вы перестаёте терять.

Адаптивность и структура

Первый экран

Нет горизонтального скролла — контент не выходит за экран

Шрифт основного текста — не менее 16px

Все кнопки — не менее 44×44px, удобно нажимать пальцем

Двухколонные блоки — перестроены в одну колонку

Заголовок и кнопка CTA видны без скролла на экране 375px

Заголовок — не более 2 строк на мобиле

Кнопка CTA — с конкретной выгодой, не «Подробнее»

Навигация и CTA

Шапка зафиксирована — телефон и кнопка видны при скролле

Телефон в шапке кликабельный — тег tel: открывает звонок

Липкая кнопка снизу — зафиксирована при скролле

Контент

Длинные абзацы — сокращены или скрыты под «Читать далее»

Отзывы, кейсы, фото — в слайдере с peek-эффектом и индикатором

Генератор лидов — ИИ устанавливает виджет мессенджера и мобильное всплывающее окно на ваш сайт за 2 минуты. Адаптированы под маленькие экраны, не перекрывают контент. В 3 раза больше заявок с мобайла без увеличения рекламного бюджета

Бесплатный старт · Без кода · ИИ настраивает сам