HTML5-баннеры: методы разработки

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

Достоинства технологии

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

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

• Баннеры адекватно отображаются на экранах ПК и портативных устройств, не нужно использовать дополнительные расширения для браузеров.
• В рекламные блоки легко интегрируются разнообразные приложения: кнопки соцсетей, карты, календари и т.д.
• Баннеры на HTML5 в лучшую сторону отличаются от Flash — не тормозят загрузку страниц сайта в браузере, так как мало весят и используют минимум ресурсов.
• Предусмотрен сбор статистики посещений и переходов по привязанным ссылкам — с помощью Google Analytics легко оценить эффективность рекламного объявления.

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

Методы разработки

Баннер HTML5 представляет собой отдельно созданную страницу. На сайт рекламное объявление встраивается как плавающее окно через тег «iframe». Для разработки баннера можно использовать разные методы.

CSS3 и JavaScript

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

Но это задача для профессионала, владеющего специфическими навыками верстки. Кроме того, разработка баннера средствами CSS3 и JavaScript занимает много времени.

Adobe Edge Animate

Специализированная программа проста в использовании — для создания анимированного контента не требуется знать HTML5, CSS3 и JavaScript. Чтобы освоить Edge Animate, можно воспользоваться многочисленными видеоуроками и руководствами в Сети.

Основные достоинства:

• Значительная часть процессов автоматизирована, библиотека из трех десятков визуальных эффектов ускоряет и упрощает работу.
• Поддерживается импорт популярных форматов: HTML, .gif, .jpeg, .svg, .png, поддерживаются аудио- и видеоформаты.
• Готовый баннер отвечает всем техническим стандартам Google и Яндекса, адекватно отображается браузерами и мобильными приложениями.

К недостаткам относят отсутствие русифицированной версии. Также следует учесть, что проект Adobe Edge Animate был остановлен в 2015 году, обновлений нет и не будет. Программу можно найти в архиве Creative Cloud.

Adobe Animate CC

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

Основные достоинства Animate CC:

• Включена функция создания 3D изображений.
• Ассортимент векторных кистей, использование возможностей растровой графики (недоступно для Edge Animate).
• Регулярное появление обновлений, расширение функционала.
• Предусмотрена русифицированная версия.
• Конечные файлы экспортируются в JavaScript/HTML, gif, jpeg, mov, svg, png, oam. Чтобы ускорить загрузку баннера, его элементы можно сохранить в спрайтах одним нажатием кнопки.

У Animate CC есть два существенных недостатка:

• Программу не очень просто освоить самостоятельно, а уроков пока создано не так много, не все функции полностью охвачены.
• Отсутствует автоматизация многих функций (в отличие от Edge Animate), поэтому требуется тратить больше времени и сил для создания анимированных рекламных объявлений.

Google Web Designer

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

Google Web Designer порадует пользователя:

• Простым интерфейсом.
• Готовыми шаблонами для рекламных объявлений на площадках Google.
• Русифицированной версией.
• Возможностью создавать адаптивные баннеры, подстраивающиеся под ширину сайта — такие рекламные блоки эффектно смотрятся на экранах с любым разрешением.

К недостаткам относят довольно узкие возможности программы — практически все выполняется по шаблонам, оригинальную анимацию с помощью Google Web Designer не создать. Кроме того, пока не хватает полноценных обучающих программ.

Анимированные рекламные объявления можно создавать и иными способами, благо есть другие программы и сервисы, но вышеперечисленные методы доказали свою эффективность. Созданные с их помощью HTML-баннеры соответствуют техническим требованиям и стандартам востребованных рекламных площадок.

Создание адаптивного резинового баннера в Google Web Designer

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

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

Программа Google Web Designer позволяет создать гибкий макет, в котором компоновка элементов баннера меняется при изменении ширины окна.

Создание адаптивной страницы

В начале работы программа Google Web Designer предлагает создать новый файл или открыть уже существующий. В первом случае далее требуется указать название и месторасположение нового файла, а затем ниже установить флажок «Адаптивный макет». Если открыт уже существующий документ, необходимо найти панель «Адаптивные» и поставить соответствующий флажок там.

Обратите внимание: создание адаптивного макета доступно не для всех типов файлов.

Положение и размеры

Ширину и высоту адаптивного баннера задают на уровне 100% — в этом случае HTML5-документ будет занимать все отведенное для него место на странице сайта.

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

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

Изменение стиля

Функционал Google Web Designer позволяет обеспечить гибкое отображение визуального контента баннера в зависимости от размеров областей просмотра и их ориентации. К примеру, информация на мониторе может отображаться в два столбца, а на экране смартфона — в один.

Чтобы задать изменение (переопределение) стиля, следует на панели «Адаптивные»:

• внести требуемые изменения в «Правила по умолчанию»;
• указать выбранные размеры или их диапазон в «Правилах обработки мультимедиа», задать стили отображения.

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

Пошаговая инструкция по созданию баннера

 После того, как документ создан и заданы размеры баннера, порядок действий следующий:

1. Подготавливаются исходные изображения, включая кнопки, логотипы и т.д. Рекомендуется заранее оптимизировать их для веб-страниц, чтобы уменьшить вес.
2. Фон. Для настройки следует зайти в раздел «Свойства» — «Стиль». Выбирается цвет, эффекты (градиент) и т.д.
3. Построение баннера. Из папки с изображениями перетаскиваются графические объекты и размещаются на фоне. Требуется получить конечный вид баннера. Каждому объекту присваивается идентификатор и стартовая позиция на временной шкале в нижней части экрана.
4. Настройка анимации. Важно продумать очередность появления объектов и выбрать анимационные эффекты из предусмотренных программой. Определив первый объект, его выбирают в нижней панели и подводят курсор к выбранной точке на временной шкале. В меню, появившемся при нажатии правой кнопки мыши, выбирается пункт «Вставить ключевой кадр». Одновременно в начале временной шкалы появляется исходный кадр, к которому можно применить выбранный эффект, например сделать прозрачным, используя раздел «Свойства». Изменяя положение ключевого кадра на шкале, можно отрегулировать плавность анимации. Аналогично настраивается анимация остальных объектов. В ходе настройки можно просматривать анимацию, включая кнопку «Воспроизведение».
5. Настройка временных интервалов. Чтобы визуально сформировать каждый кадр и установить между ними определенные временные интервалы, следует перейти в «Быстрый режим» (три квадратика рядом с кнопкой воспроизведения).
6. Настройка событий. Раздел «Компоненты» в левой панели поможет сделать кнопки на баннере кликабельными, обеспечить переход на страницы с партнерскими предложениями.
7. Предварительный просмотр. Нажав на соответствующую кнопку в нижней части панели, можно посмотреть, как будет выглядеть и функционировать готовый баннер на сайте.
8. Если разрабатывается гибкий макет, необходимо воспользоваться инструментами выравнивания и распределения объектов, а также возможностями переопределения стиля (панель «Адаптивные»).
9. Готовый баннер публикуется на сайте.

Фото: pixabay.com, автор- geralt