Интернет-магазин «Сырный сомелье». Мобильная версия

Следующим этапом разработки интернет-магазина «Сырный сомелье» стало создание мобильной версии, а точнее разработка адаптивного дизайна и вёрстки. Не секрет, что каждым днём растёт число использующих смартфон как для поиска информации в интернете, так и для покупок — а значит сайт просто обязан быть доступным для таких людей.
chesom-catalog-phone-dribbble-only

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

Меню

Категории товаров и страницы были вынесены в меню, открывающееся с помощью иконки «гамбургер», и разделены на две части. Выбор города тоже был помещён в верхнюю правую часть открывающегося меню. Список городов появляется поверх меню.

chesom-menu-phone-blog

Страница товара

Для планшетов и смартфонов было разработаны 2 вида страницы товаров. В версии для планшетов цена, выбор количества и кнопка «В корзину» вместе с названием товара остаются над фотографией, а в версии для смартфонов они опускаются под фотографию.

Версии страницы товара: для монитора → для планшета → для смартфона

 

product
catalog
catalog