HTML5 для интернет-магазинов

Артем Фенога
27 июля 2012
Артем Фенога,
Дизайнер интерфейсов OWOX

HTML5 — это «звезда» всех технических конференций еще с 2011 года. И не удивительно, ведь множество преимуществ этой технологии дает основания предположить, что в течение нескольких лет она будет преобладать на всех сайтах и во всех приложениях. Мы не остались в стороне и предлагаем вам фрагменты интересной инфографики, исследования и даем рекомендации по использованию HTML5 в верстке интернет-магазинов.

История HTML5

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

HTML5 для интернет-магазинов

Ключевые «фишки» HTML5

HTML5 для интернет-магазинов

Какие преимущества дает HTML5 для интернет-магазинов с точки зрения верстки?

Исходя из ключевых фич HTML5, обозначенных выше, мы советуем обратить внимание на следующие возможности:

1. Улучшение семантики

В HTML5 появляются новые теги и атрибуты (например, section, article, aside и др.). Эти теги помогают поисковику четко определять вид контента и его важность на странице. А это может влиять на ранжирование страницы сайта в поисковой выдаче. Об этом более подробнее писали на популярном форуме Searchengines.ru.

Отдельно стоит выделить атрибуты Role, которые входят в спецификацию WIA-ARIA и дополняют html-теги ролями (banner, search, navigation, main, contentinfo, complementary). Кроме семантики для поисковиков атрибуты с ролями значительно расширяют доступ к информации для читающих текст устройств.

2. CSS3

Каскадные таблицы стилей CSS3 имеют очень много преимуществ, с которыми можно быстро получить положительный эффект. Например, с помощью новых css-свойств можно намного быстрее верстать сайты, используя меньшее количество html-тегов и картинок. Таким образом, экономится не только время разработки, но и как минимум уменьшается время загрузки сайта и количество запросов на сервер с картинками.

Сейчас в интернете появилось множество полезных для разработчиков инструментов, которые генерируют готовый css-код исходя из заданных параметров (скругление углов, тень блока, градиенты и т.д.).

Все современные браузеры уже поддерживают свойства CSS3. Для старых версий работает принцип graceful degradation, когда контент сайта в старых браузерах выглядит не так красиво, как в новых.

3. Поддержка мобильными устройствами

Сверстанный на HTML5 сайт всегда откроется и будет работать в мобильных браузерах. Кроме этого, используя в связке HTML5 и Javascript, можно написать свое приложение для сайта. Причем для этого уже есть готовые библиотеки. Одним из хороших примеров приложения, написанного на HTML5, является приложение LinkedIn.

4. CSS Media Queries

CSS Media Queries — это отличный инструмент для реализации адаптивной верстки под разные устройства с разными размерами экрана. То есть один и тот же html-код можно абсолютно по-разному оформлять для телефона (240×320 пикселей), для смартфона (480×800 пикселей), для планшета (1024×800 пикселей), для ноутбуков и мониторов с высоким разрешением экрана.

Итого

Исследования показывают, что к 2016 году, HTML5 с использованием мобильных браузеров вырастет до 2,1 млрд. И только в этом году доля использования HTML5 возросла до 78%.

HTML5 для интернет-магазинов

HTML5 для интернет-магазинов

HTML5 для интернет-магазинов

HTML5 для интернет-магазинов

Метки: HTML5, верстка

Комментарии

11 февраля 2013
Евгений Иванов
Полезная статейка. Вы молодцы ребята. Беру на заметку. Может даже резюме вам сверстаю:)

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