Как сделать баннер html5: Все о HTML5-баннере и 4 продвинутых метода их создания

Содержание

как сделать резиновый баннер HTML5 — «BannerMakers»

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

Тянущийся баннер – современный формат баннера, который привлекает дополнительное внимание пользователя и предлагает больше пространства для визуализации вашего рекламного креатива.

Что такое тянущийся баннер?

Тянущийся баннер в HTML5 (он же “Резиновый HTML5-Баннер”, “перетяжка”, “адаптивный баннер”) – это баннер, который не имеет фиксированной ширины. Такой баннер умеет подстраиваться под ширину сайта, заполняя все доступное пространство. Баннер одинаково хорошо смотрится и на маленьком экране смартфона, и на большом настольном мониторе, без пустот или обрезов по краям.

Рассмотрим на примерах:

Так выглядит резиновый HTML5-баннер и фиксированный баннер.

Зачем нужен тянущийся (резиновый) баннер?

Главный плюс использования такого баннера – больше пространства для вашей рекламы. Баннер, занимающий всю ширину сайта, становится визуально главным на странице и привлекает внимание пользователя.

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

Способы реализации (как изготовить).

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

Способ 1
Баннер с растягивающимся фоном.

В таком варианте исполнения, значимая информационная часть баннера остается в рамках фиксированных границ, а растягивается только фон по бокам баннера (так называемые “крылья”, “уши”). В качестве тянущегося фона можно использовать как изображение, так и однородную заливку подходящим цветом.

Способ 2
Пропорциональное растяжение.

В этом случае элементы баннера (логотип, тексты, кнопка) позиционируются пропорционально ширине баннера. Фактически при уменьшении или увеличении ширины баннера изменяется и расстояние между элементами баннера.

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

Способ 3
Адаптивная верстка.

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

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

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

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

Выбор способа изготовления, тянущегося HTML5-баннера, зависит от условий размещения и содержания баннера. Опираясь на опыт, мы всегда предложим оптимальное решение и подробно разъясним – почему выбран именно такой способ.

Особые требования.

К тянущимся HTML5-баннерам предъявляется ряд специальных требований рекламных сетей и площадок.

Такие требования включают:

ограничения в весе баннера в килобайтах;
требования к коду баннера и используемых библиотек;
требования к оформлению обработчика клика по баннеру.

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

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

Как расшифровать эти непонятные цифры в описании баннера?

При описании формата тянущегося баннера обычно используется такая запись: Баннер 100%х90 (min 768px)

Это означает, что площадка принимает к размещению баннер шириной в 100 процентов (тянущийся на все окно браузера), высотой в 90 пикселей. При этом минимальная ширина области, в границах которой должна уместиться вся значимая информация – 768 пикселей.

Минимальная ширина – значимый для изготовления баннера параметр, поэтому желательно всегда уточнять его размеры у рекламной площадки.

Один за всех. Тянущийся баннер вместо фиксированных.

Правда ли, что тянущийся баннер способен заменить несколько фиксированных баннеров близкого формата?

Да. Например, правильно изготовленный тянущийся баннер 100%х90 может быть размещен на местах фиксированных баннеров: 728x90px, 760x90px, 960x90px, 1200x90px и подобных размеров той же высоты. Ведь он “резиновый” и будет корректно отображаться при любой ширине.

Так что мне заказать? Тянущийся (резиновый) HTML5-баннер или обычный, фиксированного размера?

В данный момент, наиболее популярные форматы для рекламных сетей (Google adWords, РСЯ Яндекс, Адфокс, Адривер) – это баннеры фиксированного размера (768х90px, 300х250px, 160х600px и т.д). Поэтому, для проведения рекламной кампании в этих сетях, лучше заказать комплект анимированных баннеров HTML5 стандартных фиксированных размеров. Стоимость и условия смотрите здесь.

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

Адаптивные баннеры на HTML5 и CSS3 / Хабр

Адаптивный веб-дизайн — значительное достижение для всего Интернета. Мы больше не скованы давно устаревшей моделью «печатной страницы» со статическим содержимым, разбитым на области фиксированного размера. Сегодня Интернет способен жить, дышать и приспосабливаться, заполняя всё пространство, доступное на экранах различных устройств, начиная от мобильных телефонов — и вплоть до огромных видеодисплеев. Это то, какой и предполагалась Глобальная сеть.

Но есть небольшая проблема. Веб-сайты зачастую содержат баннерную рекламу и традиционные баннеры, не обладающие особой гибкостью. Как flash-, так и GIF-баннеры имеют фиксированные размеры, из-за чего несовместимы с современной адаптивной вёрсткой. Нам необходим новый метод создания баннерной рекламы. Нам нужны «адаптивные» баннеры…

Единственный способ сделать баннер таким же гибким, как и наша HTML5-разметка — написать его на HTML5. Вначале это может показаться бредовой идеей, но я уверяю вас — это не так. В действительности, у такого подхода есть множество достоинств:

HTML-реклама доступна повсеместно, а семантическая разметка сделает её подходящей для скрин-ридеров;
текст, изображения, видео, скрипты и формы — всё это может быть использовано в баннере точно так же, как и на любой веб-странице;
при необходимости баннеры могут задействовать динамические сценарии и базы данных на серверной стороне;
в баннер могут быть внесены изменения уже после его размещения;
файл (набор файлов) HTML-баннера может иметь весьма скромный размер;
banner serving, по существу, сводится к веб-хостингу;
веб-разработчикам не нужно изучать что-либо новое — все технологии остаются теми же, что и при обычной веб-разработке;
и, конечно, при помощи CSS3 медиа-запросов можно заставить HTML5-рекламу «подстраиваться» под любые размеры — ведь именно такое поведение мы ожидаем от адаптивных баннеров!

Во-первых, баннер создается как резиновая HTML5-страница. Мы наполняем её текстом, изображениями, ссылками на требуемую страницу, украшая всё это при помощи CSS3. Во-вторых, такой баннер может быть размещен на любом веб-сайте посредством плавающего фрейма iframe. Есть одна хитрость, задействующая CSS3 медиа-запросы чтобы сделать динамическими размерности iframe’а, и вскоре я расскажу о ней… Однако, по большому счёту, это всё!

Вот пример HTML5-баннера популярного формата 125 x 125 px («квадратная кнопка»). А вот пример того же баннера с измененной шириной. Обратите внимание, как этот баннер ведет себя при изменении размеров окна браузера. Изящно, не правда ли? 🙂

Адаптивная вёрстка требует, чтобы элементы страницы имели переменную ширину, поэтому баннеры тоже должны придерживаться этого соглашения. Высота в адаптивной разметке не столь важна, т.е. мы может выбрать любое необходимое нам значение высоты. Но это не значит, что наш баннер «завязнет» на этом значении — мы можем определить множество значений для любого баннера!

Для сохранения обратной совместимости адаптивные баннеры должны иметь те же значения высоты, что и традиционные. Теоретически мы можем создать баннеры, работающие с любой шириной/высотой, но их слишком сложно конструировать или тестировать. Я предлагаю отталкиваться от минимальной ширины в 88 px и придерживаться следующего набора стандартных высот:

31px «микро»

микро полоса (88 x 31)

60px «кнопка»

кнопка 2 (120 x 60)
половина длинного баннера (234 x 60)
длинный баннер (468 x 60)

90px «баннер»

кнопка 1 (120 x 90)
горизонтальный (ведущий) длинный (728 x 90)

125px «малый прямоугольник»

квадратная кнопка (125 x 125)

250px «прямоугольник средней величины»

вертикальный баннер (120 x 240 *Достаточно близко!)
всплывающий квадрат (250 x 250)
прямоугольник средней величины (300 x 250)

400px «большой прямоугольник»

вертикальный прямоугольник

600px «небоскрёб»

небоскрёб (120 x 600)

широкий небоскрёб (160 x 600)
объявление на полстраницы (300 x 600)

Семь вышеприведённых значений высоты представляют диапазон вертикальных размеров; в сочетании с переменной шириной они покрывают наиболее популярные сегодня форматы баннерной рекламы. Конечно, как и в случае с традиционными баннерами, вы можете использовать иной, нестандартный формат.

Самым замечательным является тот факт, что 14 общепринятых форматов баннеров сводятся всего к семи, причём все они могут быть представлены всего одним HTML5-баннером! В добавок, мой демо-баннер занимает

менее 25k вместе со всеми составляющими (HTML, CSS и JPG-изображение).

Опробуйте эти новые форматы в моём приложении для проверки адаптивных баннеров — с его помощью вы можете тестировать и свои собственные баннеры. Измените размер окна браузера чтобы увидеть, как все они «приспосабливаются».

Иногда может потребоваться, чтобы ваш баннер адаптировался ещё и по высоте — достичь этого можно путем изменения размера iframe’а при помощи CSS медиа-запросов. Я обнаружил, что лучший способ сделать это — назначить высоте и ширине iframe’а значение 100% и обернуть его div’ом со специальным набором размеров в CSS. Вот как это выглядит:

<div>
   <iframe
      src="ad. html"
      border="0"
      scrolling="no"
      allowtransparency="true"
     
     
     >
   </iframe>
</div>

А вот CSS:

/* default height */
#ad {
   height:60px;
}
@media only screen and (height:90px) {
   /* 90 pixels high */
   #ad {
      height:90px;
   }
}
@media only screen and (height:125px) {
   /* 125 pixels high */
   #ad {
      height:125px;
   }
}

Откройте CSS-файл моего адаптивного баннера, чтобы рассмотреть рабочий пример.

Ещё одна замечательная особенность HTML5-баннеров состоит в том, что их можно отслеживать в Google Analytics — как и обычный веб-сайт. Фактически, мы получаем намного больше данных, чем от типичной системы показа рекламы. Вы можете надежно отследить не только количество показов баннера (banner impression tracking), но и рефереров, браузеры, разрешения экранов, мобильные устройства, популярные страны/города и много чего ещё!

Кроме того, задачу отслеживания количества кликов по баннеру можно легко решить, воспользовавшись одним из множества бесплатных сервисов сокращения ссылок. Лично я предпочитаю bit.ly. Если ваш баннер содержит большое количество ссылок, вы сможете отследить их по отдельности. Только не забудьте добавить target=»_top» в гиперссылки, чтобы реклама «вышла» за пределы фрейма, полностью захватив окно браузера.

Адаптивные баннеры можно заставить поддерживать любой набор размеров, но, чтобы не прочёсывать CSS в поисках поддерживаемых значений высоты, я предлагаю записывать их в теге META. Взгляните на пример:

<meta
   name="displayheight"
   content="31, 60, 90, 125, 250, 400, 600" />

Это хорошая практика, потому как тег META является машиночитаемым. В некоторых случаях для корректного отображения вашему браузеру может понадобиться узнать альтернативные размеры.

Для адаптивной вёрстки нужна баннерная реклама с переменной шириной, я и считаю, что HTML5 подходит для этого как нельзя лучше. При помощи маленького CSS-трюка мы можем создать баннер, который один способен принимать все распространённые в настоящее время форматы. Скачайте пример моего баннера и попробуйте сами написать что-то подобное. Не забудьте протестировать ваше творение в моём приложении для проверки адаптивных баннеров. Если вы хотите разместить адаптивный баннер в своём блоге или на веб-сайте, просто скопируйте нижеприведенный код (только установите нужный размер):

<div >
   <iframe
      src="http://matthewjamestaylor.com/responsive-ads/ad.html"
      border="0"
      scrolling="no"
      allowtransparency="true"
     
     
     >
   </iframe>
</div>

Свяжитесь со мной, если у вас есть любые предложения или багфиксы. У меня не было возможности протестировать всё в IE… У меня сын, которому всего 11 дней, и 20-месячная дочь, поэтому у меня не так много свободного времени… Невероятно, но мне всё же удалось дописать эту статью!

Некоторые достаточно критично относятся к внедрению HTML5 (связки HTML5+CSS3+JavaScript) в различные области разработки: создание баннеров, игровая индустрия и проч. И я не могу не согласиться, что сегодня существует достаточно проблем, связанных с производительностью (CSS3 Transition, JavaScript), отсутствием достаточно мощных дизайнерских инструментов (Adobe Flash vs Adobe Edge) или необходимостью изучения и разработки новых технологий, приёмов и подходов. Но лично для меня очевидно, что все эти проблемы

не

критичны, поэтому, с учётом темпа развития всего и вся в IT, остается лишь немного подождать.

P.S. В HTML5 для тега iframe добавлен атрибут sandbox, позволяющий накладывать ограничения на содержание фрейма. Возможно, этот факт поможет сгладить ту волну паранойи, которая иногда охватывает iframe. Правда, с поддержкой в разных браузерах пока слабовато (проверить можно тут).

UPD: Немного здравой критики.

Различные способы создания баннерной рекламы HTML5 — Баннерная реклама HTML5 в Adobe Animate. Для визуалов, а не разработчиков.

Animate — Баннерная реклама HTML5 в Adobe Animate.

Дэниел Вальтер Скотт || ВИДЕО: 7 из 53

Загрузить файлы упражнений

Введение

В этом эпизоде мы рассмотрим различные способы создания рекламных баннеров HTML5.

Стенограмма видео

Итак, как еще можно создать рекламные баннеры HTML5? То, что мы собирались сделать в этом курсе, Adobe Animate, и, по моему профессиональному мнению, это тот, который станет отраслевым стандартом, это еще не совсем отраслевой стандарт, но Adobe прикладывает все усилия для этого. Раньше у них была вспышка, поэтому я думаю, что это будет самый большой продукт. Итак, Adobe Animate. Вы все еще можете использовать устаревший, помните краевую анимацию. Тот, который был снят с производства, вы можете полностью это сделать. Я учил людей, как добавлять баннеры в течение долгого времени, в течение последнего года или около того, прежде чем это было прекращено. И это прекрасно работает, так что они отлично подходят для визуалов. Если вы графический дизайнер, веб-дизайнер или визуальный человек, вам придется использовать некоторые из этих полезных анимационных продуктов. Еще одним из них является веб-дизайнер Google или GWD. Это сделано Google, это хорошо, очень похоже на edge animate и adobe animate. Единственная проблема заключается в том, что он очень специфичен для сети Google.

Итак, если вы размещаете рекламу только для Google double click или adwords и все, то этот продукт может быть для вас. Это довольно хорошо, я играл с ним, хотя я не использовал его так часто, как некоторые продукты Adobe. Так что это может быть продуктом для вас, это просто небольшая проблема, когда вы хотите пойти и сделать это для sizmek или любой другой рекламной сети или любой другой рекламной сети, с которой вы можете это делать. Веб-дизайнер Google, проверьте это.

Если вы больше кодер или разработчик, то вы собираетесь использовать что-то вроде чистого кода. Вы захотите открыть текстовый редактор, и вы захотите начать печатать и делать это, синтаксис для этого, а не анимировать его на временной шкале, вы захотите посмотреть на что-то вроде зеленого носка, например, на свою обувь и свой носок, так что зеленый носок. Поэтому его также называют анимационной платформой для зеленых носков. Или GSAP довольно часто упоминается. Это способ сделать то же самое, что и здесь, в анимации, но только в коде. Другой способ сделать то же самое в коде, возможно, создать JS, поэтому создание JS — это еще один способ сделать это в коде, поэтому вы хотите пойти и посмотреть, сможете ли вы найти такие вещи, если вы предпочитаете делать это в код. Теперь я говорю очень быстро, потому что я выпил большой кофе, и я буду медленнее для следующего видео, я обещаю. Давайте перейдем к этому сейчас.

Каковы передовые методы создания баннеров HTML5?

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

Дело не только в эстетике, хотя они чрезвычайно важны, а в том, когда и где вы их размещаете и как вы используете данные, которые они могут вам предоставить.

Лучшие рекламные баннеры — красивые и функциональные, они выведут вашу цифровую рекламу на новый уровень. Вот как их производить.

Как создавать баннеры HTML5

Во-первых, важно отметить, что делать это в одиночку может быть сложно, особенно если вы надеетесь использовать программную рекламу вместе с баннерами HTML5, и у вас нет большого опыта.

Надежная программатик рекламная компания может помочь вам в этом, особенно та, которая может предложить вам непрерывный комплексный сервис на протяжении всей вашей кампании и при создании баннеров HTML5.

Оптимальные рекламные баннеры можно создавать с помощью Google Web Designer (или вы можете попросить рекламное агентство сделать это за вас), так что вы можете начать с загрузки этого программного обеспечения прямо из Google.

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

Наряду со звуковыми и визуальными элементами рекламы баннеры HTML5 также содержат код HTML5. Этот код позволяет рекламе работать и адаптироваться к различным средам, например, к мобильным устройствам и настольным компьютерам. Чтобы ваша реклама работала на разных устройствах, необходимо следовать рекомендациям по рекламе мобильных баннеров.

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

Используйте анимацию

Превратите скучную статичную рекламу в динамичную, привлекательную и интересную рекламу с помощью анимации HTML5.

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

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

Используйте призыв к действию

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

Они могут особенно хорошо работать с дополнительной анимацией в объявлениях HTML5, поэтому пришло время проявить творческий подход.

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

В зависимости от тона голоса, который использует ваш бренд, может быть лучше подразумевать призыв к действию, а не просто заявить: «Купите сейчас, осталось только ограниченное количество товаров». вместо этого предпочитая говорить: «Когда ты получишь свое?»

Включить интерактивные кнопки

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

Доступность является ключевым моментом в современном цифровом мире, и, к счастью, ваши медийные объявления HTML5 могут с легкостью передать это.

Если это похоже на ссылку, по которой можно щелкнуть, сделайте так! Прозрачность и функциональность являются ключевыми факторами при разработке рекламных баннеров, основанных на передовых методах: «фальшивые» 2D-кнопки, которые представляют собой просто изображения, а не настоящие ссылки, могут раздражать вашего зрителя.

Оптимизация для различных размеров дисплея

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

Все зависит от практики и тестирования, поэтому убедитесь, что вы тестируете свои объявления на предмет оптимизации на всех устройствах. В конце концов, большая часть онлайн-населения мира выходит в Интернет через телефон или планшет.

Используйте правильные цвета

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

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