Сайт торгового центра разрабатывали много лет назад, и с того времени его никто не адаптировал под мобильные устройства. Только обновляли контент, но техническая часть оставалась без изменений.
Задача
Сделать как можно быстрее адаптив для устройств с разным разрешением экранов, чтобы пользователям было удобно пользоваться сайтом. При этом важно было обойтись без полной переделки ресурса.
С какими сложностями столкнулись и как их устранили
При создании сайта были использованы старые технологии: float, абсолютное позиционирование и жестко заданные размеры. Чтобы адаптировать сайт под разные устройства, существуют разные подходы, например, мобильная версия, при которой создается отдельная копия.
Но такой вариант не лучшее решение, потому что:
- 2 отдельные версии (мобильная и десктопная) могут привести к дублированию контента, а это плохо для SEO;
- придется больше тратить средств, чтобы тестировать и обслуживать обе версии сайта;
- пользователь может запутаться в функциональности и дизайне между мобильной и десктопной версиями;
- важно правильно настроить перенаправления между версиями, чтобы пользователи всегда попадали на нужную;
- поисковые системы могут индексировать мобильную и десктопную версии сайта по-разному, а это может привести к снижению его видимости в результатах поиска;
- мобильная версия может быть оптимизирована только для определенных размеров экранов.
Backend — стек технологий:
PHP
Frontend — стек технологий:
HTML
CSS
JavaScript (JS)
jQuery
Ajax
Поэтому мы приняли современное решение — внедрить адаптивную верстку, которая включает в себя:
- Динамические единицы измерения (VW, DVW, VH, DVH).
- Медиазапросы, позволяющие применять разные стили в зависимости от характеристик устройства: ширина, высота, ориентация экрана и разрешение.
- Гибкие изображения и медиа. Например, видео масштабируются в зависимости от размеров экрана.
- Мобильный подход Mobile First. Т.е. стили сначала разрабатывали версию для мобильных устройств, а затем адаптировали под более крупные экраны с помощью медиазапросов. Это помогает сосредоточиться на важном контенте и функциональности для мобильных пользователей.
- Многоуровневое мобильное меню. Вместо длинного списка пунктов меню, которые сложно пролистывать на небольшом экране, пользователь видит основные категории и может последовательно раскрывать вложенные уровни.
При этом нам удалось также сохранить первоначальный стиль сайта.
Так сайт клиента выглядел на мобильных устройствах ДО наших работ
А вот так ПОСЛЕ (на скрине в качестве примера — версия iPhone 12 Pro)
А вот так выглядит многоуровневое мобильное меню
В итоге
Теперь пользователи могут без проблем пользоваться сайтом Skala-center.by на разных устройствах, узнавать об открытиях новых магазинов, акциях, новинках и др.
Что получает клиент от сайта с адаптивом, которого до этого не было:
- Улучшается пользовательский опыт. Пользователям удобно просматривать сайт на любом устройстве — от смартфонов до больших мониторов. Это снижает показатель отказов и увеличивает время пребывания на страницах.
- Повышается уровень репутации компании. Видно, что владельцам бизнеса не все равно, какой у них сайт и как им будут пользоваться посетители. Все-таки хороший цифровой имидж напрямую влияет на репутацию бренда и способствует привлечению новых клиентов.
Мы занимаемся разработкой сайтов с нуля на разных платформах, а также их обслуживанием и доработкой. За услугами вы можете обратиться к нам, оставив заявку — мы вернемся к вам с предложениями!
