HTML5 баннеры

HTML5 сегодня – единственный формат полноценной анимированной баннерной рекламы. Этот универсальный кроссплатформенный формат пришел на смену Flash, имевшим ряд ограничений и недостатков. Ведущие рекламные сети полностью отказались от баннеров с использованием технологии Flash в пользу баннеров с технологией HTML5.

Основные причины такого отказа:

• к Flash-технологии накопились претензии в области компьютерной безопасности и повышенного потребления процессорной мощности гаджетов;
• браузеры начали по умолчанию блокировать показ Flash;
• на iOs (iPhone, iPad) показ Flash не предусмотрен производителем;
• популярность программ-блокировщиков баннерной Flash-рекламы;
• отказ от дальнейшей поддержки и развития Flash-технологии ее владельцем, компанией Adobe.

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

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

Для заказчиков это означает, прежде всего, расширение охвата аудитории без потерь.

Что может HTML5?

Многое – это самый передовой формат, акцентирующий внимание пользователя и даже взаимодействующий с ним (интерактивный баннер).

С точки зрения анимации, такая реклама может показывать векторную анимацию (без потерь при масштабировании), анимацию персонажей, фотографий, логотипов, графиков и диаграмм, текста и даже 3D анимацию. С точки зрения интерактива, HTML5-баннер может реагировать на действия пользователя и предлагать ему дополнительные способы взаимодействия и информацию. С точки зрения медиа-носителей, HTML5 может проигрывать видео, слайды и аудио-записи. С точки зрения адаптивности, HTML5 может растягиваться на всю ширину страницы, раскрывать дополнительные панели или разворачиваться на весь экран.

Виды HTML5-баннеров

Анимированный фиксированного размера.
Самый распространенный формат рекламных сетей. Ширина и высота нужных баннеров зависят от списка принимаемых к размещению.

Тянущийся (адаптивный, резиновый).
Это баннер, который может растягиваться, занимая всю ширину (иногда высоту) экрана. (Подробнее можно узнать в этой статье)

Fullscreen -баннер.
Баннер, открывающийся на весь экран. Обычно содержит таймер показа и кнопку “Закрыть”. Особенно популярен для показа на мобильных устройствах.

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

Раскрывающийся (расхлоп).
Сначала на экране видна только стартовая панель такого баннера (тизер). При выполнении заданного алгоритма (наведение мышки или нажатие, таймер или другие события на странице), открывается вторая часть баннера с дополнительной информацией.

HTML5 Видео баннер.

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

Игровые интерактивные баннеры.
Баннеры, призывающие пользователя включиться в игру, выполняя простые действия.

Такие баннеры захватывают внимание целевой аудитории, вызывают живой интерес, но и имеют ряд ограничений (например отсутствие события наведения мыши на мобильных или ограничения по подключению дополнительных скриптов). Мы расскажем вам об этих особенностях в случае, если вы задумали создать игровой HTML5-баннер.

“Умные” HTML5-баннеры (калькуляторы).
Используются для вовлечения и взаимодействия с пользователем, предлагая ему немедленный расчет по нужным параметрам и заданной внутренним алгоритмом формуле (например, расчет кредита, ипотеки, расхода стройматериалов и похожие несложные операции).

Редактируемые – иногда требуется оперативно вносить в баннеры изменения, без помощи разработчика (например, часто меняющиеся цены, проценты или котировки). Мы можем справиться с такой задачей и вывести необходимые параметры в HTML-код баннера, где клиент может сам внести правки. Можно предложить другое удобное решение по выводу данных баннера – во внешние файлы.

HTML5-баннеры, работающие с подгрузкой внешних данных и API.
Многие рекламные сети запрещают обращение баннера к внешним источникам. Однако в случае, если баннер размещается на сайте, предоставляющем такую возможность, HTML5-баннер может запросить через API сайта информацию (текст, цифры, котировки) и обработав ее по заданному алгоритму, показать пользователю.

3D HTML5-баннеры.
Такие баннеры привлекают внимание пользователя, создавая на странице объемные модели изображений.

HTML5 3D баннер может быть создан в виде вращающегося объекта, грани которого содержат кадры баннера, в виде раскрывающейся книги или других 3D эффектов.

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

Если нужно заказать HTML5-баннер на нашем сайте, а креативная идея требует совмещения форматов – это задача для наших баннермейкеров.

Что представляет из себя технически?

Правильнее всего воспринимать HTML5-баннер, как мини сайт. Кроме шуток.

HTML5, давший название этому баннерному формату – язык разметки web-страниц, проще говоря, верстки. И верстается по тем же законам, что и любой другой сайт. Он может содержать div-контейнеры, подключаемые шрифты, стили css и js-скрипты. Основой является контейнер для анимаций canvas. Сама анимация создается на java script, чаще с использованием разработанных для анимации js-библиотек.

Что там внутри? Зачем в архиве? Почему так много файлов?

Верно, ведь мы привыкли, что баннер – это один файл картинки JPG или “гифка” или “флешка”. Но вспомним, как мы писали выше, HTML5-баннер это, по сути, мини-сайт. Он содержит группу файлов и поставляется рекламной площадке в zip-архиве. Внутри архива лежит главный файл HTML, файлы java-скриптов, библиотек, таблицы стилей и изображения.

Большинство рекламных площадок принимают HTML5-баннеры именно в виде zip-архива.

Примечание. Иногда рекламная площадка может потребовать предоставить все одним файлом, включив в него все скрипты и изображения в формате base-64. Это – не препятствие для специалиста. Однако такое требование увеличивает срок изготовления баннера и внесения в него изменений. Такое требование, однако, встречается нечасто.

Как мне посмотреть присланный HTML5-баннер на моем компьютере?

Это легко: распаковать zip-архив и открыть находящийся внутри HTML файл в вашем браузере.

Часто по требованиям рекламных сетей внутри zip-архива должен размещаться только один HTML-файл. Его название неважно, но именно его и нужно открывать для просмотра работы в браузере.

Как проверить, что мне сделали правильный HTML5-баннер?

Если баннер создается для рекламных сервисов Google, можно использовать инструмент проверки качества работы дизайнера – on-line валидатор HTML5 от Google. Пользоваться им просто: загружаете ваш zip-архив и смотрите, прошел ли он проверку по чек-листу. Ошибки будут отмечены красными значками. Если их нет – ваш разработчик получает оплату не зря и баннер готов к Google adWords или Double Click.

В рекламных сетях Яндекс, Mail.ru, Рамблер, adFox, adRiver и других также проводится проверка на соответствие баннера техническим требованиям, после его загрузки на сайт системы. В случае проблем вы получите комментарий модератора с описанием ошибки. Некоторые площадки позволяют предварительно посмотреть баннер на тестовой странице.

И все-таки гарантия корректного создания HTML5-баннера – опыт разработчика, его знание технических требований рекламных сетей и готовность исправить ошибки.

Анимация на Java Script – это другое?

Не дайте себя запутать. “Java Script баннер”, “Canvas баннер” – именно то, что принято называть “HTML5-баннер”. В зависимости от инструмента разработчика могут меняться js-библиотеки или правила верстки, но общая схема сборки остается одинаковой.

Как разработать HTML5-баннер?

Самый распространенный среди дизайнеров редактор – программа Adobe Animate.

Google имеет свой инструмент разработки – Google Web Designer. Среди его плюсов – множество встроенных шаблонов и публикация непосредственно для рекламных сервисов Google: adWords и Double Click. Среди минусов – ограниченные инструменты анимации.

Часть дизайнеров, чаще американские, пользуются редактором и библиотеками Green Sock Animation Platform. Однако, у нас они не получили значительного распространения.

Учитывая, все необходимые компоненты представляют собой открытый код, хороший специалист может создать HTML5-баннер даже в простейшем текстовом редакторе. Однако такой способ мало эффективен по сравнению с использованием профессиональных анимационных программ.

Технические требования

Все рекламные сети и площадки предъявляют ряд требований к разработке, выполнение которых тщательно проверяется при модерации.

Требования касаются:

• общего веса HTML5-баннера в кб.;
• структуры zip-архива, количество папок и файлов;
• разрешенных форматов файлов;
• способа включения URL-ссылок по клику на баннере (прошивки баннера);
• списка разрешенных js-библиотек на внешних хостингах;
• порядок и ограничения подключения видео и аудио-файлов;
• требования к оформлению рамки, дисклеймеров, частоте и количеству циклов анимации, нагрузке на процессор..

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

Что мне делать с моими Flash-баннерами, созданными ранее?

Смотрите сами – крупнейшие рекламные сети больше не принимают Flash-, Flash-компоненты блокируются в браузерах и на iOs-устройствах, прекратил свою работу Swiffy (единственный адекватный on-line конвертер Flash в HTML5).

Автоматическая конвертация Flash-формата невозможна – требуется, полная ручная пересборка в HTML5-редакторе. Решение – заказать создание нового комплекта анимированных баннеров, в универсальном формате HTML5.

А как же “гифки”?

Любая GIF-анимация – это последовательный набор картинок кадров, как и в видео-файлах. GIF-файл содержит данные о скорости проигрывания кадров и количестве повторов. Этим его возможности ограничиваются.

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

Что это означает для рекламодателя?

Проблему лишнего веса. Да, ей подвержены даже баннеры. Все крупные рекламные сети выставляют жесткие ограничения по весу в килобайтах.

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

Если же анимация включает смену нескольких сотен кадров, то вес GIF-файла увеличивается, как выражаются на английском, “dramatically”, то есть, драматично. 20-секундная гифка весом в несколько мегабайт – обычное дело. И это не нравится рекламным сетям, которые справедливо обеспокоены тем, сколько трафика придется загрузить пользователю для просмотра баннера.

Вывод. Если техническое задание включает баннер со множеством анимационных эффектов, персонажной анимацией, интерактивный, адаптивный или видео-баннер – выбор совершается в пользу заказа HTML5-баннера.