Создание адаптивного сайта сети ресторанов «Перчини»

Заказчик: РМКонсалтинг, г. Новосибирск.

Задача: отображение сайта на всех популярных устройствах: от широкоформатных мониторов до смартфонов. Изменение информации на сайте в зависимости от выбранного города.

адаптивный сайт

Содержание кейса:

Отправная точка
Процесс
Техническая реализация
Подводные камни


Отправная точка

Заказчик пришел к нам с уже готовым дизайном для широкоформатных мониторов:

дизайн сайта


Процесс

Начали работу с подготовки макетов для планшетов и смартфонов. Так как основное меню на мониторах уже занимает 100% ширину, то для отображения на планшетах его пришлось свернуть, а основные информационные блоки сузить. Основная структура сайта на планшетах не изменилась:

адаптивная верстка для планшетов

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

адаптивный сайт


Техническая реализация

Сайт разработан на php фреймворке MV (CMF), поэтому реализовывать программную часть было одно удовольствие.

Сеть ресторанов Перчини представлена по всей России. Для удобства работы с сайтом определение города происходит автоматически по IP адресу компьютера, что позволяет нам подгрузить актуальную информацию для конкретного города, меню в том числе.

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

макет страницы меню

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


Подводные камни

Так как сайт основан не технологии адаптивного дизайна, значительно усложнило работу HTML верстальщика наличие большого количества мелких деталей на макетах: стрелочки, точечки, иконки и подобное. В адаптивной верстке это привело к увеличению срока отладки сайта и тестирования.

Ознакомиться подробнее с нашим предложением по созданию сайта для ресторанов и кафе.

29 Сентября 2015

Теги: Кейсы Разработка и создание сайта Адаптивный дизайн Horeca