Секреты правильного адаптивного дизайна от Bitlate

27 ноября 2015

Автор: Бикулов Антон

Здравствуйте, уважаемые читатели!

В предыдущей статье мы познакомили вас с Bitlate — интернет-магазином, который не так давно был представлен. Мы поделились основными идеями разработки, а теперь хотим рассказать подробнее, почему бо́льшую часть внимания уделили адаптивному дизайну.

Статистика

Ни для кого не секрет, что смартфоны и планшеты прочно вошли в нашу жизнь. Поиск информации в интернете сейчас чаще всего начинается именно с мобильного устройства. Любопытно, что 74% людей совершают покупку после поиска информации о товарах. Что это значит? Интернет-магазины, которые не поддерживают удобный просмотр с мобильного устройства, будут заведомо уступать конкурентам.

Решение

Ориентируясь на данные статистики, наша команда разработала дизайн, который не только стильно смотрится, но и с которым одинаково удобно работать на любом устройстве. Как? Все просто! Мы сделали для каждого разрешения свою страницу на 1200 px, 960 px, 720 px, 480 px и 360 px.

Главная страница

На смартфоне мы сделали «урезанную» страницу, оставляя для пользователя только самое необходимое. Планшетная версия доработана под взаимодействия touch. А блоки «Успей купить» и «Товар дня» выстраиваются в зависимости от ориентации устройства.

Каталог
Выбору товара с телефона не должно ничего препятствовать. Именно поэтому фильтр теперь открывается с помощью кнопки слева, что позволяет сохранить основную контентную область для просмотра товаров.

Карточка товара
Это лицо интернет-магазина. Но даже на небольших экранах все будет понятно и доступно. Хотите вернуться обратно в каталог? Просто нажмите на крестик справа!