Услуги

  • Сайты
  • Контент
  • Продвижение
  • Битрикс24
  • Приложения
Все услуги Оплата
Битрикс24
Все услуги Оплата

Поиск

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс

Адаптивная верстка сайта на ModX

О проекте

Carpboat.ua — интернет-магазин корабликов для прикормки, используемых во время рыбалки. Сайт проекта основан на CMS ModX и создавался более 5 лет назад, будучи свёрстан только для десктопной (широкоэкранной) версии.

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

Учитывая всё вышеперечисленное, мы приступили к внедрению адаптивности на существующем сайте.

Особенности вёрстки

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

01

/ 03

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

Стилизация сайта полностью проходила по каскаду, что исключало внедрение БЭМ без полной переработки CSS. В старом коде сплошь и рядом использовался флаг !important, что сейчас является антипаттерном. Мы переработали и обновили CSS, приведя его в соответствие с текущим руководством по стилю. Так как сайт небольшой, использование каскада практически не замедляет его работу.

Мелкие доработки

Сайт имел хорошие показатели доступности, поэтому в данном направлении улучшений почти не потребовалось. Было всего несколько багфиксов, вроде добавления префикса «tel» в ссылки с телефонным номером или добавление описаний в пустые кнопки.

Основной JS-библиотекой является jQuery, поэтому вся новая функциональность была внедрена с её помощью.

Результаты

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

01

/ 04

Также по результатам Mobile Friendly Test от Google сайт полностью оптимизирован и признан удобным для работы на мобильных устройствах.

Ваш сайт до сих пор не адаптивен?

Реализуем адаптивную верстку сайта или интернет-магазина на ModX или другом «движке» за 2-3 недели без остановки площадки. Свяжитесь с нами, чтобы узнать детали.

0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x