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