<< Назад
Адаптивные баннеры на HTML5 и CSS3
В последние годы основной "правильного" и эффективного сайта является его адаптивность. Что это значит? Проще говоря удобное и правильно отображение сайта на любых устройствах. Конечно, еще осталось большое количество сайтов, которые, по прежнему, открываясь на мобильном телефоне выглядят не читабельными, с мелкими не разборчивыми шрифтами, горизонтальной прокруткой, не разборчивым меню, мелкими текстами. Сегодня интернет способен все это изменить и переварить. Он заполняет всё пространство, доступное на экранах различных устройств, начиная от мобильных телефонов — и вплоть до огромных видеодисплеев. Это то, к чему стремились многие годы — удобству восприятия информации на любом устройстве.
Но здесь есть и небольшие проблемы. Сайты, зачастую, содержат баннерную рекламу, не обладающие особой гибкостью. Технология Флеш, попросту, вытесненная с рынка гигантом Google (в 2016 году flash баннеры были запрещены к размещению в Google Adwords), но остались Гиф баннеры, которые имеют фиксированные размеры, из-за чего они несовместимы с современной адаптивной вёрсткой сайта. Потребность была всегда, но актуальной "остро" она стала когда количество пользователей смартфоном превысило 40%. Нужен был новый метод создания баннерной рекламы. Появилась новая технология, а с ней и адаптивные Html 5 баннеры.
 Новый формат баннеров - HTML5
Сейчас единственный способ сделать баннер таким же "тянущимся-резиновым"(как говорят дизайнеры) и гибким, как и наша HTML5 разметка — это написать его на HTML5. HTML5 баннеры давно поддерживаются почти всеми браузерами (90%), семантическая разметка сделает её подходящей для планшетов и больших смартфонов. Тексты, изображения товаров и услуг, анимация, видео, интерактивные формы — всё это может быть использовано в html5 баннере точно так же, как и на любом сайте.
При необходимости html5 баннеры могут даже иметь динамические и интерактивные сценарии и даже базы данных на серверной стороне. Также в html5 баннер могут быть внесены правки после его размещения. Набор файлов из которых состоит html баннер может иметь небольшой размер, а главное быстро и безошибочно загружаться. Программистам и верстальщикам не нужно изучать что-либо новое — код остается тем же, что и при обычной верстке. При помощи CSS3 можно заставить HTML5 баннеры подстраиваться под любые размеры, а именно такое поведение мы ожидаем от адаптивных html5 баннеров.
Как же достичь адаптивности в Html5 баннере?
Во-первых, баннер создается в виде резиновой по ширине HTML5 страницы. Мы наполняем её текстом, изображениями, анимацией, прописываем ссылку, Во-вторых, такой баннер может быть размещен на любом сайте с помощью плавающего фрейма iframe.  Адаптивная вёрстка сайта требует, чтобы все элементы страницы имели переменную ширину, поэтому html5 баннеры также должны выполнять эти условия. Высота html5 баннера в адаптивной разметке невелируется и не важна, мы может выбрать любую необходимую высоту. Чтобы сохранить совместимость адаптивные баннеры должны иметь ту же высоту, что и обычные.
Практически, можно создать баннеры с любой шириной и высотой, но их сложно создавать, тестировать, да и к чему менять высоту. Приведенные ниже 7 значений высоты это диапазон вертикальных размеров. В сочетании с указанием ширины баннера - они покрывают все популярные на сегодня форматы баннерной рекламы. В случае с традиционными баннерами, вы можете использовать и другой нестандартный формат, если дизайн вашего сайта отличается от привычного. За основу минимальной ширины баннера берется значение в 88 px, далее придерживаемся следующих стандартных 7 "эталонных" высот:
7 эталонов высоты в современных баннерах
Высота 31 px "микро" - редко используется
- микро полоса (88 x 31)
Высота 60 px "кнопка" - также не часто используется
- кнопка 120x60
- половина длинного баннера 234x60
- длинный баннер 468x60
Высота 90 px "баннер" - самый популярный горизонтальный формат, особенно на мобильных телефонах
- кнопка 120x90
- горизонтальный основной длинный 728x90
Высота 125 px "малый квадрат или прямоугольник" - третий по популярности формат после 240x400
- квадратная кнопка (125 x 125)
Высота 250 px "средний квадрат или прямоугольник"
- квадрат 250x250
- прямоугольник средней величины 300x250
Высота 400 px "большой квадрат или прямоугольник" - самый популярный рекламый формат в инернете
- вертикальный прямоугольник 240x400
- вертикальный квадрат 400x400
Высота 600 px "небоскрёб" - четвертый по популярности формат
- небоскрёб 120x600
- широкий небоскрёб 160x600
- объявление небоскреб для планшетов и экранов стац.компьютеров 300x600
Тонкости изменения iframe при попощи CSS
Иногда необходимо, чтобы ваш html5 баннер адаптировался по высоте. Это можно реализовать путем изменения размера iframe при помощи CSS. Самый удобный и быстрый сделать это — назначить высоте и ширине iframe 100%, дале обернуть всё div-ом.
Как это выглядит в html:
<div id="ad">
<iframe
src="ad.html"
border="0"
scrolling="no"
allowtransparency="true"
width="100%"
height="100%"
style="border:0;">
</iframe>
</div>
А так это будет выглядеть в CSS:
/* Стандратная высота */
#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;
}
}
 Сбор показов и кликов по баннеру
Дополнительным плюсом HTML5-баннеров является возможность собирать и отслеживать в Google Analytics статистику по кликам и показам баннера. Мы получаем больше информации, чем от обычной рекламной площадки. Вы сами надёжно следите не только за количеством показа баннера, но и за реферами, каким браузером смотрел пользователь, разрешение экрана, каким устройством пользовался посетитель, из какой он страны игорода; всё это и многое другое - позволяет собирать и передавать рекламодателю html5 баннер.
Отслеживание количества кликов по баннеру можно решить воспользовавшись сервисом сокращения ссылок. Их достаточно много. Если ваш баннер содержит более 1 ссылки, то можно отследить их по отдельности. Но не забудьте добавить target="_top" в ссылке.
Указание размеров Html5 баннера в html МЕТА тегах
В адаптивные html5 баннерыможно внести условие поддерживать любые размеры, все это лучше записывать их в теге META. Это очень хорошо, так как тег META является всегда читаемым и в некоторых случаях для верного отображения баннера браузеру может понадобиться узнать другие альтернативные размеры, которые мы как раз указали.
Пример:
<meta
name="displayheight"
content="31, 60, 90, 125, 250, 400, 600" />
Адаптивные баннеры. Резюме. Как разместить html5 баннер
 HTML5 формат подходит для адаптивной верстки лучше всего. При помощи CSS мы можем создавать html5 баннеры, которые способны принимать и отображать все распространённые форматы. Если вы хотите разместить адаптивный баннер на своем сайте или блоге, то просто скопируйте нижеприведенный код, не забыв указать нужный размер:
<div id="ad" style="width:100%;height:90px;" >
<iframe
src="http://ваш сайт/название html5 баннера.html"
border="0"
scrolling="no"
allowtransparency="true"
width="100%"
height="100%"
style="border:0;">
</iframe>
</div>
Надеемся, что данная статья была для вас полезной. Заказать html5 баннер, а также узнать стоимость и цена html5 баннера вы можете на нашем сайте в разделе цены. Сроки производства баннеров несколько рабочих дней. Если у вас возникли дополнительные вопросы - мы с радостью на них ответим.
Команда БаннерМейкер.рф
|
