17.01.2018

Адаптация сайта «Авторос» под мобильные устройства

avtoros.info

Мы провели полномасштабную адаптацию официального сайта компании Авторос. Сайт представляет собой обширный информационный портал, посвящённый продукции и событиям из жизни компании, одним из разделов сайта является полноценный интернет-магазин, так же имеется два раздела-лендинга подробно описывающие машины производителя, каждый из которых имеет свой уникальный конфигуратор для онлайн подбора комплектации и заказа вездхода.

Портал был полностью разработан нашей компанией (подробнее об этом можно узнать в разделе "Разработка сайтов" нашего портфолио) и изначально создавался в соответствии с актуальными веб-тенденциями, что значительно упрощает последующую адаптацию страниц.

До

После

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

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

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

Только после этого началась непосредственная адаптация контента страниц для мобильных устройств.

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

До

После

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