Рубрики
vam shop Заметки Новости

Адаптивный дизайн в VamShop

В VamShop по умолчанию используется адаптивный дизайн.

Что такое адаптивный дизайн по версии wikipedia.org:

Адаптивный веб-дизайн (англ. Responsive web design) — дизайн веб-страниц, обеспечивающий отличное отображение сайта на различных устройствах, подключённых к интернету.
Целью адаптивного веб-дизайна является универсальность веб-сайта для различных устройств. Для того, чтобы веб-сайт был удобно просматриваемым с устройств различных разрешений и форматов, по технологии адаптивного веб-дизайна не нужно создавать отдельные версии веб-сайта для отдельных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре устройств.[1]

Почему адаптивный дизайн так важен?

Прежде всего, потому что всё больше и больше пользователей для сёрфигна в интернете вообще и для интернет-покупок в частности используют различные устройства, в последние годы это всё больше планшеты и смартфоны.

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

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

В интернет-магазинах, созданных на платформе VamShop адаптивный шаблон написан с использованием популярных, открытых и свободных библиотек: Bootstrap, jQuery.

Давайте посмотрим как выглядит интернет-магазин, созданный на VamShop в зависимости от устройства, на котором мы заходим в интернет-магазин.

1. Ноутбук.

vamshop-responsive-template-notebook

Стандартный вид с экрана ноутбука, представлен весь функционал магазина без каких-либо адаптаций.

2. Планшет.

vamshop-responsive-template-tablet

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

В случае адаптации для планшета изменения следующие:

  • Слайдер адптировался под размер экрана: осталось только название товара, описания нет.
  • Товар выстроился в две колонки, что б вся информация была доступна на экране планшета без горизонтальной полосы прокрутки.

3. Смартфон.

vamshop-responsive-template-smartphone

Самый маленький экран у смартфона и шаблон адаптируется под экран смартфона, а именно:

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

Таким образом работает адаптивный шаблон в интернет-магазинах, созданных на базе VamShop.

Самое главное — используется один и тот же html, css код для всех типов устройств, нет никаких отдельных версий для мобильных устройств, шаблон един для всех типов устройств, все адаптации работают через css свойства media, min-width, max-width.

Дополнительная информация:
Статья на wikipedia.org — Адаптивный дизайн
Bootstrap
jQuery

Рубрики
vam shop Заметки Новости

Микроразметка (семантическая разметка) в VamShop

В VamShop 1.72 добавлена семантическая разметка на странице карточки товара.

Для начала, коротко, что такое семантическая разметка:

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

Как это выглядит на практике, на примере интернет-магазина, созданного на платформе VamShop?!

В VamShop на странице карточки товара добавлена семантическая разметка на странице карточки товара: для описания товара (название, описание, цена, картинка), отзывов, рейтинга.

vamshop-responsive-template

Для чего это нужно?

Конкуренция в поисковых системах очень высокая и любому интернет-магазину нужно использовать любую возможность для привлечения внимания посетителей именно к Вашему предложению. Семантическая разметка позволяет выделить именно Ваш интернет-магазин в поисковой выдаче.

Посмотрите пример:
vamshop-schema

Вот так выводится предложение интернет-магазина о товаре обычным способом, без семантической разметки:

А вот так выводится информация о товаре в интернет-магазине, созданном на VamShop, с использованием семантической разметки:

vamshop-schema1

Отличия следующие:

  • Добавляется рейтинг товара на основе оценок и отзывов посетителей Вашего интернет-магазина.
  • Указывается количество отзывов о товаре.
  • Выводится стоимость товара сразу в результатах поиска.

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

Полезные ссылки:

Описание семантической разметки (на английском) — http://schema.org/
Описание семантической разметки (на русском) — http://ruschema.org/
Проверка семантической разметки от google — http://www.google.com/webmasters/tools/richsnippets
Проверка семантической разметки от яндекс — http://webmaster.yandex.ru/microtest.xml

Рубрики
vam shop Заметки Новости

С новым годом!

Поздравляем с наступающим новым годом!

Успехов в новом году.

2014

Рубрики
vam shop Заметки Продажи

Увеличиваем продажи интернет-магазина VamShop с помощью Google Analytics

В данной статье я немного расскажу про VamShop и работу с целями в Google Analytics.

Статья готовилась долго, все советы, описанные в статье, были опробованы более года назад, что позволило сравнить показатель конверсии апреля 2010 г. и апреля 2011 г.

Google Analytics — популярнейший и незаменимый инструмент в оценке эффективности всех аспектов работы Вашего интернет-магазина.

Я лишь покажу одну из сотен, а то и тысяч возможностей Google Analytics для оценки и улучшения показаталей продаж Вашего интернет-магазина.

Рубрики
vam shop Заметки Продажи

Увеличиваем продажи интернет-магазина VamShop с помощью Google Analytics. Часть I.

В данной статье я немного расскажу про VamShop и работу с целями в Google Analytics.

Статья готовилась долго, все советы, описанные в статье, были опробованы более года назад, что позволило сравнить показатель конверсии апреля 2010 г. и апреля 2011 г.

Google Analytics — популярнейший и незаменимый инструмент в оценке эффективности всех аспектов работы Вашего интернет-магазина.

Я лишь покажу одну из сотен, а то и тысяч возможностей Google Analytics для оценки и улучшения показаталей продаж Вашего интернет-магазина.

Исходим из того, что Вы уже подключены к Google Analytics (включён модуль в Админке — Настройки — Google Analytics и Вы зарегистрированы в системе) и в общих чертах в курсе, что такое цели и где они создаются.

Будем рассматривать цели, а конкретно, процедуру оформления заказа в VamShop.

План работы:

1. Получить данные за месяц работы магазина (апрель 2010 г.).
2. Сделать выводы по собранным показателям.
3. Предложить варианты улучшения показателей.
4. Сравнить показатели за месяц работы магазина через год (апрель 2011 г.).

Рубрики
vam shop Заметки Продажи

Настройка VamShop и Яндекс Метрики в режиме электронной торговли

Читайте новую статью на сайте поддержки пользователей VamShop: Настройка VamShop и Яндекс Метрики в режиме электронной торговли

Рубрики
Заметки Юзабилити

Определяем город, регион по IP адресу покупателя!

Чем меньше лишних кликов делает посетитель при регистрации — тем лучше.

В данной заметке мы на странице регистрации клиента (create_account.php) сделаем автоматическое определение города и региона посетителя по его IP адресу.

Рубрики
Заметки

Динамика популярности запроса «создание интернет магазина»

Интересный график по данным Google.