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

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

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

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

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

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

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

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

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

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

1. Ноутбук.

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

2. Планшет.

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

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

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

3. Смартфон.

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

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

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

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

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

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

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

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

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

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

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

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

Посмотрите пример:

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

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

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

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

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

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

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

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

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