Адаптивный сайт

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

Как выглядел сайт до нашей работы:

Перед новой главной страницей ставилось несколько задач:

1. Страницы сервиса и запчастей в старом дизайне были незаметны пользователю в верхнем меню. Нужно сделать их более заметными.

Мы приняли решение сделать меню со списком брендов продаваемых машин не таким большим, превратив его в «меню каталога товаров», добавив туда помимо машин важные бизнесу пункты «Сервис» и «Запчасти».

2. Переосмыслить и переделать блок с акциями, представленный как слайдер.

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

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

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

Мы придумали и реализовали блочную модель показа от одной до восьми акций по следующей схеме:

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

4. Блок записи на тест-драйв.

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

Страницу модели ждали ещё более разительные перемены:

1. Система управления контентом

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

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

2. Комплектации и цены 

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

3. Фотогалерея

Переделаны блоки с фотогалереей, преимуществами, техническими характеристиками автомобиля.

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

Перейти на сайт