Эваком

Компания Evacom занимается эвакуацией автомобилей в Москве и Подмосковье: буквально спасает сломанные или попавшие в ДТП машины.

Задачи:
1. Сделать акцент на удобстве пользования сайтом с мобильного телефона и планшета.
2. Продумать размещение текстового контента так, чтобы он не мешал пользователю и в то же время работал на оптимизацию сайта под поисковые системы.

Решение

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

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

Главная задача, которую решают внутренние страницы — оптимизация для поисковых систем. Предполагается, что сайт будет регулярно обновляться, предусмотрено размещение большого объема текстового контента — всё это поможет сервису закрепиться в топовых позициях поисковых выдачей.

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

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

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

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