HTML 5 баннеры

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

Сегодня Интернет способен жить, дышать и приспосабливаться, заполняя всё пространство, доступное на экранах различных устройств, начиная от мобильных телефонов — и вплоть до огромных видеодисплеев. Это то, какой и предполагалась Глобальная сеть.

Но есть небольшая проблема. Веб-сайты зачастую содержат баннерную рекламу и традиционные баннеры, не обладающие особой гибкостью. Как flash-, так и GIF-баннеры имеют фиксированные размеры, из-за чего несовместимы с современной адаптивной вёрсткой. Нам необходим новый метод создания баннерной рекламы. Нам нужны «адаптивные» баннеры…

Новый формат баннеров

Единственный способ сделать баннер таким же гибким, как и наша HTML5-разметка — написать его на HTML5. Вначале это может показаться бредовой идеей, но я уверяю вас — это не так. В действительности, у такого подхода есть множество достоинств:
HTML-реклама доступна повсеместно, а семантическая разметка сделает её подходящей для скрин-ридеров;
текст, изображения, видео, скрипты и формы — всё это может быть использовано в баннере точно так же, как и на любой веб-странице;
при необходимости баннеры могут задействовать динамические сценарии и базы данных на серверной стороне;
в баннер могут быть внесены изменения уже после его размещения;
файл (набор файлов) HTML-баннера может иметь весьма скромный размер;
banner serving, по существу, сводится к веб-хостингу;
веб-разработчикам не нужно изучать что-либо новое — все технологии остаются теми же, что и при обычной веб-разработке;
и, конечно, при помощи CSS3 медиа-запросов можно заставить HTML5-рекламу «подстраиваться» под любые размеры — ведь именно такое поведение мы ожидаем от адаптивных баннеров!