HTML5- баннеры: для чего нужны и как можно их сделать
Под баннером подразумевается рекламный блок на сайте, состоящий из красиво оформленных текста и изображения. Он должен отвечать имиджу компании, а его визуальная часть должна привлекать посетителей для ознакомления с рекламируемым продуктом. Статья про 10 правил эффективного баннера тут.
Популярные виды объявлений на сайте:
Графический — простой вид баннера для рекламы в Интернете. Состоит из изображения определенного размера и содержит ссылку на рекламный ресурс.
Флеш-баннер — имеет большие возможности для анимации, это позволяет лучше передать информацию с помощью комбинации векторной и растровой графики.
HTML5-баннер —комбинация HTML-элементов с применением анимаций и хорошего визуального оформления, адаптированных под любые устройства и браузеры.
Главные отличия HTML от других типов баннеров
По сравнению с другими методами создания баннеров, технологии HTML5 дают ряд преимуществ для привлечения аудитории на ресурс:
Существенным недостатком флеш-технологий стал постепенный отказ от них крупных компаний, таких как Apple, Mozilla и Amazon. Основным толчком для исчезновения Flash стал Google. Сначала они отключили Flash-анимацию в Google Chrome, а затем отказались от Flash-объявлений в своих сервисах поисковой рекламы, отдав предпочтение HTML5.
Способы создания HTML-баннеров
Разработка баннера начинается с создания отдельной страницы и встраивается на сайт через «iframe». Существует несколько методов разработки рекламных баннеров на сайт, мы рассмотрим самые популярные.
1. Создание фрейма с помощью CSS3 и JavaScript
Фрейм позволяет загружать в область заданных размеров любые независимые документы. Это может быть разный HTML-код с использованием стилей и скриптов для оформления.
Также возможна реализация баннера через область «canvas», в которой разрабатываются анимации, рисунки, графики и даже игры при помощи JavaScript. Для ускорения разработки разрешается воспользоваться сторонними библиотеками, например CreateJS.
See the Pen NaQEbx by Alexandr (@vinechka) on CodePen.
2. Adobe Edge Animate
Имеется более 30 встроенных эффектов, что упрощает время создания качественной анимации в несколько раз:
Основные преимущества Adobe Edge Animate:
По окончанию работы получаем все необходимые документы для размещения баннера на сайте. Images — папка с графическими элементами баннера, несколько файлов JavaScript, html и файл формата An — для последующего редактирования файла в программе.
Есть и несколько недостатков:
3. Adobe Animate CC
Animate CC — это переименованный продукт Adobe Flash Professional. В последнее время технология Flash растеряла доверие пользователей, программа нуждалась в смене названия и нескольких доработках. По сути, это та же самая программа Flash Professional, но в которой файлы дополнительно сохраняются в HTML5 и JavaScript.
Интерфейс очень схож с Flash Professional, но возможности у программ различаются.
Преимущества Animate CC:
4. Google Web Designer
Google порадовал нас бесплатным редактором, специально созданным для реализации html-баннеров. Google Web Designer полностью заточен на реализацию рекламы, основной уклон которой направлен на AdWords. Если мы посмотрим на окно создания нового файла, заметим, что в программу уже встроены размеры шаблонов рекламы.
Преимущества Google Web Designer:
Все способы, представленные выше, не новые, но они проверенные. А значит, есть гарантия, что созданные html-баннеры пройдут модерацию на большинстве рекламных площадок, так как их технические требования соответствуют общим стандартам.
Существует еще множество других программ и сервисов, способных дать качественный продукт, но мы рассмотрели 4 основных способа разработки продвинутого HTML-баннера с интересной анимацией, которые используем в своей работе.
Остались вопросы? Задавайте в комментариях. Поможем и советом и делом.
Разработаем для вас баннеры или рекламную кампанию целиком »
Что такое баннеры и баннерная реклама в интернете
Веб-баннер — это статическое или динамическое изображение, отображаемое на веб-странице. Обычно состоит из изображения, названия компании или логотипа, текста и призыва к действию (Call-to-action, далее CTA), побуждающего пользователей кликать по баннеру. Главная цель баннерной рекламы — продвижение бренда и/или побуждение посетителей перейти с рекламной площадки на сайт рекламодателя.
Виды баннеров: HTML5, GIF-баннеры, MPEG4 (видео) и статичные
Баннеры можно классифицировать по-разному. Если брать сугубо техническую составляющую, то баннеры разделяются на четыре основных вида:
Что такое HTML5 баннер?
Баннеры, выполненные на основе HTML5, представляют собой совокупность HTML-кода, анимации и уникального оформления. Такие баннеры с каждым днем становятся более популярными ввиду адаптивности (которая позволяет корректно отображать баннер на любых устройствах), небольшого размера и возможность отслеживания статистических данных.
Gif-баннер и его отличия от HTML5
Gif — это тоже формат анимированных изображений. Именно gif-баннеры использовались на заре становления интернета. Позже их сменили аналоги на Flash, а на данный момент пальму первенства получил HTML5. Главными отличиями Gif-баннера от аналога на HTML5 является его больший вес, замедляющий загрузку страницы, отсутствие адаптивности, а также общая примитивность (отсутствие эффектов, меньшая плавность анимации и т.д.).
Статичный баннер, где используют?
Статичный баннер — это простое изображение (в формате PNG, JPEG, GIF), лишенное анимации и каких-либо эффектов. Они играют информативную и рекламную роль, а зачастую их используют владельцы для своих собственных сайтов, либо прямые рекламодатели. Обычно их размещают в слайдерах, футере или в верхней части сайта (шапка) Данный тип баннеров — актуален и по сей день, ведь его эффективность, измеряемая в CTR, демонстрирует хорошие показатели.
Флеш баннеры и куда они делись
Flash-баннеры до «убийства» одноименной технологии были крайне распространены. Такие баннеры отличались отличным оформлением: могли похвастаться плавной анимацией, высоким качеством изображения, а также высокой интерактивностью (т.е. пользователь по задумке разработчика мог взаимодействовать с элементами баннера).
Сегодня технология Flash официально не поддерживается разработчиком, соответственно, баннеры также канули в лету. Причин этому несколько:
А пришедший на замену HTML5 — полностью лишил флеш-баннеры какой-либо актуальности.
Где используются баннеры
Сегодня в интернете принято выделять два типа рекламы: контекстную и медийную. Несмотря на схожесть и наличия много общего, контекстная реклама ориентирована исключительно на целевую аудиторию. Медийная реклама, как и телевизионная реклама, заточена на широкую аудиторию и призвана сформировать имидж бренда или познакомить с новым продуктом.
Баннеры — инструмент, который объединяет и медийную и контекстную рекламу, поскольку используется и там, и там. Как правило, HTML баннеры используют крупные компании и развивающиеся проекты, работающие над продвижением собственного бренда.
Рекламные сети в Рунете
Русскоязычный сегмент интернета — один из наиболее масштабных: ежедневно создаются сотни сайтов, публикуются десятки тысяч статей и другого контента, а аудитория насчитывает сотни миллионов пользователей. Неудивительно, что в этом сегменте представлено множество рекламных площадок, привлекающих как рекламодателей, так и владельцев веб-сайтов. Наиболее популярными из них являются:
Технические требования к баннерам
Каждая рекламная сеть имеет свой перечень требований, предъявляемых к баннерной рекламе. Обычно они включают в себя:
Кроме этого, в зависимости от рекламной площадки, могут выдвигаться требования к дизайну баннеров:
Для HTML5 баннеров существуют отдельные требования площадок:
Конвертация баннеров
Конвертация баннера представляет собой изменение его формата. Чаще всего конвертация происходит:
Что такое ресайзы?
Ресайз баннера (resize — изменение размера) представляет собой изменение оригинального баннера (или мастер-баннера), созданного на основе требований заказчика, для его «подгона» к требованиям, выдвигаемым конкретной рекламной площадкой.
Ресайз может включать в себя изменение размеров, пропорций, цветов и других элементов оригинального баннера.
Мастер-баннер — это оригинальный макет дизайна баннера, с продуманным сценарием, анимацией, графикой, на основе которого делаются ресайзы (альтернативные размеры).
Адаптация баннеров под другие языки (мультиязычные баннеры)
Медийная рекламу можно разделить на 3 сегмента:
Адаптация баннеров под другие языки используется в случае международной медийной компании. Где один креатив представлен на разных языках. Яркий пример автоконцерны и зарубежные блокбастеры.
Какие размеры (ресайзы) баннеров существуют?
Согласно требованиям, которые выдвигает Рекламная сеть Яндекс к баннерам (ознакомиться с ними можно здесь), наиболее популярны (вне зависимости от платформы) баннеры следующих размеров:
Самые популярные размеры согласно руководству от Google (ознакомиться с ними можно здесь)
Менее популярные и менее эффективные размеры баннеров
Также существуют адаптивные HTML5 баннеры с «резиновой версткой» (их еще называют «тянущиеся», «резиновые», «перетяжки», «100% баннеры») — это баннеры, которые не имеют заданной ширины и адаптируются под размер экрана. Такой размер считается гораздо более эффективным, так как занимает всю ширину экрана и привлекает к себе больше внимания, однако не все площадки принимают к размещению «резиновые баннеры»
Размеры баннеров для социальных сетей
Фейсбук и Инстаграм
В технических требованиях Facebook отсутствуют жесткие требования к весу баннеров, при загрузке изображения происходит автоматическое сжатие. Важное требование: текста должно быть не более 20% от площади креатива (сервис проверки). Также на баннерах должны отсутствовать кнопки.
Размеры баннеров для ВКонтакте (VKontakte)
Размеры баннеров для MyTarget
Баннерная слепота
Баннерная слепота (баннерный шум) — определение, возникшее в далеком 1998 году. Этот феномен подразумевает сознательное или неосознанное игнорирование рекламных баннеров пользователями веб-ресурсов. Подобное поведение, по мнению психологов, обусловлено предвзятым отношением к любым сторонним элементам на сайте при поиске нужной информации.
Игнорирование пользователями рекламных баннеров — существенно снижает эффективность рекламной кампании. Тем не менее, бороться с этим явлением можно вполне плодотворно. Для этого следует использовать множество проверенных методов, например:
Кто создает баннеры, какие навыки нужны, где учат
Создание эффективного рекламного баннера — сложный процесс, который требует опыта и владения множеством навыков, включая владением специальными программами для создания изображений и анимации, а также языков программирования:
На рынке есть много специалистов, которые могут и вправе профессионально создавать баннеры для любых нужд. Среди таковых могут быть опытные дизайнеры, освоившие HTML5 и CSS. Кроме того, выделяют т.н. баннермейкеров — людей, профессионально занимающихся созданием и оформлением баннеров.
Алгоритм создания баннеров
Что должно быть указано в ТЗ на разработку веб-баннера
Сколько стоят баннеры
Цена на производство баннера зависит от типа исполнителя и его опыта. Обычно, изготовлением баннеров занимаются: медийное агентство, продакшн-студия или фрилансеры.
Объективная цена на услуги по созданию баннеров формируется от сложности работы и навыков дизайнера. Чем сложнее анимация, чем больше кадров, тем дороже будет стоить продукт на выходе. Также цена зависит от наличия исходного материала, придется ли дизайнеру что-то отрисовать с нуля, иллюстрации, айдентика и тд.
Диапазон цен на создание простых баннеров HTML5 на рынке в России, согласно нашему анализу, колеблется от 1500 до 17000 за штуку и до 100000 рублей, если речь идет об интерактивных баннерах, с игрой или другими вариантами взаимодействия с пользователем.
Диапазон цен на создание Gif-баннеров от 500 до 15000 руб/шт
Статичные баннеры (PNG, JPG) в среднем стоят от 500 до 5000 рублей за штуку
Все зависит от сложности работы и навыков дизайнера. Чем сложнее анимация, количество кадров, тем выше конечная стоимость. Резиновые (100% баннеры) стоят всегда дороже, так как привлекается специалист фронтендер.
Программы для создания баннеров
Для создания HTML5 баннеров могут использоваться несколько программ: первые нужны для оформления и создания дизайна (визуальной части), а другие — для кода. Существует множество ПО, включая Adobe Animate, предлагающие внушительный инструментарий для создания анимированных и интерактивных баннеров.
Google, в свою очередь, предлагает собственный одноименный инструмент — Web Designer, позволяющий каждому создать HTML5 баннеры, содержащие игровые, интерактивные и анимированные элементы. По своей сути, этот инструмент автоматизирует использование HTML5, CSS3 и JavaScript, не требуя от пользователей знания этих языков.
Баннеры в формате Gif создаются в любом мало-мальски продвинутом редакторе изображений, включая Animate CC, Photoshop или After Effect. То же самое касается и статичных баннеров, которые можно создавать в фотошопе, Sketch или Figma, и даже в стандартном Paint.
Онлайн-сервисы для создания баннеров
Если раньше для создания качественных и технологичных баннеров требовалось прибегать к дорогостоящим услугам специалистов, то сегодня можно рассчитывать на собственные силы. Более того, нет нужды приобретать и устанавливать программное обеспечение на свой компьютер, поскольку сегодня доступно множество онлайн-сервисов для создания баннеров. Среди них можно выделить:
Эффективность баннера — в чем измеряется?
Эффективность баннера — параметр, который можно объективно вычислить путем сравнения таких показателей, как:
Кликабельность баннера (CTR): что такое и как увеличить
Кликабельность баннера — это количество кликов, приходящихся на 1000 посетителей. Чтобы увеличить этот параметр, следует грамотно отнестись к созданию баннера и применению интерактивных элементов. Кроме этого, следует органично подбирать:
Немаловажное значение имеет размер и расположение самого баннера на странице, а также текст. Сегодня стандартные рекламные предложения не способны «зацепить» рядового посетителя. Необходимо задействовать всю силу текстового и визуального контента в одном баннере, а также предлагать по-настоящему выгодные и цепляющие предложения. Кроме этого, поднять CTR помогут:
Какой должен быть CTR у медийной рекламы?
Так как основная задача рекламных баннеров это повышение узнаваемости бренда, то CTR будет значительно ниже контекстной рекламы, которая обычно содержит прямой ответ на запрос пользователя. Например, в РСЯ или КМС Google успешным показателем рекламной кампании можно назвать CTR от 0,01 до 0,1%, но эти цифры слишком абстрактные и не являются целевыми значениями, показатель вашей кампании может быть значительно выше или ниже.
CTR медийки в социальных сетях, например в Facebook Ads или таргет ВКонтакте также может варьироваться от 0,1 до 0,9%.
Баннер
Баннер и баннерная реклама в интернете
Расскажем, что такое баннеры в онлайн-рекламе и какими они бывают. Поделимся секретами, как сделать креативный и эффективный макет баннера для сайта. Также вы узнаете, зачем нужна баннерная реклама и как отследить её эффективность. В конце статьи расскажем, как разместить баннер в онлайн-рекламе.
Что такое баннер
Баннер — это рекламный блок с изображением, который рассказывает о бренде или продукте. Это может быть изображение с текстом, фотография, анимированная картинка или видео. Как правило, кликнув по баннеру, можно попасть на сайт или соцсети рекламодателя.
Баннерная реклама в интернете — это вид онлайн-рекламы, когда компания размещает на внешних площадках баннеры, чтобы получить визиты на сайт — например, на сайте СМИ. Размещение баннеров происходит на выбранный период и по заданной стоимости. Стоимость баннерной рекламы считается по CPC (стоимости клика) либо CPM (стоимости тысячи показов баннера).
Виды баннеров на сайтах
Какими бывают баннеры в онлайн-рекламе:
Зачем нужна баннерная реклама
Баннерная реклама в интернете ― это эффективный способ получить лиды. Она:
Баннерная реклама помогает:
Эффективность баннерной рекламы
Чтобы понять, была ли успешна запущенная баннерная рекламная кампания, обратите внимание на показатели:
Чек-лист: как сделать рекламный баннер для сайта
Где и как разместить баннер
Есть несколько способов размещения баннеров:
Баннерная реклама в интернете
Медийная реклама – инструмент, который позволяет компаниям решать разные задачи. Он подходит для начала работы – с его помощью можно анонсировать запуск нового бренда, продукта, услуги или акции. Но также его используют для подогрева имеющейся аудитории или увеличения продаж. Более подробно об этом виде рекламных коммуникаций и особенностях эффективного размещения рассказываем в статье.
Что такое медийная реклама, когда её нужно использовать и какие задачи она решает;
Какие форматы баннерной рекламы бывают;
Где размещать рекламные баннеры;
Как оценить эффективность.
Что такое медийная реклама
Медийная реклама в интернете – это рекламные объявления, которые привлекают внимание аудитории за счёт воздействия на эмоции с помощью визуальных и аудиоматериалов. Она помогает бренду сформировать нужные ассоциации с товаром или услугой, а также создать желаемое отношение к компании.
Часто медийную рекламу ассоциируют только с баннерами, но форматы бывают совершенно разные – от изображений, видео- и аудиороликов до интерактивных спецпроектов.
Этот вид коммуникации позволяет брендам решать традиционные имиджевые задачи и повышать узнаваемость марки. Он станет хорошим инструментом перформанс-стратегии. Благодаря ему можно увеличить посещаемость сайта или рассказать целевой аудитории о специальных предложениях, скидках и акциях.
Роль медийной рекламы в начале воронки
Обычно этот вид рекламы в сети используют для работы на верхнем уровне воронки продаж – то есть для охвата холодной аудитории и формирования спроса. Однако если установить на баннере интерактивные кнопки, можно быстрее привлечь качественную целевую аудиторию. Например, если на баннер с рекламой новой услуги добавить кнопки «купить» или «заказать», из всей охваченной аудитории они помогут привлечь подогретую.
Рекламные блоки размещают на любых площадках:
в рекламной сети и поисковой выдаче Яндекса и Google;
в мобильных приложениях;
По данным исследования Zenit Media, к 2022 году расходы на банерную рекламу займут первое место, оставив позадиТВ-рекламу
По оценке международного медиаагентства Zenith, к 2022 году расходы компаний на баннерную рекламу обгонят расходы на телерекламу и составят 31,8% от общего рынка. Доля вложений в рекламу на телевидении продолжит падать и с 29,2% в 2019 году снизится до 25,1%.
Баннерная медийная реклама: какая бывает и чем отличается
Баннерная реклама в интернете – популярный формат, особенно благодаря современным техническим возможностям. Часто она содержит только часть информации о продукте и предназначена, чтобы заинтриговать пользователя, пробудить любопытство перейти на сайт. Основной акцент должен быть сделан на дизайне и правильном размещении.
Виды баннеров
Разновидности форматов
Баннерная реклама: описание, типы, примеры
Сегодня я хочу рассмотреть популярные форматы баннеров в сети и объяснить, почему пользователи не замечают их на самом видном месте.
Что такое баннер
Баннер – это реклама в интернете, которую размещают на сайтах в виде прямоугольных изображений, привлекающих внимание. К такой рекламе относятся картинки, анимации, интерактив или слайды. Пользователь кликает на баннер и попадает на сайт рекламодателя, где находится товар, услуга или продукт.
На сайте для баннера отводится пространство – специальный блок, в рамках которого и показывается баннерная реклама. Администратор сайта может вставить баннер вручную или подгружать рекламу с внешнего источника, после чего получать деньги от рекламодателей, которые захотят арендовать это место под свой баннер.
Баннер можно поставить однажды, и он будет занимать фиксированное место на конкретном ресурсе. Также можно воспользоваться услугами баннерных сетей и купить (продать) размещение баннера на сайтах внутри конкретной сети. Таким образом, рекламодатель может пойти к владельцам сайта напрямую или воспользоваться услугами биржи.
Зачем нужен баннер
Баннеры – это основной и универсальный тип рекламы в сети. Это первый контакт компании с потенциальным клиентом в интернете.
привлекают внимание аудитории,
повышают узнаваемость бренда и компании,
рекламируют продукты и услуги,
содержат призыв к целевому действию.
Типы баннеров
Чтобы не запутаться в разнообразии рекламных баннеров, разобьем их по следующим критериям:
цель рекламной кампании.
Эти критерии определяют, как выглядит баннер на сайте.
По площадке
По размеру
Перед созданием баннера важно определить его размер.
Рекомендованные размеры баннеров установлены «Бюро интерактивной рекламы» и указываются в пикселях.
Несмотря на различные виды баннеров, основной массив рекламы в интернете приходится на три формы:
По формату
Рассмотрим виды рекламных баннеров по формату, от простых к сложным. Чем проще баннер, тем меньше ресурсов тратится на его производство и тем быстрее он подгружается у пользователя. С другой стороны, более сложные форматы притягивают к себе больше внимания.
Простые баннеры можно создать в графических десктопных редакторах (Photoshop, CorelDRAW) или онлайн-сервисах (Canva, Гифовина).
Баннеры посложнее можно создать с помощью Google Web Designer. Для работы в данной программе навыков программирования не требуется.
По цели рекламной кампании
Что такое баннерная слепота
Баннерная слепота – это склонность пользователей интернета не замечать в сети рекламу и все, что на нее похоже. Из-за переизбытка информации у людей появился рефлекс игнорировать ненужные элементы. Даже та реклама, которая нападает на посетителя сайта и не дает ознакомиться с его содержимым, без промедления закрывается.
Средний CTR баннерной рекламы – 0.05%. Это значит, что по баннеру кликают только 5 из 10 000 пользователей, которым показывают рекламу. Это наименьший показатель среди всех форматов рекламы.
Средний CTR различных видов баннерной рекламы
Причины баннерной слепоты
Переизбыток рекламы, особенно той, которая пестрит, отнимает время и раздражает.
Нерелевантная реклама, которая не попадает в целевую аудиторию и предлагает неинтересные пользователям товары и услуги.
Негативный опыт – это любое взаимодействие с рекламой, которое причиняет дискомфорт. Сюда относится потеря контроля над контентом, когда баннер перекрывает собой доступ к сайту и даже перенаправляет с целевого ресурса на вирусный.
Как справиться с баннерной слепотой и заставить пользователя обратить внимание на свою рекламу
Не заставлять и не рекламировать громко
Хорошо, когда баннер выполнен в стилистике сайта и работает по его законам. Поэтому все всплывающие, пестрящие и навязчивые окна лучше убрать и заменить на аккуратные блоки, которые не будут «перекрикивать» сайт. Эти блоки нужно размещать в «тело» страницы. Когда пользователь доберется до них – у него появится повод изучить предложение, а не машинально закрыть его.
Работать на целевую аудиторию
Пользователь обратил внимание на рекламу и не закрыл ее рефлекторно. Теперь баннер сработает, если товар или услуга решает задачи конкретного человека.
Для этого нужно транслировать рекламу на свою целевую аудиторию. Справиться с этой задачей помогает настройка таргетированной рекламы – она будет показываться только потенциальным покупателям. Можно тестировать площадки и размещать рекламу там, где обитают ваши будущие клиенты.
Не менее важно правильно предложить товар или услугу. Для этого нужно сформулировать предложение в мире клиента. Не рассказывать о том, какой товар хороший, а показать, как он решит проблему покупателя. Человек увидит, что воспользоваться таким предложением в его интересах, и тогда реклама сработает.
Тестировать
Не существует универсальной площадки или рекламного объявления, которое сработает на любой аудитории, а эффективных методик очень много. Поэтому полезно пробовать разные варианты и смотреть, какой из них оказался наиболее стоящим.
Не стоит верить в волшебство
Лучшие рекламные баннеры работают как часть продуманной маркетинговой кампании. Невозможно создать баннер, после которого продажи взлетят вверх. Для этого необходимо проработать множество факторов:
сформировать доверие к продукту;
придумать повод купить сейчас, а не отложить на потом;
продукт должен быть достаточно ценным, чтобы его купили без раздумий;
механизм покупки должен работать без помех и быть понятен покупателю.
Иными словами, нужно иметь рабочую «воронку продаж». Если какая-то часть воронки не работает, даже самый хороший баннер вам не поможет.
