Разработка анимированного HTML5 баннера для Google Adwords с использованием GSAP

Не так давно Google дал возможность рекламодателям размещать HTML-баннеры в своей сети Adwords. Не смотря на довольно-таки серьезные технические ограничения и требования, такие баннеры выглядят гораздо привлекательнее классических GIF-баннеров.

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

Основным ограничением HTML5-баннеров стал их вес: разработчик должен уместить все ресурсы в архив с максимальным размером 150Kb. Сюда кроме .htm документа могут быть включены изображения, стили и JS.

Однако, есть и хорошая новость: вы можете подключать к документу Google Fonts и JS-библиотеки, размещенные на серверах Google, и эти ресурсы не будут учитываться в размере архива. Можно подключить старый добрый jQuery, но наибольший интерес представляют библиотеки для анимаций: Greensock (GSAP) и CreateJS. Ссылки на библиотеки можно найти здесь.

Популярность HTML5-баннеров постепенно растет. Очень похожие баннеры можно делать для Яндекса, Mail.ru и ее сети Target, а также другие рекламные платформы.Сейчас многие мастера делают такие баннеры в визуальных редакторах, но визуальные редакторы не всегда позволяют уложиться в лимит 150Kb и реализовать все задуманные визуальные эффекты.

Я люблю код и люблю контролировать анимации, поэтому хочу построить простой и приятный анимационный баннер так же, как строю сайты: в текстовом редакторе, ручками. Выбираю Greensock.

Здесь не будет фрагментов кода, так как всё очень просто и весь код можно увидеть на странице баннера.

Особенности разработки анимационного HTML5-баннера на GSAP для сети Google Adwords

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

1. В первую очередь, создаем .htm и в соответствии с техническими требованиями Google размечаем документ. Нужно указать кодировку документа, размеры, внешние файлы, ссылку через JS.

2. Стили и скрипты можно подключать отдельными файлами. В моем случае стили вынесены в файлы, JS написан в теле основного документа.

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

4. Самая интересная часть: реализация фантазии дизайнера в коде. Здесь необходимо совместить навыки в CSS с возможностями, которые предоставляет Greensock. Базовые фишки хорошо показаны на странице Get started, но в документации можно найти еще много чего интересного. Отмечу, что для примера я использовал именно базовые возможности Greensock.

5. Готовый баннер необходимо упаковать в .zip и отправить на валидацию. У меня ошибок не было с первого раза, поэтому считаю задачу выполненной.

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

Также для тестирования спроса на такие баннеры я создал GIG на Fiverr. Кстати, оказалось, что на данный момент на этой площадке только я представляю технологию  Greensock, запрос GSAP тоже за мной.

Если плотно заниматься HTML5-баннерами, то есть большой документ с рекомендациями на английском.

Предварительный итог

Я не уверен, что буду в дальнейшем заниматься разработкой баннеров. Мой интерес был в двух областях:

  1. Поработать с анимациями на GSAP вместо привычных CSS3-анимаций (интерес удовлетворен)
  2. Проверить спрос на услугу разработки HTML5 -баннеров (это покажет время)

Через месяц после публикации этого поста дополню его статистикой с Fiverr. А пока всё…



Добавить комментарий