Сырный сомелье. Мобильная версия

Следующим этапом разработки интернет-магазина «Сырный сомелье» стало создание мобильной версии, а точнее разработка дизайна под смартфоны и планшеты и адаптивной вёрстки.

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

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

Меню

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

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

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

На телефонах название товара остаётся вверху — над фотографией, а цена, выбор количества и кнопка «В корзину» опускаются под фотографию.

Также трёхколоночный формат страницы для мониторов превращается в двухколоночный для планшетов и одноколоночный для телефонов.