Адаптивный дизайн интернет-магазина для повышения конверсии

Адаптивные интернет-магазины становятся нормой — кто не «адаптировался», тот потерял значительную часть потенциальных клиентов.

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

Адаптивный дизайн — способ проектирования сайтов (в частности, интернет-магазинов), при котором пользователю предлагаются улучшенные условия просмотра, чтения, навигации по сайту, форматирования изображения в сочетании с сокращением необходимости прокручивать страницы на различных устройствах. Стоит помнить о том, что компьютеры представляют собой иную платформу, нежели планшеты и мобильные телефоны.

Адаптивный дизайн интернет-магазинов

Несколько фактов об использовании мобильных устройств в 2012 году:

• В 2011 году общая сумма, потраченная на покупки с мобильных телефонов, составила 241 миллиард долларов.
• В настоящее время продажи мобильных устройств существенно превышают продажи компьютеров.
• 28% всего интернет-трафика поступает с мобильных устройств.
• 19% поисковых запросов в сфере путешествий поступает с мобильных устройств. В 2011 году этот показатель составлял только 11%.
• 16% поисковых запросов в сфере розничных продаж поступает с мобильных устройств. В 2011 году речь шла о 10%.
• На eBay каждые 2 секунды происходит покупка товаров с мобильных устройств.
• В 2012 году 50% покупок, совершенных на День матери, были сделаны с мобильных телефонов.
• С Рождества количество поисковых запросов, отправленных с планшетов, выросло на 23%.
• 86% взрослых людей имеют собственные планшеты/смарфтоны.
• 53% взрослых владельцев планшетов/смартфонов используют их для выхода в Интернет.
• Люди часто используют планшеты/смартфоны для выхода в Интернет, т.к. эти устройства портативны, и их легко взять с собой.

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

Как настроить Mobile Analytics

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

Чтобы узнать больше о том, как сделать настройку всех параметров, пройдите по этой ссылке:http://www.google.com/analytics/features/mobile.html

Как создать адаптивный дизайн интернет-магазина

Спасибо организации W3C за создание медиа-запросов как части спецификации CSS3. Медиа-запросы стали популярной технологией, позволяющей адаптировать таблицы стилей для iPhone и телефонов на базе Android. Добавить запрос на сайт можно двумя способами.

Поставить ссылку на внешний файл для определения размера экрана, с которого поступает запрос:

<link rel=»stylesheet» type=»text/css»

media=»screen and (max-device-width: 480px)»

href=»shetland.css» />

ИЛИ

Добавить его в таблицу стилей вашего сайта и выстроить элементы соответствующим образом:

@media screen and (max-device-width: 480px) {

.mainContainer {

width: 480;

float: none;

}

}

ИЛИ

В качестве части правила @import:

@import url(«style.css») screen and (max-device-width: 480px);

По материалам Responsive Ecommerce Design to Generate More Conversions

Так же ознакомьтесь с:

5 практических рекомендаций увеличения конверсии корзины Вашего интернет-магазина

[Бесплатно!] Продающие шаблоны 7 ключевых страниц интернет-магазина + чек-листы

Дизайн страницы приземления: цель превыше красоты

[Прототипы и чек-листы] Страница Каталога товаров прибыльного интернет-магазина

[Прототипы и чек-листы] Страница Карточки товара прибыльного интернет-магазина

Powered by YARPP.