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

http://matthewjamestaylor.com/blog/responsive-banner-ads
  • Перевод
Адаптивный веб-дизайн — значительное достижение для всего Интернета. Мы больше не скованы давно устаревшей моделью «печатной страницы» со статическим содержимым, разбитым на области фиксированного размера. Сегодня Интернет способен жить, дышать и приспосабливаться, заполняя всё пространство, доступное на экранах различных устройств, начиная от мобильных телефонов — и вплоть до огромных видеодисплеев. Это то, какой и предполагалась Глобальная сеть.

Но есть небольшая проблема. Веб-сайты зачастую содержат баннерную рекламу и традиционные баннеры, не обладающие особой гибкостью. Как 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'а при помощи CSS медиа-запросов. Я обнаружил, что лучший способ сделать это — назначить высоте и ширине iframe'а значение 100% и обернуть его div'ом со специальным набором размеров в CSS. Вот как это выглядит:

<div id="ad">
   <iframe
      src="ad.html"
      border="0"
      scrolling="no"
      allowtransparency="true"
      width="100%"
      height="100%"
      style="border:0;">
   </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 id="ad" style="width:100%;height:90px;" >
   <iframe
      src="http://matthewjamestaylor.com/responsive-ads/ad.html"
      border="0"
      scrolling="no"
      allowtransparency="true"
      width="100%"
      height="100%"
      style="border:0;">
   </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: Немного здравой критики.
Поделиться публикацией
Ой, у вас баннер убежал!

Ну. И что?
Реклама
Комментарии 16
  • +2
    Давно пора.
    • –2
      Теперь встроить в баннер 0day уязвимость еще проще!
      • +1
        С чего бы? В этом плане ничего не изменилось. Выбрав другую технологию, мы не подвержены уязвимостям в используемой ранее.
        • 0
          старые деплоились проверенным файлом.
          новые — ссылка, которая может быть исправоена кусками
      • +1
        Вообще-то, баннер, созданный автором для демонстрации — это пример того, как не надо делать адаптивные баннеры. Одно из правил адаптивного дизайна — ширина и высота контейнера могут быть любыми, а не только из предполагаемого набора.

        В случае «неправильных» размеров баннер может отображаться неоптимально, но не стоит его отображать ошибочно.
        jsfiddle.net/mayorovp/ysjja/
        • 0
          Как раз об этом недавно Илья Бирман писал: вместо создания подстраивающегося дизайна его подстраивают под разные размеры области просмотра, отчего получаются разные кирпичи разных размеров.
        • +3
          >Как flash-, так и GIF-баннеры имеют фиксированные размеры
          Вы никогда не видели резинового флеш-баннера, который тянется по высоте или ширине?
          На флеше как раз проблему адаптивности решить проще, т.к. можно легко масштабировать графику и текст.

          >текст, изображения, видео, скрипты и формы — всё это может быть использовано в баннере
          А что, на том же флеше этого нету?

          • +2
            Флеш не работает на планшетах.
            • 0
              И как это опровергает Lsh? До HTML5 баннеры не масштабироватлись, в баннерах не было видео, изображений, текста, скриптов?
              • 0
                Просто чаще всего адаптивность нужна именно на планшетах и мобильниках.
            • 0
              1) «адаптивный» != «масштабируемый», на том же флеше придется изрядно повозиться (а может больше), чтобы добиться адаптивности (помучайте сайт http://www.lancs.ac.uk/, чтобы увидеть настоящую адаптивность). Но да, странно, что автор оригинала причисляет flash-баннеры к баннерам со строго фиксированными размерами. Наталкивает на мысль, что он не особый поклонник этой технологии.

              2) Из всего перечисленного во флеше нет скриптов — то бишь JavaScript'а
              • 0
                Вообще-то во флеше есть аналог — ActionScript
                • –1
                  Ну, вряд ли это аналог, и то, что во флеше ActionScript, знает любой первокурсник. Да и окружение, доступное для JavaScript внутри браузера и для ActionScript внутри своего процесса, согласитесь, разное.
              • 0
                Поддерживаю. Более того, даже Gif баннеры можно сделать в некотором роде тянущимися — есть границы и фон, который копируется.
              • 0
                Я, честно говоря, не понял пафоса автора. HTML-баннеры уже давно существуют. Всё что автор перечислил в качестве достоинств в том или ином виде уже давно есть, ну, кроме HTML-видео.

                Не совсем понятен пассаж про изменение баннера после того, как он создан. Думаю, что рекламодатель будет очень недоволен, что кто-то лазил в его баннер без его ведома. Если это делается с ведома рекламодателя, то у него должны быть исходники. И никаких проблем с изменением нет и сейчас.
                • +2
                  Мне кажется, что автор статьи не совсем понимает, что Flash баннеры создаются с фиксированными размерами не из-за ограничений технологии, а в первую очередь из-за экономических соображений площадки: чем формат баннера больше, тем дороже размещение. Сравните, например, стоимости на размещение пропорциональных форматов 728*90 и 468*60.

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

                  Самое читаемое