Главная > Реклама > Адаптивная реклама: один размер на все случаи

Адаптивная реклама: один размер на все случаи


18 июля 2012, 13:20. Разместил: Design FactoRy
Сегодня адаптивные шаблоны – это целое открытие в мире веб-дизайна. Все стараются внедрить эту технологию в свои сайты, так как сегодня огромный сегмент пользователей использует интернет через мобильные устройства. Огромное число владельцев веб-сайтов зарабатывают деньги с рекламы. Но что происходит с рекламой, когда веб-сайт сжимается до 320 пикселей в ширине? Она исчезает или полностью разрушает структуру вашего сжатого сайта.

Есть несколько ключевых проблем, с которыми сталкивается адаптивная реклама:

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

Судя по приведенным выше ключевым аспектам, можно сделать вывод высокой необходимости преобразовать рекламные блоки в совместимые с адаптивными шаблонами. На данный момент это можно реализовать несколькими путями. Самый простой способ – это отображать рекламу с помощью HTML и javascript (лучше всего использовать со статичными объявлениями, ниже вы прочтете о том, как это сделать), либо использовать платформу адаптивных рекламных объявлений – и это самое эффективное решение.

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

Но, онлайн-журналам, большим новостным веб-сайтам и другим публицистическим ресурсам требуются гораздо большие рекламные кампании и сами объявления больших размеров. Рекламодатели предпочитают, чтобы их объявления были большими. Самый популярный формат – 300х250 пикселей.

Имеет смысл подумать о том, чтобы начать с самого маленького размера (обычно это 320 пикселей) и подняться вплоть до 1382 пикселей – особенно если речь идет о рекламе. Если вы можете успешно интегрировать рекламное объявление в дизайн веб-сайта шириной 320 пикселей, то вряд ли у вас будут проблемы с тем, чтобы сделать это при больших размерах – здесь все заключается в перемешивании элементов и правильном расположении рекламных объявлений. Вы можете оградить себя от головной боли, если заранее продумаете рекламные стратегии.

Возможные решения

* Перераспределение трафика
* Адаптивные HTML-объявления с применением интерфейса javascript
* Платформа гибких адаптивных рекламных объявлений

Большие форматы объявлений типа 970х250 пикселей не подходят для экрана iPhone, к примеру, и поэтому неплохо было бы спрятать подобные объявления для тех, кто использует мобильные устройства, и отображать тем, кто заходит на сайт посредством ПК. Даже если мы воспользуемся функцией display:none, то код объявления будет загружен – это не решает проблему, а наоборот, создает новые.

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

Перераспределение трафика

Самое лучшее возможное решение, в которое вы вряд ли поверите, заключается в лучшем планировании! Подумайте о том, какой фактор является первостепенным, когда вы продаете рекламные объявления на адаптивном веб-сайте? Конечно же, объем трафика. И учитывая это, вы можете сделать следующее.

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

Адаптивные HTML-объявления с использованием javascript-интерфейса

Данный метод отлично подходит только для статичных рекламных объявлений, он не решит проблему с rich-media, но преимущество здесь в том, что его очень легко реализовать. Объявление реализуется при помощи HTML. Каждое объявление представляет собой статичное изображение. Вместо встраивания логики в media queries, вы можете добавить JS-интерфейс, набор конфигураций вроде этого:

// Ad config

var ads = {
leaderboard: {
width: 728,
height: 90,
breakpoint: false,
url: '728x90.png'
},
rectangle: {
width: 300,
height: 250,
breakpoint: 728,
url: '300x250.png'
},
mobile: {
width: 300,
height: 50,
breakpoint: 500,
url: '300x50.png'
}
};

Это позволяет вам определить вашу адаптивную кампанию несколькими настройками, а затем все остальное делает javascript. Здесь используется метод window.matchMedia, который на данный момент доступен только в Chrome, Firefox и Safari. Посмотреть пример

Платформа гибких адаптивных рекламных объявлений

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

Адаптивная реклама: один размер на все случаи

Лучшие примеры реализации адаптивной рекламы можно наблюдать на сайте The Boston Globe, где был интегрирован рекламный блок MMU. Они реализовали это за счет фиксирования ширины колонки и сделали так, что рекламный блок занимает это пространство, когда окно просмотра уменьшается в размере до одной колонки. Этого не так уж и просто добиться, но вариант очень эффективен, согласитесь.

Адаптивная реклама: один размер на все случаи

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

Если у вас есть какие-то идеи или советы относительно того, как можно развить подобные технологии, милости просим в комментарии!
Вернуться назад