Адаптивная версия сайта: почему без неё теряются заявки

Адаптивная версия - это когда один и тот же сайт сам перестраивает раскладку под ширину экрана: на компьютере три колонки, на телефоне одна. Разбираем, чем адаптив отличается от отдельной мобильной версии, в каких местах с телефонов чаще всего теряются заявки и как проверить свой сайт, не привлекая разработчика.

Что такое адаптивная версия сайта

Адаптивная версия сайта - это одна и та же страница, которая сама меняет раскладку под размер экрана: колонки встают друг под друга, меню сворачивается в кнопку, таблица получает горизонтальную прокрутку. Страница не уменьшается целиком, как лист бумаги, а пересобирается.

Делается это правилами, которые срабатывают на заданной ширине экрана, - их называют точками перелома: до 768 пикселей одна раскладка, шире другая. Адрес страницы при этом один, содержимое одно, править надо в одном месте.

Насколько это критично именно для вас - вопрос не веры, а одного отчёта. Откройте в Яндекс Метрике раздел «Технологии - Устройства» за последние три месяца и посмотрите долю смартфонов в визитах. В большинстве тематик услуг и розницы, которые проходят через нас, смартфоны дают не меньше половины визитов, но у вашего сайта цифра своя - смотрите её, а не среднюю по рынку.

Адаптив или отдельная мобильная версия

Это два разных решения одной задачи, и путаница между ними стоит денег. Отдельная мобильная версия - это фактически второй сайт по адресу вида m.site.ru (такой адрес называют поддоменом), со своим кодом и своим содержимым. Адаптив - один сайт, который умеет перестраиваться. Вёрстка, о которой дальше идёт речь, - это и есть тот слой работы, который отвечает за раскладку: где что стоит и как это ведёт себя на разной ширине.

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

Есть и третий вариант, самый частый и худший из всех: сайт свёрстан только под компьютер и на телефоне уменьшается целиком. Формально открывается, фактически по нему нечего нажать без увеличения двумя пальцами.

Где именно теряются заявки с телефонов

Заявки теряются не «из-за неудобства» вообще, а в конкретных точках. Почти все они повторяются из сайта в сайт.

• Горизонтальная прокрутка. Что-то одно не влезло по ширине - длинное слово, таблица, широкая картинка - и вся страница начинает уезжать в сторону. Человек не понимает, что произошло, и закрывает.
• Неработающее меню. Кнопка заказа в шапке на телефоне выталкивает иконку меню за край экрана. Меню физически нечем открыть, по сайту не перейти.
• Мелкие кнопки и ссылки рядом. Палец попадает не туда, куда целился. Рабочий минимум для области нажатия - около 44 пикселей по высоте, с просветом между соседними ссылками.
• Форма, которую неудобно заполнять. Пять полей вместо двух, поле телефона без цифровой клавиатуры, кнопка отправки под появившейся клавиатурой. Про это отдельно - в разборе формы заявки на сайте.
• Телефон не нажимается. Номер набран как обычный текст, без ссылки для звонка. На компьютере это незаметно, на телефоне человеку приходится запоминать цифры.
• Цена и главное предложение ушли вниз. На компьютере они в первом экране, на телефоне под ними оказались три картинки, и до сути нужно пролистать полэкрана.
• Долгая загрузка. Та же страница на мобильном интернете грузится дольше, а картинки для неё обычно никто не уменьшал. Как это связано с деньгами - в материале про скорость сайта и цену заявки.

Важно, что эти потери не видны в отчётах по позициям и по трафику. Визиты идут, показы растут, а обращений нет - и причину ищут в рекламе или в семантике. Смотреть надо туда же, куда смотрит клиент: в экран телефона.

Как проверить свой сайт за полчаса

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

1. Проведите по главной пальцем влево-вправо. Страница сдвигается - есть горизонтальная прокрутка, это дефект.
2. Нажмите иконку меню. Не видно или не открывается - дальше можно не идти, это самая дорогая поломка.
3. Пройдите путь клиента целиком: главная - услуга - цена - форма - отправка. Не просматривайте, а реально отправьте тестовую заявку.
4. Убедитесь, что она дошла туда, куда должна: в Telegram, на почту, в CRM.
5. Нажмите на номер телефона и на адрес почты - должны запуститься звонок и почтовый клиент.
6. Проверьте прайс и таблицы: если цифры обрезаны по краю и прокрутки нет, часть цен клиент не увидит.
7. Попросите знакомого пройти тот же путь на телефоне другой модели. Часть дефектов видна только на узких экранах или в одном браузере.

Дальше посмотрите цифры. В Метрике откройте отчёт по конверсиям и разбейте его по типу устройства: конверсия на смартфонах против конверсии на компьютерах. Если разница больше чем в полтора раза - дело почти наверняка в мобильном виде, а не в качестве трафика.

Что должно быть в нормальном адаптиве

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

Обязательный минимум

• Ни на одной ширине от 320 пикселей нет горизонтальной прокрутки.
• Меню открывается и закрывается, по нему доступны все разделы.
• Главное предложение, цена или вилка цен и кнопка действия видны без пролистывания.
• Отступы по краям не меньше 16 пикселей, текст не прилипает к границе экрана.
• Основной текст не мельче 16 пикселей, подписи не мельче 12.
• Телефон, почта и адрес - нажимаемые ссылки.
• Форма содержит минимум полей, у телефона цифровая клавиатура, кнопка отправки доступна при открытой клавиатуре.
• Картинки отдаются в размере под экран, а не компьютерными файлами на несколько мегабайт.

Что отличает хорошую работу от приемлемой

• Порядок блоков на телефоне пересобран под мобильный сценарий, а не просто сложен в одну колонку.
• Длинные таблицы превращаются в карточки или получают явный признак прокрутки.
• Есть постоянно доступная кнопка связи, которая не закрывает контент.
• Проверены планшеты и промежуточные ширины - дыра в районе 600-1000 пикселей встречается чаще всего.

Что спросить у исполнителя до оплаты

• На каких ширинах экрана вы проверяете результат и какие это устройства. Ответ «посмотрим в браузере» означает, что на живом телефоне не смотрели.
• Входит ли подготовка картинок под мобильный размер или их просто зальют как есть. Это самая частая скрытая доплата.
• Кто проверяет, что форма с телефона реально отправляется и заявка доходит до получателя. Если никто - проверять будете вы, уже на живых клиентах.
• Правятся ли мобильные дефекты после сдачи и сколько времени на это даётся. Фиксируйте срок в переписке, а не «по договорённости».
• Что будет с адресами страниц. Если предлагают отдельный мобильный сайт - спрашивайте, кто настроит переадресации и перекрёстные указания.

Чаще всего попадаются на двух вещах: принимают работу по скриншотам исполнителя вместо своего телефона и не проверяют отправку формы, потому что «на компьютере же работает». Обе проверки занимают пять минут и стоят ровно столько заявок, сколько их не будет.

Этот перечень стоит включать в приёмку сразу, а не вспоминать после запуска. Как это встраивается в работу над сайтом, мы описывали в материале про этапы разработки сайта под ключ.

Починить существующий сайт или переделывать

Не всякий мобильный дефект требует нового сайта. Разделите задачи по стоимости и решайте по порядку.

Практичный подход: сначала за несколько дней закрыть всё, что мешает отправить заявку - меню, прокрутку, форму, телефон. Эти правки окупаются сразу и не зависят от будущих планов. И только потом решать, нужен ли редизайн сайта или достаточно текущего.

Что может пойти не так и когда адаптив не поможет

Адаптивная вёрстка - не то, что само по себе приносит заявки. Она убирает препятствия. Если препятствие было не в ней, изменений вы не увидите.

• Нечего предлагать. Нет понятной цены, сроков и отличия от соседей. На телефоне это читается даже быстрее, чем на компьютере, потому что текста влезает меньше.
• Заявки некому обрабатывать. Удобный мобильный сайт увеличит число обращений, а не число проданного. Если обращения уже сейчас теряются в недозвонах, начинать надо не с вёрстки.
• Нет трафика. Удобство пустой страницы не измеряется. Сначала канал, потом шлифовка.
• Сломали то, что работало. После переделки на мобильном обычная ошибка - потерянный счётчик или форма, которая отправляет в пустоту. Обязательно отправьте тестовую заявку с телефона после каждой выкладки.
• Ждут результата от одной правки. Разница в конверсии видна на объёме визитов, а не на десяти. Если хочется сравнивать варианты честно, это делается через A/B тестирование на сайте.

И обратная ситуация: иногда сайт выглядит на телефоне приемлемо, а заявок нет из-за структуры - человек не находит свою услугу. Тогда адаптив ни при чём, разбираться нужно со структурой сайта услуг.

Проще всего держать в голове последовательность: есть ли трафик - доходит ли человек до предложения - может ли он физически отправить заявку - дошла ли она - взяли ли трубку. Адаптивная версия закрывает третий и четвёртый пункты. Остальные она не лечит, но без неё остальные бессмысленны.

Наши работы

Сайты, которые студия уже запустила

Четыре проекта N3MIROFF, которые можно открыть прямо сейчас и посмотреть, как они работают.

Агротех с ИИ

SkyFarm ↗

Редизайн сайта систем выращивания: первый экран с контейнерной фермой, схема работы из трёх шагов, карусель продуктов и экран приложения.

Сайт салона

ayvazzovsky.com ↗

Салон сложного окрашивания в Москве: онлайн-запись, видео работ, портфолио и команда. Переехал с Тильды на свой хостинг.

Онлайн-академия

ayvazzovsky.academy ↗

Видеоуроки колористики: каталог, посадочные страницы уроков, личный кабинет и промокоды.

Event-агентство

navsegda-event.ru ↗

НАВСЕГДА: корпоративы и конференции - услуги, кейсы, этапы работы и расчёт мероприятия.

Витрина магазина

Monkey Market ↗

Премиальная витрина магазина кроссовок с заказом в Telegram.

Разработка сайтов от 80 000 ₽ →Все работы студии

Услуги студии по теме: разработка сайтов под ключ и SEO-продвижение статьями.

Нужен сайт, который принимает заявки, а не просто существует?

Сделаем премиальный сайт на React за 1-2 недели от материалов, с заявками в Telegram или CRM.

Получить расчёт заявок →

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

Частые вопросы