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

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



Сегодня адаптивные шаблоны – это целое открытие в мире веб-дизайна. Все стараются внедрить эту технологию в свои сайты, так как сегодня огромный сегмент пользователей использует интернет через мобильные устройства. Огромное число владельцев веб-сайтов зарабатывают деньги с рекламы. Но что происходит с рекламой, когда веб-сайт сжимается до 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. Они реализовали это за счет фиксирования ширины колонки и сделали так, что рекламный блок занимает это пространство, когда окно просмотра уменьшается в размере до одной колонки. Этого не так уж и просто добиться, но вариант очень эффективен, согласитесь.

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

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

Если у вас есть какие-то идеи или советы относительно того, как можно развить подобные технологии, милости просим в комментарии!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 6967   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Шторы в самаре
Закажите шторы в Интернет магазине с доставкой. Низкие цены. Звоните
shtora63.ru
1с купить
Автоматизация предприятий на базе программных продуктов системы фирмы 1С
mnsrv.ru


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Январь 2017    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031