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

как создать маркетплейс
Как создать 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 можно проверить показатель отказов у пользователей различных браузеров. Большая разница в процентах отказов в зависимости от браузера может говорить о некорректном отображении верстки в одном из них.



  • Переходим к анализу мобильных устройств и смотрим в Google Analytics процент отказа в зависимости от разрешения экрана по тому же принципу;


  • Проверяется верстка сначала с помощью эмуляторов. Браузер Google Chrome позволяет просматривать интернет-ресурсы, имитируя различные платформы и разрешения экрана. Для этого неоходимо открыть нужную страницу, нажать клавишу F12 (или щелкнуть ПКМ и выбрать "просмотреть код") и сочетанием клавиш Ctrl+Shift+M вызвать панель инструментов для выбора имитируемого девайса;


  • После исправления ошибок отображения в эмуляторах необходимо просмотреть сайты вживую на смартфонах Iphone, а также смартфонах на платформах Android и Windows Phone;

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

  • В браузерах Opera, Chrome, Safari, Firefox, IE 8+;
  • В разрешениях 320х480, 480х800, 640х960, 768х1024.

Верстка и правки дизайна

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

  • Заполнение клиентом видеобрифа со специалистом;
  • Проверка брифа;
  • Отрисовка главной страницы дизайнером;
  • Прием правок по главной странице. С первой версией количество правок главной страницы не учитывается;
  • Отрисовка промежуточной версии дизайна в соответствии с правками;
  • Утверждение исправленного дизайна;
  • Верстка. После принятия изменений по главной страницы никакие правки по ней более не принимаются!

Также ведущий рекомендует прибегать к услугам продюсера, который имеет большой опыт в ecommerce “изнутри” и сделает не максимально красивый, а максимально продающий проект. На этапе верстки также рекомендуется продумать средства, которые будут применяться непосредственно в интернет-магазине для общения с клиентами, например jivosite, который используется и в нашем магазине.
На подходе к SEO-продвижению

Рассказав об основных принципах верстки магазинов, Роман начал подходить к SEO-продвижению сайта. На этом занятии ведущий уделил время детальной (или On-page) настройке страниц карточек товаров. Ее смысл заключается в том, чтобы использовать характеристики, бренд, описание и т.п. в поисковой выдаче на сайте, так как клиенты могут искать товар не только по его названию. Создать отдельную страницу тегов вам поможет наш модуль Extended tags. Другие наши модули, которые помогут решить важные SEO-задачи, о которых на следующих занятиях будет говорить Роман: Редактор SEO-имен и SEO-оптимизация. Также вы можете заказать у нас бесплатный SEO-аудит, призванный подготовиться к следующему занятию и помочь заранее выяснить, какие аспекты вашего магазина требуют доработки для его высокой выдачи в поисковых системах.

***
Шестой выпуск реалити-шоу поведал нам об основных принципах верстки и подготовил к объемному, но несомненно важному разделу для создания полноценно функционирующего интернет-магазина - SEO-продвижению. Так и звучит тема следующего занятия, посвещенного общим понятиям и терминам, технической и семантической оптимизации и расширению семантического ядра в CS-Cart.

До встречи через неделю!

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

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

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