Адаптация интернет-магазина Фактум под мобильные устройства

factum.ru

#BXSTYLE_0#

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

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

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

Все это в совокупности очень усложняет процесс адаптации сайта.

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

Нашими бэкенд-разработчиками верстка была внедрена в компоненты, обеспечив единое управление в административной панели, как мобильными, так и десктопными вариантами перечисленных элементов.

До

После

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

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