Хотел сегодня рассказать про создание баннера в онлайн сервисе, но решил, что данная тема, возможно, заслуживает более широкого рассмотрения. Думаю, о том, что такое баннер (до сих пор не уверен в правильности написания, ибо вариант «банер» тоже довольно часто встречается на просторах интернета) большинству из вас давно уже известно. Для кого-то это назойливая фигня, которую вы все доступными способам (обычно с помощью плагинов для Firеfox или специальных расширений для Google Chrome) пытаете убрать с просматриваемых вами вебстраниц.
Для других же баннер — это способ привлечь внимание к своему сайту, возможность закрепить в умах потенциальных клиентов положительный имидж бренда, ну или же просто повысить продажи товара или услуг (речь идет о рекламодателях). Для вебмастеров же размещение банеров на своем сайте является одним из основных (или даже основным) способом заработка в интернете. Как вы сможете убедиться, баннеры многолики — они отличаются по способу реализации, по размеру, по принципу оплаты и, конечно же, по качеству исполнения.
Что такое современный баннер — размеры и типы
На заре становления интернета и появления сайтов реклама представляла из себя текст с проставленной по правилам языка Html, так называемой гиперссылкой. В баннерах Html гиперссылка по прежнему присутствует (кроме Flash банеров), но она уже ведет на сайт рекламодателя не с унылого текста, а с яркого (зачастую анимированного) изображения.
Пик популярности баннерной рекламы пришелся на конец девяностых годов, а уже с начала двухтысячных эффективность такого способа привлечения внимания посетителей к рекламной информации падает. Сейчас все большую популярность набирает контекстная реклама (например, Адвордс или Яндекс Директ), основным первопроходцем которой стал, конечно же, Гоогле, когда не захотел видеть засилье баннеров в своей выдаче, но заработать копеечку был не прочь.
У многих активных пользователей сети сейчас уже выработался эффект «баннерной слепоты», когда все яркое и броское, имеющееся на посещаемом ими сайте, просто фильтруется мозгом. Зацепить таких пользователей сможет разве что, только что-то неожиданное и серьезно отличающееся от обыденности. Да и блокирующие плагины для браузеров тоже делают свое дело.
В интернете можно встретить предостережения, которые следует соблюдать при верстке макета своего сайта — его отдельные элементы не должны совпадать по размерам со стандартными баннерами, иначе они могут обрезаться различными блокираторами.
Понятно, что блокираторы рекламы руководствуются не только размерами при выборе удаляемого объекта, но при неудачном стечении обстоятельств все возможно. У меня был пример, когда банерорезка удалила текстовый блок только за то, что для него был прописал class="reklama" (читайте про селекторы в CSS), а после замены названия класса все стало показываться.
В связи с этим хочу привести таблицу со стандартными размерами баннеров, которые чаще все используются в интернете:
| 728 x 90 | Доска почета |
| 468 x 60 | Баннер (длинный) |
| 336 x 280 | Большой прямоугольник |
| 300 x 250 | Средний прямоугольник |
| 300 x 600 | Большой вертикальный прямоугольник |
| 250 x 250 | Квадрат |
| 240 x 400 | Вертикальный прямоугольник |
| 234 x 60 | Полубаннер |
| 180 x 150 | Малый прямоугольник |
| 160 x 600 | Широкий небоскреб |
| 120 x 600 | Hебоскреб |
| 125 x 125 | Кнопка |
| 120 x 240 | Вертикальный баннер |
| 120 x 90 | Вариант кнопки |
| 120 x 60 | Еще один вариант кнопки |
| 88 x 31 | Полоса |
Большинство из баннеров (указанных размеров) будут вам доступны при работе с системой контекстной рекламы Adsense (наглядные примеры можно будет посмотреть здесь). Говорят, что и Рекламная сеть Яндекса вскоре позволит своим партнерам размещать баннерную рекламу на манер Гугла, но пока еще такого не наблюдается.
Кроме того, что банеры различаются размером, они еще различаются и по способу реализации:
- Статичные баннеры — представляют из себя простую картинку в формате PNG или Jpg. Для вебмастера это, наверное, самый предпочтительный вариант, ибо такое изображение будет весить не очень много, а значит не повлияет отрицательно на скорость загрузки его сайта. Примером может служить такой вот баннерок в формате Jpg с проставленной с него Html ссылкой:
Код для его вставки может выглядеть примерно так:
<a rel="nofollow" target="_blank" href="http://ru.wix.com/"><img src="http://ktonanovenkogo.ru/wp-content/uploads/468x60_cirlcles_New_russian.png" alt="Wix Free Website Builder"/></a>
- Анимированные баннеры — представляют из себя картинку в формате Gif, прелесть которого заключается в том, что он поддерживает простейшую анимацию. По сути, анимированный Gif состоит из двух и более изображений, которые чем то отличаются друг от друга, а за счет задания частоты их смены мы получаем эффект движения. На анимированный Gif обычным образом вешается Html ссылка, однако его вес будет очень сильно зависеть от количества зашитых в него кадров и может быть довольно внушительным. Примером может случить этот анимированный баннер:
Код для его вставки будет выглядеть примерно так:
<a rel="nofollow" target="_blank" href="http://webeffector.ru/"><img src="http://ktonanovenkogo.ru/image/360x60w.gif" alt="WebEffector"/></a>
Flash-баннеры — самый сложный в реализации, иногда довольно тяжелый, но при должном подходе самый эффективный способ привлечения внимания посетителей. Ссылка зашивается непосредственно в файл SWF и кроме перехода по ней, иногда пользователю представляется возможность чего то там понажимать, поиграться или совершить еще какие-либо интерактивные действия. Ну и, конечно же, главным отличием Flash-баннера от уже рассмотренных является возможность добавления звука. Не скажу, что это очень здорово воспринимается пользователями, но такая возможность имеется.
Для его создания используется уже не растровая графика, как в двух предыдущих случаях, а векторная, которая прекрасно масштабируется (без потери качества) и из Flash-баннера размера 468×60 можно запросто получить вот такого монстра, просто изменив значения его размера по высоте и ширине:
Код вставки Flash-баннера, правда, выглядит устрашающе, ибо состоит из комбинации валидных и не валидных тегов Embed и Object:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="728" height="90" align="middle"><param name="allowScriptAccess" value="sameDomain" /><param name="allowFullScreen" value="false" /><param name="movie" value="http://ktonanovenkogo.ru/image/pult468x60ktonanovenkogo.swf" /><param name="quality" value="high" /><embed src="http://ktonanovenkogo.ru/image/pult468x60ktonanovenkogo.swf" quality="high" width="728" height="90" bgcolor="#ffffff" name="banner_name" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_ru" /></object>
Этот вариант кода вставки Flash-баннера на сайт является наиболее универсальным. Тут происходит дублирование за счет использования двух аналогичных тегов Embed и Object. Причем первый не является валидным, но некоторые старые браузеры не понимают валидного Html тега Object и поэтому приходится перестраховываться. Если валидный Html код для вас является превалирующим, то используйте только Object, например так:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="728" height="90" id="banner" align="middle"><param name="movie" value="http://ktonanovenkogo.ru/image/pult468x60ktonanovenkogo.swf"><param name="play" value="true"><param name="loop" value="true"><param name="quality" value= "high"></object>
Различные атрибуты тега Param используются для настройки работы Flash-проигрывателя, который, кстати, загрузится на компьютер пользователя по приведенной в атрибуте Codebase ссылке (если, конечно, он не будет найден на компе пользователя). Подробнее познакомиться с предназначением различных операторов настройки флеш плеера для тегов Embed и Object вы сможете на этой странице.
Цена за размещение и ротатор баннеров
