Тянущийся баннер HTML5

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

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

Что такое тянущийся баннер?

Тянущийся баннер в HTML5 (он же “Резиновый HTML5-Баннер”, “перетяжка”, “адаптивный баннер”) – это баннер, который не имеет фиксированной ширины. Такой баннер умеет подстраиваться под ширину сайта, заполняя все доступное пространство. Баннер одинаково хорошо смотрится и на маленьком экране смартфона, и на большом настольном мониторе, без пустот или обрезов по краям.

Рассмотрим на примерах:

Так выглядит резиновый HTML5-баннер и фиксированный баннер.

Зачем нужен тянущийся (резиновый) баннер?

Главный плюс использования такого баннера – больше пространства для вашей рекламы. Баннер, занимающий всю ширину сайта, становится визуально главным на странице и привлекает внимание пользователя.

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

Способы реализации (как изготовить).

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

Способ 1
Баннер с растягивающимся фоном.

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

Способ 2
Пропорциональное растяжение.

В этом случае элементы баннера (логотип, тексты, кнопка) позиционируются пропорционально ширине баннера. Фактически при уменьшении или увеличении ширины баннера изменяется и расстояние между элементами баннера.

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

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

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

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

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

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

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

Особые требования.

К тянущимся HTML5-баннерам предъявляется ряд специальных требований рекламных сетей и площадок.

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

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

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

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

Как расшифровать эти непонятные цифры в описании баннера?

При описании формата тянущегося баннера обычно используется такая запись: Баннер 100%х90 (min 768px)

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

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

Один за всех. Тянущийся баннер вместо фиксированных.

Правда ли, что тянущийся баннер способен заменить несколько фиксированных баннеров близкого формата?

Да. Например, правильно изготовленный тянущийся баннер 100%х90 может быть размещен на местах фиксированных баннеров: 728x90px, 760x90px, 960x90px, 1200x90px и подобных размеров той же высоты. Ведь он “резиновый” и будет корректно отображаться при любой ширине.

Так что мне заказать? Тянущийся (резиновый) HTML5-баннер или обычный, фиксированного размера?

В данный момент, наиболее популярные форматы для рекламных сетей (Google adWords, РСЯ Яндекс, Адфокс, Адривер) – это баннеры фиксированного размера (768х90px, 300х250px, 160х600px и т.д). Поэтому, для проведения рекламной кампании в этих сетях, лучше заказать комплект анимированных баннеров HTML5 стандартных фиксированных размеров. Стоимость и условия смотрите здесь.

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