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

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

Ready.KZ: Готовые сайты

27 ноября 2015
Описание
Здравствуйте, уважаемые читатели!
В предыдущей статье мы познакомили вас с Bitlate — интернет-магазином, который не так давно был представлен. Мы поделились основными идеями разработки, а теперь хотим рассказать подробнее, почему бо́льшую часть внимания уделили адаптивному дизайну.
Статистика
Ни для кого не секрет, что смартфоны и планшеты прочно вошли в нашу жизнь. Поиск информации в интернете сейчас чаще всего начинается именно с мобильного устройства. Любопытно, что 74% людей совершают покупку после поиска информации о товарах. Что это значит? Интернет-магазины, которые не поддерживают удобный просмотр с мобильного устройства, будут заведомо уступать конкурентам.

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

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


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


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


Корзина
Процесс заказа — самое важное. Ничто не должно помешать пользователю сделать выбор.
bitlate_responsive_cart.jpg


Личный кабинет
Удобно пользоваться на любом устройстве.
bitlate_responsive_profile.jpg

Заказать с мобильного не сложнее, чем с компьютера! Спасибо за внимание и успешных продаж!
Смотрите наше решение подробнее в категориях:


Вам нужна консультация?

Можете связаться с нами удобным удобным способом