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

Человек, которому нужен ремонт, нередко открывает сайт прямо в той квартире, где ремонт предстоит. Одной рукой он держит телефон, другой, возможно, рулетку. Экран маленький, интернет не всегда быстрый, времени мало. Ниже рассмотрим, какие части сайта бригады стоит перенастроить для такого посетителя.

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

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

Условный пример верха главной страницы:

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

Меню лучше свернуть в одну кнопку, а пунктов оставить 4–5: «Услуги», «Примеры работ», «Как мы работаем», «Контакты».

Как сделать звонок в одно касание

Если номер набран обычным текстом, часть телефонов его определит, а часть нет. Надёжнее оформить его ссылкой:

<a href='tel:+7XXXXXXXXXX' class='call-btn'>Позвонить: +7 (XXX) XXX-XX-XX</a>

Номер в ссылке пишут в международном формате, без пробелов и скобок. Кнопке нужна достаточная высота: палец крупнее курсора, и мелкая ссылка в тексте легко промахивается. Ориентир — высота не меньше 44–48 пикселей и свободное место вокруг, чтобы не нажать соседний пункт. Повторите кнопку внизу страницы и на странице контактов, чтобы за ней не приходилось прокручивать экран вверх.

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

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

<meta name='viewport' content='width=device-width, initial-scale=1'>

Дальше есть два пути. Адаптивная вёрстка через CSS media queries подстраивает один сайт под ширину экрана; адрес и содержимое остаются едиными, и править данные нужно в одном месте. Отдельная мобильная версия на своём адресе даёт больше свободы, но тогда телефоны, цены и список работ придётся обновлять дважды. Для небольшого сайта бригады обычно проще первый путь. Какой выбрать, зависит от того, на чём сделан нынешний сайт и сколько на нём страниц.

Цены и перечень работ без горизонтальной прокрутки

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

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

Фотографии работ: качество и вес

Фото «до» и «после» — главный довод для заказчика, но при медленном соединении тяжёлая галерея превращается в пустую страницу. Что стоит сделать:

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

Короткая заявка вместо длинной анкеты

Набирать текст на телефоне неудобно, поэтому каждое лишнее поле снижает шанс, что форму дослали до конца. Для первичной заявки обычно достаточно имени, телефона и необязательного поля «Что нужно сделать». Подберите тип поля: для номера — числовая клавиатура, для остального — обычная. Подпись над полем надёжнее, чем текст внутри него, который исчезает при вводе. После отправки покажите понятное сообщение, например: «Заявка получена, перезвоним в рабочее время». Если время ответа указано, обещайте только то, что бригада действительно выполняет.

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

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

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

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