Сайт строительной компании нередко открывают не за рабочим столом, а на участке, в машине или во время разговора с подрядчиком. Человеку нужно быстро понять, чем вы занимаетесь, посмотреть примеры и связаться. Если на телефоне приходится растягивать текст пальцами, искать номер или ждать, пока загрузятся тяжёлые фотографии, обращение легко откладывается. Ниже описано, что проверить и изменить.
Какие задачи посетитель решает со смартфона
Начните не с вёрстки, а с перечня действий. Для строительного сайта обычно это: понять, какие работы вы выполняете и в каком регионе; посмотреть реализованные объекты; узнать порядок работ и от чего зависит стоимость; связаться. Для каждой ключевой страницы (услуга, портфолио, контакты) выпишите одно главное действие и проверьте, можно ли его выполнить на экране шириной около 360 пикселей без прокрутки в стороны и без увеличения.
Всё, что мешает этим действиям, на телефоне стоит сдвинуть вниз: длинную историю компании, перечень наград, большие декоративные баннеры.
Что разместить на первом экране страницы услуги
Первый экран на смартфоне очень ограничен по высоте, поэтому каждый элемент должен оправдывать своё место. Условный пример для страницы «Строительство каркасных домов»:
- заголовок: «Каркасные дома под ключ в [ваш регион]»;
- одна строка пояснения: что входит в работу (проект, фундамент, коробка, отделка) и на каких этапах участвует заказчик;
- две кнопки одна под другой: «Позвонить» и «Рассчитать стоимость»;
- ниже одно фото реального объекта, а не абстрактный рендер на всю высоту экрана.
Если ни кнопки, ни номера не видно без прокрутки, значит, фоновая картинка или слайдер занимают слишком много места. Уменьшите высоту блока и уберите автоматическую смену слайдов: на телефоне она отвлекает и тратит трафик.
Как показать портфолио, планировки и таблицы на узком экране
Именно здесь строительные сайты чаще всего ломаются. Проверьте несколько типичных мест:
- Галереи объектов. Фото должны листаться свайпом, а подписи (тип объекта, материал, что именно вы делали) оставаться читаемыми. Файлы лучше готовить в нескольких размерах, чтобы телефон не загружал снимок для большого монитора.
- Планировки и чертежи. PDF на двадцать страниц неудобен на смартфоне. Основные планировки выложите изображениями с увеличением по нажатию, а PDF оставьте как дополнительную загрузку.
- Таблицы комплектаций и этапов. Широкая таблица с пятью столбцами на телефоне превращается в мелкий шрифт или горизонтальную прокрутку. Замените её карточками или списком «параметр — значение».
- Отзывы и документы. Сканы лицензий и писем должны открываться в читаемом размере, а не мелкой миниатюрой.
Как сократить путь от интереса до обращения
Телефонный номер должен быть ссылкой, при нажатии на которую открывается набор номера. Адрес офиса или производственной базы лучше сделать ссылкой на карту. Рядом укажите часы работы, чтобы не приходилось искать их в подвале страницы.
В форме заявки оставьте только то, без чего вы не сможете начать разговор: имя, телефон и поле «Коротко о задаче». Для телефона задайте цифровую клавиатуру, поля сделайте достаточно крупными, а кнопку отправки заметной. Текст согласия на обработку данных и ссылка на него должны читаться и нажиматься на узком экране; его содержание согласуйте со своим юристом.
Если используете плавающую кнопку связи или баннер с cookie, проверьте, что они не закрывают форму, кнопки и подписи к фото.
Скорость и проверка на реальных устройствах
Фотографии объектов обычно самая тяжёлая часть сайта. Сожмите их, не размещайте видео с автозапуском в верхней части страницы, а изображения ниже первого экрана загружайте по мере прокрутки. Для оценки можно воспользоваться режимом эмуляции телефона в браузере и инструментом PageSpeed Insights, но ориентироваться стоит на понятные замечания, а не на одну оценку.
Эмуляция не заменяет реальную проверку. Откройте сайт на двух-трёх разных телефонах, желательно на не самом новом Android и на iPhone, в мобильной сети, а не только по домашнему Wi-Fi. Поверните экран в горизонтальное положение и пройдите путь от главной страницы до отправки заявки.
Короткий проверочный список
- Текст читается без увеличения, страница не прокручивается вбок.
- На первом экране видны название услуги, кнопка звонка и кнопка расчёта.
- Номер телефона и адрес нажимаются и открывают звонок и карту.
- Галереи листаются пальцем, подписи к фото читаются.
- Таблицы и планировки не обрезаются и не уменьшаются до нечитаемого размера.
- Форма короткая, поля удобно заполнять, кнопка не закрыта другими элементами.
- Фото сжаты, видео не запускается само, страницы открываются приемлемо в мобильной сети.
- Весь путь до заявки пройден вручную на реальном телефоне.
Такой аудит можно провести за один-два часа и составить по нему список доработок для подрядчика. Начните с страниц услуг и контактов: именно туда чаще всего ведут посетителей реклама и поисковые системы.
