Как подготовить сайт установщика кондиционеров к просмотру с телефона

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

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

Первый экран — это то, что видно без прокрутки, обычно около 600–700 пикселей по высоте. Возьмём условную страницу «Установка сплит-системы». На первом экране нужны пять элементов:

• заголовок с услугой и городом: «Установка сплит-системы в [ваш город]»;
• одна строка об условиях: «Мастер приедет на замер, затем согласуем день монтажа»;
• кнопка «Позвонить» с номером;
• кнопка «Рассчитать монтаж», ведущая к короткой форме;
• район или города, где вы работаете.

Крупный баннер с кондиционером на весь экран, слайдер и длинное приветствие из первого экрана лучше убрать. Они не отвечают на вопросы посетителя: «Вы работаете у меня?» и «Как с вами связаться?».

Кнопки связи: чтобы нажималось с первого раза

Номер телефона должен быть ссылкой вида tel:+7XXXXXXXXXX, тогда по нажатию откроется набор номера. Проверьте это на реальном телефоне: в шапке, в подвале и на странице контактов. Если у вас есть WhatsApp или Telegram, добавьте отдельные кнопки. В сезон жары многим проще написать фото помещения, чем объяснять по телефону.

Кнопки делайте высотой не меньше 44–48 пикселей и с отступами между ними, чтобы палец не попадал в соседнюю. Закрепите кнопку «Позвонить» внизу экрана, если она не перекрывает текст и форму. Всплывающие окна с предложением заказать обратный звонок сразу после загрузки на телефоне часто закрывают содержимое. Лучше показывать их только после прокрутки или отказаться от них.

Форма заявки: сколько полей нужно для расчёта монтажа

Для первичной заявки достаточно трёх полей: имя, телефон и район или адрес. Остальное уточнит менеджер. Если нужны данные о помещении, сделайте их необязательными: тип помещения (квартира, дом, офис), примерная площадь, есть ли уже купленный кондиционер.

• для телефона используйте тип поля tel, чтобы открывалась цифровая клавиатура;
• подписи оставляйте над полями, а не только внутри них: подсказка исчезает, когда человек начинает вводить текст;
• сообщение об ошибке пишите рядом с полем, например «Введите номер полностью, с кодом оператора»;
• после отправки покажите понятный текст: что дальше и когда ждать звонка. Не обещайте точное время, если не уверены, что успеете.

Как показать состав работ и цены без широких таблиц

Таблица на пять колонок на экране телефона либо мелкая, либо прокручивается вбок. Замените её карточками, расположенными друг под другом. Условный пример карточки:

• Монтаж стандартной сплит-системы
• Что входит: установка внутреннего и наружного блоков, прокладка трассы до заданной длины, подключение, проверка работы;
• Что оплачивается отдельно: дополнительные метры трассы, штробление, выход на высоту, вывоз мусора (укажите только то, что действительно так у вас);
• Стоимость: «от …» или «рассчитаем после замера», в зависимости от вашей политики.

Главное — не скрывать от посетителя, от чего зависит итог. Если цена зависит от длины трассы, этажа и материала стен, скажите об этом прямо.

Что замедляет страницу и как это проверить

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

• уменьшите фотографии до размера, в котором они реально показываются на телефоне;
• включите отложенную загрузку для изображений ниже первого экрана;
• вместо встроенного видео поставьте картинку-превью, а само видео загружайте по нажатию;
• оставьте один виджет связи вместо трёх;
• проверьте главную и страницу услуги в Google PageSpeed Insights и посмотрите на рекомендации для мобильной версии.

Проверочный список перед запуском правок

Откройте сайт на двух разных телефонах, лучше на Android и iPhone, и пройдите путь клиента от главной страницы до заявки.

• В настройках страницы задан viewport, текст читается без увеличения.
• Нет горизонтальной прокрутки ни на одной странице.
• Телефон нажимается и набирается в один тап.
• Кнопки не перекрывают текст и друг друга.
• Форма отправляется, а заявка доходит менеджеру: проверьте на тестовом обращении.
• На первом экране видны услуга, город и способ связи.
• Цены и состав работ читаются без таблиц с прокруткой.
• Страница открывается без долгого ожидания при медленном соединении.

Начните с главной страницы и страницы самой востребованной услуги, обычно это монтаж сплит-системы. После исправлений повторите проверку: так проще заметить, какие изменения помогают клиентам оставлять заявки.

Все статьи блога