Наши стандарты HTML верстки для интернет-магазинов

01.04.2017

Тип верстки

Отзывчивая верстка на float (для flexbox считаем рано, нет поддержки IE 9 и 10)

1. Фиксированная верстка

При изменении размера окна браузера блоки не поменяют свою ширину, а на мониторах с низким разрешением экрана появится полоса прокрутки.

Скорость создания верстки, низкая цена.
Нет мобильной адаптации.

2. Резиновая верстка

В зависимости от размера окна браузера, блоки изменят свою ширину.

Скорость создания верстки, средняя цена, неплохой вид на мониторах разного размера.
Нет мобильной адаптации.

3. Адаптивная верстка

Создается, как правило, с помощью фреймворков под определённые разрешения (480, 768, 992, 1200). Изменение размера происходит рывками после того, как определённый уровень достигнут.

Мобильная адаптация, высокая скорость разработки относительно отзывчивой верстки
Больший вес для загрузки сайта, верстка не учитывает контент вашего сайта

4. Отзывчивая верстка

Представляет собой слияние адаптивной и резиновой верстки. Является самой сложной с технической точки зрения, но в то же время самой эффективной.

Лучшая мобильная адаптация(рекомендовано Яндекс и Google), облегченный вес
Высокая цена

5. Верстка сайта для мобильных устройств (мобильная версия, не является мобильным приложением)

Фактически является созданием другого сайта с другим дизайном, версткой и URL адресом. Дорогостоящий и устаревший вариант.

Мобильная адаптация, облегченный вес сайта
Цена за разработку двух версий сайта

Фреймворк

По умолчанию не используем.

Слышали, наверно, про фреймворки Bootstrap или Skeleton? Они позволяют сделать сайт быстро, но не хорошо. Пуленепробиваемая отзывчивая верстка не делается на фреймворках, она разрабатывается на основе конкретно вашего контента\дизайна.

Поддержка браузеров

  • Internet Explorer 9.0 и выше;
  • Яндекс.Браузер 15.9 и выше;
  • Google Chrome 40.0 и выше;
  • Mozilla Firefox 15.0 и выше;
  • Opera 17.0 и выше;
  • Safari 5.0 и выше.

Основной проблемный браузер Internet Explorer (IE) всегда сильно усложнял, а значит и удорожал процесс верстки. На 01.04.2017 в интернет магазинах наших клиентов до сих пор присуствуют посещения с устаревших версий IE 8, 9 и 10 - около 3% всех посещений. Поэтому мы до сих пор считаем необходимым поддерживать верстку 9 и 10 версии IE. К слову, средняя конверсия интернет-магазинов в России как раз составляет 1-3%, поэтому мы не готовы ими пожертвовать.

Векторная графика

Максимум графики в векторном формате - шрифты, и для многоцветных svg.

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

Ссылка на пример шрифта

Микроразметка

Делаем, согласно Schema.org. На данный момент Schema.org официально поддерживается такими поисковиками, как Google, Яндекс, Bing и Yahoo.

Информация о товарах, размещенная на сайте вашего интернет-магазина, может использоваться в сниппетах на страницах поисковой выдачи Яндекса.

Сниппет без семантической разметки:

Сниппет с использованием семантической разметки (показывается цена и описание товара):

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

Единицы измерения

Верстка в единицах измерения em.

В отличие от верстки в жестко фиксированных px, позволяет всему сайту адаптироваться под изменения высоты шрифта. Будут пересчитаны все отступы на сайте, все шрифты, все ширины и высоты (если заданы, чаще всего это проценты, но бывают исключения), breakpoint'ы и т.д. - при этом не разрушая адаптивность.

Количество точек остановки (breakpoints)

Неограниченно.

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