Главная задумка баннеров, созданных по технологии HTML5 – привлечь больше внимания пользователей к рекламе вашего продукта. За счет чего? За счет того, что такие рекламные баннеры – яркие, живые, интерактивные и вызывают неподдельный интерес аудитории.
В чем же выгода? С помощью баннеров в формате HTML5 вы реализуете сложнейшие задумки, на которые способна ваша фантазия! Например, поставить на баннер счётчик времени – как это сделали мы по одному из наших клиентов:
Такой счётчик работает как часы, ведет отсчёт идет до указанной даты, вызывая ощущение, что человек что то упускает.
А теперь рассказываем, как сверстать баннеры HTML5
Сразу оговоримся – для супер-верстальщиков с безграничными знаниями в этой теме нового ничего не найдется. Наше руководство больше рассчитано на новичков в этом деле ☺
Чтобы приступить к работам, нужен макет баннера. Его возможные форматы – psd, ai и прочие, но чаще всего в psd.
1. Ознакомимся с правилами верстки и спецификацией для рекламных баннеров HTML5 в Google Ads и Yandex. Перейдите по ссылкам и обратите внимание на требования системы:
2. Дальше делаем стандартную разметку HTML5, бережно выполняя все требования Google и Yandex.
После создания HTML5-разметки вид баннера преобразуется:
3. Теперь приступаем к написанию стилей и сохраняем background картинок. Наш совет – прогоните все изображения через сервис TinyPNG. Это уменьшит вес картинок, не изменив их качество. Но зато в разы повлияет на загрузку сайта ☺
Обращаем внимание – сделайте текст рекламного баннера контрастным и читабельным. Минимальный размер шрифта – 11 pt. Если хотите добавить в баннер анимацию – сделайте это циклично. На один цикл заложите не больше 18 секунд, а перерыв между ними сохраните в течение 1 минуты.
15 Апр 2024
646