как создать маркетплейс
Как создать Marketplace на Multi-Vendor
30.11.2017
handshake
Дропшиппинг поставщики
06.12.2017

“Реанимация”. Выпуск 6: Верстка и настройка интернет-магазина

preview-6

Основная идея
Соответствие верстки современным стандартам и требованиям; кроссплатформенная верстка; правки в дизайне до верстки; подготовка к SEO-продвижению
Полезные сервисы
Google Analytics, Google Chrome, Jivosite, SEO-модули для CS-Cart

И снова здравствуйте! Тема шестого выпуска реалити-шоу “Реанимация” плавно вытекает из пятого. На прошлом занятии ведущий Роман Кежелис рассказывал о редизайне, теперь же затрагивает верстку и настройку интернет магазина, также уделяя некоторое внимание SEO-продвижению. Стоит оговориться, что Роман касается этой темы сейчас, так как она отличается относительной сложностью и большим объемом, а потому SEO будут посвящены несколько следующих занятий. Шестое же занятие строилось вокруг того, какой должна быть корректная верстка для хорошей выдачи в поисковиках, как проводить кроссбраузерную верстку и выстраивать работу с подрядчиками, как правильно вносить правки в дизайн. Теперь мы, как обычно, перейдем непосредственно к главному.

Правила верстки

Ни для кого не секрет, что верстка играет важную роль в работе интернет-магазина и любого сайта в целом, и без правильной верстки попросту невозможно будет не только внедрить дизайн, но и удобно пользоваться интернет-ресурсом, что в конечном счете неизбежно скажется на конверсии. Однако верстка важна не для одних лишь живых людей, поисковые роботы также учитывают ее в своих алгоритмах выдачи. Для того, чтобы “подружить” верстку сайта с поисковыми системами, Роман рекомендует руководствоваться следующими принципами:

  • Верстка не должна быть тяжелая;
  • Должны использоваться последние стандарты HTML5;
  • Верстка должна выполняться с минимально возможным размером кода;
  • В верстке необходимо использовать максимально адаптивный кроссплатформенный html-код для корректного отображения на различных устройствах и в разных браузерах;
  • Верстальщик должен по максимуму использовать возможности языка стилей LESS.

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

  • Нарисованный дизайн визуально сравнивается с уже сверстанным сайтом, графический файл открывается в одном окне браузера, а страница магазина - в другом;
  • При отсутствии различий переходим к инструментам и сравниваем, как верстка ведет себя в браузерах. Сюда включается не только визуальное сравнение, но и использование сервисов Google. Так с помощью Google Analytics можно проверить показатель отказов у пользователей различных браузеров. Большая разница в процентах отказов в зависимости от браузера может говорить о некорректном отображении верстки в одном из них.


Хотите получить полный коспект занятия и видео?


Добавить комментарий

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>