Как создать анимированный баннер в HTML5: пошаговая инструкция

Google Web Designer — это бесплатный инструмент от компании Google, позволяющий создавать баннеры стандарта HTML5 и CSS3. Сегодня я расскажу, как начать работать в Google Web Designer и создать там первый свой баннер для рекламы в КМС.

  • Что это;
  • Начало работы;
  • Шаблоны;
  • Создание баннера;
  • Загрузка в Google Ads.

Что такое HTML5-баннеры

HTML5 баннеры — это анимированные баннеры, которые используются во многих рекламных системах, в том числе Яндекс.Директ, Google Ads, «ВКонтакте» или Facebook. Их основные преимущества:

  • адаптированы под все браузеры: благодаря использованию HTML-разметки могут показываться во всех браузерах;
  • подходят для любого типа устройства;
  • относительно малый вес: в отличие от Flash HTML5-баннеры весят заметно меньше, поэтому при их загрузке страницы не тормозят и не грузятся долго;
  • в них легко интегрировать несколько кнопок или элементов;
  • будут поддерживаться в дальнейшем: практически все компании, разрабатывающие браузеры (в частности Google, Mozilla, Apple и другие) отказываются от Flash-технологии и переходят на HTML5.

После завершения расстановки кадров можно посмотреть итоговую работу, кликнув на «Смотреть».

Выбираем «Мышь — сlick».

Кликаем на gwd-ad.

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

Также доступен предварительный просмотр баннера в браузере — «Предпросмотр — Chrome».

Выбираем путь для сохранения.

В выпавшем списке выбираем «Загрузить медийные объявления».