General Actions:
Responzivní HTML banner
Last modified by ZdVo on 2018/04/27 13:23
Co znamená responzivní?
Responzivní znamená "přizpůsobivý". V případě HTML bannerů je to vlastnost, kdy banner pružně reaguje na velikost plochy, ve které se má zobrazit.
Například tento html 5 banner, nasazený v systému IBB Ad Server:
http://bb007.bbelements.com/realpreview.bb?ei=305404279&bust=425786500
Pokud budete změnšovat velikost okna prohlížeče, uvidíte, že banner na změny aktivně reaguje a zmenšuje se s velikostí okna a naopak.
V banneru samotném není žádný javascript, vše je tvořeno nativním html a css.
Pro to, aby se banner choval takto responsivně v prostředí reklamního systému jsou nutné dva předpoklady. Obslužný script reklamního systému (to, jak je samotný kód banneru vkládán do stránky) musí být rovněž adaptibilní na responzivní banner. Druhý předpoklad je, že html banner je napsán tak, aby byl responzivní sám o sobě.
Jak vkládá reklamní systém HTML bannery do stránky?
Všechny HTML bannery jsou do nosné stránky vkládány prostřednictvím iframu. Čili jsou odděleny, aby svými styly neovlivňovali samotnou stránku, kde se mají zobrazit.
Banner z náhledu výše se do stránky zapisuje v této struktuře:
<div style="padding-bottom: 11.66%; position:relative; height:0">
<iframe src="http://go.bb007.bbelements.com/creatives/v17/b39/19/b3919/extra/750x100.html" scrolling="no" style="width:100%; position:absolute; left:0; margin:0px; border:0px" seamless=""></iframe>
</div>
<iframe src="http://go.bb007.bbelements.com/creatives/v17/b39/19/b3919/extra/750x100.html" scrolling="no" style="width:100%; position:absolute; left:0; margin:0px; border:0px" seamless=""></iframe>
</div>
Za povšimnutí stojí, že obslužný script využívá CSS vlastnosti padding-bottom. Tato vlastnost je umístěna nadřazeném divu a celý trik spočívá v tom, že procentuální hodnota vlastnosti padding se počítá z šířky rodiče. Zde je s hodnotou 11,66%, což znamená, že výška bude vyjádřena jako 11,66% šířky elementu. Rodič iframu má rovněž nastavenou relativní pozici a vynulovanou výšku, jelikož ta je vyjádřena již zmiňovaným paddingem.
Samotný iframe má nastavenou 100% šířku a absolutní pozici. Tak jak je to nastaveno se velikost iframu přizpůsobuje velikosti creativy, kterou zobrazuje.
Jak upravit banner, aby byl responzivní?
Pomocí nativní funkcionality CSS tzv. media queries. Co jsou to media queries se můžete dočíst na této stránce: https://www.vzhurudolu.cz/prirucka/css3-media-queries
Rovněž se v responzivním banneru převážně používají rozměry vyjádřeny procentem, nikoliv fixně pixely. V banneru je použita taktéž vlastnost padding-bottom, která počítá výšku banneru procentem ze šířky.
Na příkladu výše, byly media queries použity například takto:
/* Responsive media queries */
@media only screen and (min-width: 750px) {
#banner {
width: 750px;
padding-bottom: 11.66%;
}
}
@media only screen and (max-width: 750px) {
#banner {
width: 100%;
padding-bottom: 11.66%;
}
.pilot {
left:1%
}
.button.pulse {
margin-top:10px
}
}
@media only screen and (max-width: 524px) {
.pilot {
width:15%
}
.title {
font-size: 12px;
bottom:0
}
.title span {
font-size: 20px;
color: #000;
}
.button.pulse {
margin-top:5px
}
}
@media only screen and (max-width: 380px) {
.pilot {
display:none
}
.title {
font-size: 10px;
bottom:0
}
.title span {
font-size: 14px;
color: #000;
}
}
@media only screen and (max-width: 300px) {
.title p {
display:none;
}
.title span {
padding-bottom:10px
}
}
@media only screen and (max-width: 200px) {
#banner {
display:none;
}
}
@media only screen and (min-width: 750px) {
#banner {
width: 750px;
padding-bottom: 11.66%;
}
}
@media only screen and (max-width: 750px) {
#banner {
width: 100%;
padding-bottom: 11.66%;
}
.pilot {
left:1%
}
.button.pulse {
margin-top:10px
}
}
@media only screen and (max-width: 524px) {
.pilot {
width:15%
}
.title {
font-size: 12px;
bottom:0
}
.title span {
font-size: 20px;
color: #000;
}
.button.pulse {
margin-top:5px
}
}
@media only screen and (max-width: 380px) {
.pilot {
display:none
}
.title {
font-size: 10px;
bottom:0
}
.title span {
font-size: 14px;
color: #000;
}
}
@media only screen and (max-width: 300px) {
.title p {
display:none;
}
.title span {
padding-bottom:10px
}
}
@media only screen and (max-width: 200px) {
#banner {
display:none;
}
}
Celý kód banneru ke stažení zde: responsive_html_banner.zip