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

5372

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

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

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

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

Как только пользователь переходит с ноутбука на iPad, сайт должен автоматически переключаться, при этом регулируется разрешение, размер картинок и т.п. Другими словами, сайт должен использовать технологию, способную автоматически соответствовать предпочтениям пользователя. Это избавит вас от необходимости создавать новый дизайн и проходить через стадию разработки при появлении на рынке очередного мобильного устройства».

— «Адаптивный дизайн интернет-магазинов», Smashing Magazine

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

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

Несколько фактов об использовании мобильных устройств в 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);

Получить дополнительную информацию можно по этим ссылкам:

http://www.w3.org/TR/css3-mediaqueries/

http://googlewebmastercentral.blogspot.com.au/2012/06/recommendations-for-building-smartphone.html

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

Обращайтесь за результатом к нам:

Похожие статьи

Подпишитесь и получайте новые статьи и руководства по увеличению продаж и увеличению постока клиентов в Ваш интернет-бизнес на почту
Об авторе

Автор: Всеволод Козлов (Написал 143 статьи)

Эксперт в области увеличения продаж интернет-магазинов и коммерческих сайтов для малого и среднего бизнеса. Бизнес-тренер.

Один из последних кейсов - увеличение объема продаж за короткий срок с 420 210 руб/мес до 13 906 950 руб/мес, т.е. в 33 раза!

Я на Google+, Facebook, Vkontakte, LinkedIn

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
*