Адаптивный рекламный баннер при помощи HTML5 и CSS3

Адаптивность — это один из важных критериев для сайтов, которые сейчас создаются. Многие пользователи используют экраны мобильных телефонов для просмотра веб-ресурсов. На веб-сайтах часто можно встретить баннерную рекламу, и традиционные рекламные баннеры не являются гибкими. Flash и анимированные GIF-баннеры имеют фиксированный размер в пикселях, поэтому они не совместимы с современными адаптивными макетами.

Нам нужен новый способ сделать баннерную рекламу.

Нам нужны адаптивные баннеры

Новый формат для баннерной рекламы

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

  • HTML-объявления полностью доступны, а семантическая разметка делает их совместимыми с различными разрешениями.
  • Текст, изображения, видео, Javascript и формы могут быть использованы в баннере так же, как любая веб-страница.
  • Баннеры могут использовать динамические серверные скрипты и базы данных, если это необходимо.
  • HTML-объявления могут занимать очень мало дискового пространства.
  • Обслуживание баннера по сути такое же, как веб-хостинг.
  • Нет новой технологии для веб-разработчиков — она ​​такая же, как обычная веб-разработка.
  • и, конечно, HTML5-объявления можно адаптировать к любому размеру с помощью медиа-запросов CSS3 — это как раз то, что нам нужно для адаптивных баннеров!

Итак, как мы можем сделать отзывчивую рекламу?

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

Во-вторых, реклама может отображаться на любом веб-сайте с помощью iframe.

Единственная хитрость заключается в том, чтобы сделать размеры iframe динамическими с помощью медиазапросов CSS3, я расскажу об этом чуть позже … Но в основном, все!

Посмотрим как это работает

Вот пример объявления HTML5, показанного в популярном размере 125×125 пикселей:


А вот то же объявление с гибкой шириной:


Обратите внимание, как реагирует второе рекламное объявление, когда вы изменяете размер окна вашего браузера … Довольно круто! 🙂

Адаптивные макеты требуют, чтобы элементы страницы имели переменную ширину, поэтому баннеры теперь должны следовать этому требованию.

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

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

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

Я предлагаю придерживаться минимальной ширины 88 пикселей и иметь следующий набор стандартных высот:

  • 31px «микро»
    микробар (88 х 31)
  • 60px «кнопка»
    кнопка 2 (120 х 60)
    полу баннер (234 х 60)
    полный баннер (468 х 60)
  • 90px «баннер»
    кнопка 1 (120 х 90)
    таблица лидеров (728 х 90)
  • 125px «маленький прямоугольник»
    квадратная кнопка (125 х 125)
  • 250px «средний прямоугольник»
    вертикальный баннер (120 х 240 * достаточно близко!)
    квадратное всплывающее окно (250 х 250)
    средний прямоугольник (300 х 250)
  • 400px «большой прямоугольник»
    вертикальный прямоугольник (240 х 400)
  • 600px «небоскреб»
    небоскреб (120 х 600)
    широкий небоскреб (240 х 600)
    объявление на полстраницы (300 x 600)

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

Самое лучшее в отзывчивой рекламе — мы только что сократили 14 обычных баннеров до семи высот, и все они могут отображаться в одной рекламе HTML5!

Не только это, но моя демонстрационная баннерная реклама в целом стоит менее 25 КБ (HTML, CSS и изображение JPG). Это меньше, чем максимальный размер файла для одного маленького баннера!

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

Изменение размера фреймов с помощью медиазапросов CSS

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

А вот и CSS:

Отслеживание показов и кликов

Самое лучшее в объявлениях HTML5 — их можно отслеживать с помощью Google Analytics, как и на обычных веб-сайтах.

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

Это также тривиальная задача — отслеживать клики по вашему объявлению, используя одну из многочисленных бесплатных служб сокращения URL-адресов. Я лично предпочитаю bit.ly. Если ваше объявление имеет несколько ссылок, вы можете отслеживать их по отдельности. Просто не забудьте использовать target = «_ top» в своих ссылках, чтобы ваше объявление вылетело из фрейма, и ссылка заполнила все окно браузера.

Запись размеров баннера в тегах META

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

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

 

Если у вас есть какие-нибудь вопросы, пишите в комментарии, я обязательно вам отвечу

Чтобы не пропустить выход новых статей, подписывайтесь на наш telegram-канал

 

Оставьте ответ

comment-avatar

*