Html5 баннеры. Создание адаптивных HTML5 баннеров FullScreen

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

Контейнер с баннером

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

Файлы из урока:

1. Готовые баннеры FullScreen: клик

Баннер (англ. banner - флаг, транспарант) - графическое изображение рекламного характера, аналогичное рекламному модулю в прессе. Может быть как статичным изображением или даже текстом, так и содержать анимированные элементы (вплоть до видео и интерактивных объектов). Как правило, может содержать гиперссылку на сайт рекламодателя или страницу с дополнительной информацией. Задачи у баннера следующие. Во-первых, продавать товар. А значит — привлечь внимание посетителя, заинтересовать потенциального клиента рекламируемой товаром или услугой, подтолкнуть к переходу на сайт и побудить к действию (Call To Action). Именно CTA и является конечной целью рекламы. И, во-вторых, задачей баннера является имиджевая или брендовая реклама, цель которой повысить узнаваемость бренда и составить положительный имидж о бренде.

Популярные виды объявлений на сайте:

• Графический - простой вид баннера для рекламы в Интернете. Состоит из изображения определенного размера и содержит ссылку на рекламный ресурс.
• Флеш-баннер - имеет большие возможности для анимации, это позволяет лучше передать информацию с помощью комбинации векторной и растровой графики.
• HTML5-баннер -комбинация HTML-элементов с применением анимаций и хорошего визуального оформления, адаптированных под любые устройства и браузеры.

Главные отличия HTML от других типов баннеров
По сравнению с другими методами создания баннеров, технологии HTML5 дают ряд преимуществ для привлечения аудитории на ресурс:

• Объявления в таком формате будут одинаково отображаться на всех устройствах без дополнительных расширений для браузера.
  HTML5 предоставляет больше возможностей для интеграции в свои рекламные объявления формы, кнопки социальных сетей, календари, карты и другие приложения.
• Небольшой вес и использование меньших ресурсов не влияет на скорость загрузки страниц в браузере. Флеш-технологии не позволяют добиться такого результата.
• Для оценки эффективности баннеров на HTML5 можно просмотреть статистику в Google Analytics. Там представлена различная информация о гостях и переходах по ссылкам.

Существенным недостатком флеш-технологий стал постепенный отказ от них крупных компаний, таких как Apple, Mozilla и Amazon. Основным толчком для исчезновения Flash стал Google. Сначала они отключили Flash-анимацию в Google Chrome, а затем отказались от Flash-объявлений в своих сервисах поисковой рекламы, отдав предпочтение HTML5.

Способы создания HTML-баннеров
Разработка баннера начинается с создания отдельной страницы и встраивается на сайт через «iframe». Существует несколько методов разработки рекламных баннеров на сайт, мы рассмотрим самые популярные.

1. Создание фрейма с помощью CSS3 и JavaScript
Фрейм позволяет загружать в область заданных размеров любые независимые документы. Это может быть разный HTML-код с использованием стилей и скриптов для оформления. Также возможна реализация баннера через область «canvas», в которой разрабатываются анимации, рисунки, графики и даже игры при помощи JavaScript. Для ускорения разработки разрешается воспользоваться сторонними библиотеками, например CreateJS .

Преимущества :

• Функционал не ограничен никакими программами, можно реализовать что угодно.

Недостатки :

• Такой процесс довольно сложный и требует особых навыков верстки.
• Большие трудозатраты по времени относительно других способов.

2. Adobe Edge Animate
Тем, кто знает Adobe After Effects, интерфейс программы Adobe Edge Animate покажется очень знакомым. У Adobe Edge Animate более ужатый функционал, направленный на разработку простого анимированного контента с использованием HTML5, JavaScript и CSS3. Программа поддерживает импорт таких форматов, как.svg, .png, .jpeg, .gif, HTML; поддержка video и audio форматов.

Имеется более 30 встроенных эффектов, что упрощает время создания качественной анимации в несколько раз:

Преимущества :

• Множество доступных видеоуроков в Сети по использованию программы.
• Простой функционал, большинство процессов автоматизированы.
• Программа не требует знаний HTML5, JavaScript и CSS3.
• По окончанию работы получаем все необходимые документы для размещения баннера на сайте. Images - папка с графическими элементами баннера, несколько файлов JavaScript, html и файл формата An - для последующего редактирования файла в программе.
• Готовый баннер поддерживается всеми современными браузерами и мобильными приложениями, соответствует всем техническим требованиям рекламных кампаний в Яндекс и Google.

Недостатки :

• Интерфейс только на английском языке.
• С 2015 года компания Adobe прекратила развитие проекта Adobe Edge Animate, программа с того времени не обновлялась и достигла своего предела в развитии. Edge Animate все еще доступен для скачивания в архивах Creative Cloud.

3. Adobe Animate CC
Animate CC - это переименованный продукт Adobe Flash Professional. В последнее время технология Flash растеряла доверие пользователей, программа нуждалась в смене названия и нескольких доработках. По сути, это та же самая программа Flash Professional, но в которой файлы дополнительно сохраняются в HTML5 и JavaScript.

Интерфейс очень схож с Flash Professional, но возможности у программ различаются.

Преимущества :

• Возможность создания трехмерной графики. Имеется инструмент «камера», позволяющий снимать глубину кадра для настоящей анимации.
• В отличие от Edge Animate программа Animate CC имеет большой выбор векторных кистей и возможность работы с растровой графикой.
• Программа относительно новая, поэтому Adobe активно развивает проект, выпускает обновления и совершенствует Animate CC.
• Имеется русскоязычная версия.
• Расширенные возможности экспорта файла в форматы: JavaScript/Html, jpeg, png, oam, svg, mov, gif. Нажатием одной кнопки сохраняются элементы баннера в спрайтах, тем самым уменьшая время загрузки баннера.

Недостатки :

• Новизну программы также отнесем к недостаткам. Уроков по созданию анимации в Animate CC не так много, как у Adobe Edge Animate. Поэтому работу некоторых функций нужно изучать самостоятельно, что дается непросто. Программа достаточно сложная для самостоятельного изучения, но разобраться можно.
• Некоторые функции не автоматизированы, как в Edge Animate, что также увеличивает время создания баннера.

4. Google Web Designer
Google порадовал нас бесплатным редактором, специально созданным для реализации html-баннеров. Google Web Designer полностью заточен на реализацию рекламы, основной уклон которой направлен на AdWords.

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

Преимущества :

• Простой интерфейс.
• Наличие шаблонов для рекламы в google.
• Полностью бесплатная программа.
• Наличие русскоязычной версии.
• Заложен адаптивный дизайн баннеров, html-баннер будет отлично выглядеть в любом разрешении экрана.

Недостатки :

• Функционал Google Web Designer достаточно узок для создания шедевров анимации. Программа сильно ограничена шаблонами.
• Нехватка обучающих программ. Справки Google недостаточно для полноценного обучения функционалу.

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

Друзья, всем привет. Сегодня продолжим создавать баннеры в программе Google Web Designer в формате HTML5, с эффектом 3D.

И это понятно, баннеры, созданные на html5 и css3, отображаются на любых экранах как на компьютере, телевизорах, так и на мобильных устройствах. Чего не скажешь о flash-баннерах.

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

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

Основной и размещение его на сайте я уже рассказал в прошлой статье. Так что сегодня уделю внимание созданию эффекта 3D и настройкам цикличности (повторного показа). А также рассмотрим несколько настроек для «событий».

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

Подготовка к созданию баннера с эффектом 3D.

От подготовки в конечном итоге зависит вид баннера в готовом виде. Редактор Google Web Designer позволяет создавать реалистичные 3D эффекты и всё это будет прописано в html коде, вам лишь нужно всё правильно собрать в визуальном редакторе.

Для создания качественного 3D эффекта нужно предварительно нарезать в фотошопе заготовки, которые в дальнейшем нужно будет состыковать в Google Web Designer.

В качестве примера я подготовил вот такие заготовки:

Эти заготовки я сделал в Photoshop, но подобных изображений много в интернете. Можно и не напрягаться, а взять готовые варианты.

Примечание: Если вам интересен процесс создания подобных заготовок, напишите об этом в комментариях.

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

Создание 3D объекта в Google Web Designer.

Итак, по аналогии с прошлой статьёй, запускаете редактор, создаёте новый проект.

Эффект 3D подразумевает под собой составное изображение, то есть изображение, состоящее из нескольких кусочков, расположенных в нужной проекции.

Эти несколько изображений нужно объединить либо в группу, либо поместить в блок DIV. И так и так будет правильно. Но, мне удобней работать с боком ДИВ.

Шаг 1. Создание блока DIV.

Итак, для создания блока ДИВ, в левой панели выбираете «Инструмент работы с тегами (D)» .

Обязательно присвойте идентификатор. И подгоните размеры с помощью раздела «Свойства» в правой панели.

Теперь нужно выделить блок. Для этого в левой панели выбираете «инструмент выделение (V)» и двойным щелчком левой кнопки мышки кликнете по рамке блока ДИВ. Она при этом сменит цвет на красный.

Шаг 2. Выстраивание изображений.

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

В моём распоряжении есть следующие элементы:

— Верхняя сторона.

— Боковая сторона (состоит из трёх отдельных частей).

Для начала размещаем оборотную (заднюю) сторону изображения и выравниваем её по центру и верхнему краю баннера.

Таким же образом добавляем лицевую сторону. Выравниваем и смещаем по оси Z.

Так как ширина боковой стороны 4px (пикселя), то лицевую и оборотную стороны я сместил по оси Z на 2px и -2px. Что обеспечит зазор между изображениями.

Примечание: точные цифры смещений смотрите на скриншотах.

Далее, добавляем боковую сторону, все части по отдельности. Для удобства размещения используйте инструменты «3 D вращение рабочей области» и «Масштаб» . Они помогут точно подогнать все детали.

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

Следующим шагом выстраиваем верхний левый уголок.

Теперь центральная часть боковой стороны.

И нижний уголок по левой стороне.

Все элементы боковой стороны обязательно выравнивайте по оси Y на 90 0 .

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

Для этого в нижней панели выбираете изображение – нажимаете комбинацию клавиш CTRL+С (копирование) и вставляете дубликат CTRL+V.

Начнём так же, как и полевой стороне сверху вниз, но только для правой.

Верхняя правая крышечка.

Нижнюю часть я не стал делать, так как её не видно на изображении.

Самая тяжёлая работа закончена. Теперь можно приступить к настройке анимации. В качестве наглядной демонстрации сделаем вращение изображения.

Создание эффекта вращения в Google Web Designer.

Первым делом нужно выйти из блока ДИВ, в котором находятся все элементы изображения. То есть мы работали внутри блока с конкретными изображениями, а теперь нужно будет работать со всеми изображениями одновременно, управляя блоком ДИВ.

Для начала нажимаете на кнопку DIV в нижней панели.

Итак, на шале времени нажав правую кнопку мышки, создаёте два ключевых кадра. Должно получиться так:

Расположение исходного кадра по шкале Y выставляем на -90 0 .

Первый ключевой кадр (второй по счёту) выставляем по шкале Y на 0 0 .

Второй ключевой кадр (третий по счёту) выставляем по шкале Y на 90 0 .

Всё можно проверять результат. Для этого нажимаете на кнопку Play .

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

Настройка цикличности в Google Web Designer.

В программе можно настроить несколько вариантов цикличности (повторов). Так можно настроить повтор для всех элементов баннера или на каждый элемент в отдельности.

Также цикличность можно ограничить числом повторов или сделать её бесконечной.

На нижней панели, рядом с каждым элементом есть символы «Замок», «Глаз», «Обратная стрелка» .

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

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

Остановка вращения при наведении курсора мышки на баннер.

Первым делом на первом ключевом кадр (второй по счёту) устанавливаем ярлык. Для этого над кадром нажмите правую кнопку мышки и выберите пункт меню «Добавить ярлык» . Вводите название ярлыка и жмёте клавишу Enter.

А на следующем шаге выбираете в качестве приёмника « Page1» . Других там вариантов не будет.

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

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

Возобновление вращения после отведения курсора мышки.

Для того чтобы вращение было продолжено, после отведения курсора в сторону, настройте ещё одно событие.

Настраивается оно аналогично предыдущему, только лишь с двумя отличиями.

В качестве события выбирается «Мышь» — « mouseout» .

Событие - отведение мышки

А в качестве действия «Временная шкала» — « togglePlay» .

Действие - Продолжить

Вот и готов наш баннер с 3D эффектом. И таких различных эффектов вы можете придумать сколько угодно.

Только не забудьте сделать событие на клик мышки и открытие ссылки. Баннер ведь не ради красоты создавали, ведь так.

Изначально, этот процесс, может показаться сложным, но сделав пару баннеров, вам уже не будет так казаться.

На этом у меня сегодня всё, друзья. Всем желаю успехов, жду ваших комментарием и до встречи в новых статьях и видеоуроках.

С уважением, Максим Зайцев.

HTML5-Баннеры

от 2 299 руб.

RUB

Заказать

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

Основными причинами такого отказа называются следующие:

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

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

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

Что может HTML5-баннер?

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

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

Рассмотрим основные виды HTML5-баннеров.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Правильнее всего воспринимать HTML5-баннер, как мини web-сайт. Без преувеличений.

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

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

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

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

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

Очень просто. Распаковать 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-баннер?

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

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

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

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

Технические требования к HTML5-баннерам.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Интернет заполонён рекламой. На многих сайтах это вырвиглазная реклама щёток для похудения, на других это Яндекс.Директ или Google AdSense. И лишь на некоторых можно увидеть красивые баннеры, которые не раздражают пользователей одним своим видом. Из моего обзора вы узнаете, как самостоятельно создать красивый HTML5-баннер без каких-либо начальных навыков.

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

Сервис предлагает создать баннеры двух типов: обычный или случайный баннер при загрузке страницы. Также при помощи banersnack можно запустить свою рекламную кампанию в Google или Facebook. Но обо всём по порядку.

Banner maker

Именно в этом разделе вы можете создать свой первый баннер. Сервис предлагает баннеры в формате HTML5 или Flash. Поскольку Flash все стараются "убить", я опишу редактор HTML5.

При запуске мастера сразу же предлагаются несколько готовых шаблонов:

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

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

При создании своего баннера открывается вот такой редактор:

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

В качестве баннера можно добавить свою картинку, текст, кнопку, фигуру или видео. Я добавил картинку и кнопку:

При выборе любого элемента будет предложено несколько шаблонов, но, как всегда, последнее слово за вами:

У каждого слоя есть три вкладки свойств. Положение на странице, цвет, форма и тому подобное:

Действие по клику на слое:

Можно указать переход к следующему слайду или переход по ссылке.

Свойства анимации при смене слайда:

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

Затем откроется список всех ваших баннеров с кодами для вставки на сайт:

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

Banner rotator

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

Мастер предлагает выбрать из уже созданных баннеров или создать новый:

При добавлении своей картинки можно задать лишь URL перехода:

После чего остается опять же получить код вставки на сайт:

Вот так при помощи bannersnack даже неопытный пользователь может создать свой красивый кросс-браузерный баннер.