Послуги

  • Сайти
  • Контент
  • Просування
  • Бітрікс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 тижні без зупинки майданчика. Зв'яжіться з нами, щоб дізнатися деталі.