Задача: переделать полностью и оптимизировать мобильную версию сайта
Tools are being used in this project
BOOTSTRAP
Верстка выполнена на основе Bootstrapa
WEBPACK
Использовался для более удобной работы, контроля версий и сборки
jQuery
Использовался для интерактивных элементов (например, меню)
OpenCart (old)
Для полноценной оптимизации вносился код в бэкэнд часть сайта
Photoshop
Для создания макета и работы с изображениями
Gallery
Few words about the project
Ужасный с точки зрения разработчика кейс - исправить чужой код. Во-первых, использовалась абсолютно устаревшая версия OpenCarta 1.5. Во-вторых, в эту и без того неактуальную CMS был внесен неподдерживаемый кривой говнокод. В результате чего большая часть работы сводилась к разбору и пониманию существующего кода.?
Бэкэнд?
Эта версия OpenCarta из коробки была очень страшна, а вдобавок разработчики испортили ядро самописом. Были изменены модели, контроллеры и роутинг. В итоге это приводило к тому, что на страницу каких-нибудь категорий грузились абсолютно все столбцы из БД, хотя отображались лишь пару вещей.?
В точке входа я прописал определение юзер-агента с помощью библиотеки mobile_detect и далее в контроллерах сделал разделение на десктоп и мобильную версию соответственно. Таким образом уже в контроллерах мы грузили только те данные, которые были действительно необходимы. А после этого view брался полностью отдельный, потому что править существующий код было невозможно и нецелесообразно.?
Фронтэнд?
Поскольку view был полностью отделен, это позволило мне сверстать шаблон с нуля. Были сделаны все страницы и это потребовало намного больше времени, но в результате дало свой результат.?
Было сделано slide-меню, карусель с категориями и прочие удобные для мобильных девайсов элементы.
Новое боковое менюСлайдер подкатегорий
Отмечу и такой момент: на сайте есть блок с категориями, у которых есть небольшик иконки...?
Слева категории имеют свои иконки...
Так вот эти иконки - это отдельные картинки. И вот так + 35 лишних запросов. Для мобильной версии я склеил эти иконки в одну и разделил бэкграундом.
В итоге показатель Google PageSpeed был изменен с 26 до 76 баллов.
И хочется сказать, что функция дизайнера с моей стороны была условна - все же дизайн имелся и от меня требовалось скорректировать техническую сторону работы сайта. При этом я отталкивался от десктопа. Другими словами: я не отвечаю за дизайн
