Адаптивна верстка сайту на ModX
Про проект
Carpboat.ua – інтернет-магазин корабликів для підгодовування, що використовуються під час риболовлі. Сайт проекту заснований на CMS ModX і створювався більше 5 років тому, будучи зверстаний тільки для десктопної (широкоекранної) версії.
Зараз у більшості споживачів основним пристроєм є смартфони, тому будь-якому інтернет-магазину потрібна адаптація під мобільні екрани. Вона впливає не лише на зручність використання, а й на показники SEO: знижується кількість відмов, покращуються поведінкові фактори, зростають позиції сайту у пошукових системах.
Враховуючи все перераховане вище, ми приступили до впровадження адаптивності на існуючому сайті.
Особливості верстки
5 лет назад стандартом разметки страниц было повсеместное использование свойства float со всеми вытекающими последствиями: увеличивались затраты времени на поддержку и адаптацию для мобильных устройств. Так как мы решили сохранить дизайн десктопной версии, флоаты остались нетронутыми и используются как раньше. Однако для мобильной версии были имплементированы более современные технологии, в частности, флексы.
Стилизация сайта полностью проходила по каскаду, что исключало внедрение БЭМ без полной переработки CSS. В старом коде сплошь и рядом использовался флаг !important, что сейчас является антипаттерном. Мы переработали и обновили CSS, приведя его в соответствие с текущим руководством по стилю. Так как сайт небольшой, использование каскада практически не замедляет его работу.
Дрібні доопрацювання
Сайт мав хороші показники доступності, тому в цьому напрямі покращень майже не потрібно. Було лише кілька багфіксів, на кшталт додавання префікса «tel» у посилання з телефонним номером або додавання описів у порожні кнопки.
Основною JS-бібліотекою є jQuery, тому всю нову функціональність було впроваджено з її допомогою.
Результати
Ми пройшлися всіма сторінками сайту, повністю адаптувавши їх під мобільні пристрої. Тепер контент на сторінках перебудовується для лінійної подачі та адекватно відображається навіть на екранах з невеликою роздільною здатністю.
