Mobile development

Мобильная версия секс-шопа Orgazm.by

Задача: переделать полностью и оптимизировать мобильную версию сайта
Мобильная версия
секс-шопа Orgazm.by

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 баллов.

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

Страница оформления заказа в десктоп версии