Адаптив, который конвертит: как сайт должен работать с телефона

UX/UI Design
Programming
SEO & SMM
Development
Форма на сайте ничего не стоит, если заявка оседает в почте, чате или «потом занесём». CRM нужна, чтобы каждое обращение стало карточкой с ответственным и статусом.
Если мобайл неудобен, десктопный дизайн не спасает

Большая часть решений — с телефона, не с макета 1440

Человек с Директа или карт открывает страницу в транспорте, одной рукой, на 4G. Три секунды белого экрана, кнопка под чатом, поля формы обрезаны — вкладка закрыта. На десктопе тот же сайт может выглядеть «премиально» и собирать отказы именно с смартфона. В разработке мобильную версию закладывают в прототип и вёрстку, не «потом подожмём». Сжатые изображения, форма без лишней перезагрузки, телефон в шапке снаружи бургера — это конверсия, не украшение. Поиск тоже смотрит мобильную доступность: узкий экран и скорость входят в оценку страницы.
Первый экран: оффер и CTA без прокрутки «в поисках кнопки»
Палец попадает в кнопку и в поле, не в соседнюю ссылку
Форма короткая, клавиатура не закрывает «отправить»
Страница открывается быстро, картинки не весят как фотосессия
подробнее о нашем кейсе
Проверять адаптив нужно сценарием заявки, а не скриншотом главной в Figma.
Шапка, герой, форма, скорость

Что должно работать на узком экране

Меню сворачивается, но контакт и действие не прячутся безвозвратно: звонок и заявка остаются в зоне большого пальца. Герой не отдает весь экран слайдеру и видеофону. Карточка товара и корзина — те же шаги, что на десктопе, без «версии для ПК».
Текст читается без горизонтального скролла. Кнопки не 24 px «как в макете». Клики по номеру — tel:, не картинка телефона. Если чат перекрывает CTA, его сдвигают или откладывают загрузку: виджет не важнее заявки.
структура
01. Шапка: лого, звонок, заявка, затем бургер
н1
02. Герой: H1, одно действие, без карусели на весь экран
форма заявки
03. Форма и корзина: крупные поля, видимая кнопка
скорость
04. Скорость: сжатие, кэш, без тяжёлого автовидео
Приоритет блоков на 375 px другой

Не «сжать десктоп», а собрать путь заказа

мощный старт с гарантией качества

Что поднять вверх

Оффер, цена или порядок цены, кнопка, телефон, короткое доказательство. На услуге — зачем вы и что будет после заявки. В магазине — цена, наличие, «в корзину», доставка. Всё, без чего нельзя решить, не уезжает под три экрана «о компании».

мощный старт с гарантией качества

Что можно ниже или убрать с первого экрана

Длинные слайдеры, карты на весь viewport, декоративные видео, мегаменю, квиз из десяти шагов без короткой формы рядом. Десктопные ховеры («наведите, чтобы увидеть цену») на телефоне не работают — состояние должно быть явным по тапу.

Влезло в ширину — и всё равно не покупают

Где мобайл убивает заявки

01.
CTA под виджетом чата
Закрыть чат, чтобы нажать «заказать». Часть не закроет.
02.
Бургер съел телефон
Ищут, как позвонить, уходят в выдачу.
03.
Форма с мелкими полями и капчей
Ошибка, зум, повторный ввод. Бросают.
04.
Горизонтальный скролл и обрезанный H1
Не адаптив, а уменьшенный десктоп.
05.
Тяжёлые фото в галерее
Карточка не догружается — нет корзины.
06.
Разные офферы: ПК одно, телефон другое
Скрыли цену «чтобы влезло». Скрыли и конверсию.
Пошаговый процесс

Как внедрить, чтобы перестало теряться

Шаг №1
01.

Пройти путь сами

Реклама или поиск → первый экран → форма или корзина. Сеть не только Wi‑Fi.
Шаг №2
02.

Зафиксировать зоны пальца

Что всегда на экране: звонок, заявка, корзина. Чат не перекрывает.
Шаг №3
03.

Сжать медиа и проверить скорость

Мобайл в PageSpeed и живой заход. Картинки под ширину экрана.
Шаг №4
04.

Собрать форму под клавиатуру

Тип поля tel, мало обязательного, кнопка видна.
Шаг №5
05.

Сверить Метрику

Доля мобайла, отказ, заявки с телефона vs десктоп. Если визиты с телефона, а заявки с ПК — ломается именно узкий сценарий.

Часто задаваемые вопросы

01.Отдельная мобильная версия m.site — нужна?

Обычно нет. Один адаптив проще для SEO, форм и правок. Два сайта — две дыры в контенте и метках.

02.Достаточно ли «хорошо выглядит в инспекторе Chrome»?

Нет. Нужен живой телефон: клавиатура, чат, тап, медленная сеть. Инспектор не показывает палец и перекрытие виджетов.

03.Нормально ли прятать меню в «бургер» (три полоски) на телефоне?

Да, если звонок и заявка не спрятаны только внутри него. На услугах контакт снаружи важнее пункта «о нас».

04.Адаптив влияет на позиции?

Да, через удобство и скорость на мобайле. Плюс поведение: отказ с телефона бьёт и по заявкам, и по сигналам для поиска.

05.Нужны ли отдельные тексты для мобильной версии?

Не второй сайт. Нужна другая иерархия: короче первый абзац, раньше CTA, таблицы — скролл или карточки, не мелкий десктоп.

Остались вопросы?
Отвечаем на заявки за 15 минут