Oni koji prate naš blog zasigurno su upoznati s činjenicom da preferiramo izradu tzv. responzivnih web stranica. Responzivni web dizajn omogućuje dinamičko kontroliranje prezentacije web lokacije ovisno o svojstvima (dimenzijama) zaslona/uređaja na kojem se pregledava.
Web stranice mogu biti optimizirane za pregled na smartphonima na slijedeća tri načina:
[ul type=”plus”]
[li]1. Stranice koriste responzivni web dizajn (RWD) – stranice serviraju isti skup URL-ova koji servira isti HTML kôd za sve uređaje te se putem CSS-a regulira što (koji elementi) i kako se prikazuje, ovisno o velični zaslona uređaja.[/li]
[li]2. Stranice serviraju isti skup URL-ova koji servira drukčiji HTML kôd (i CSS) ovisno o tome da li je user agent desktop ili mobilni uređaj.[/li]
[li]3. Stranice imaju različite URL-ove za desktop i mobilne uređaje.[/li]
[/ul]
Ne treba posebno isticati da je opcija pod brojem jedan najbolja opcija.
Na sveopće veselje, opcija pod brojem tri polako ali sigurno izumire.
Do nedavno, mogli ste pomoću media querija (upita) riješiti skoro sve segmente vaše web stranice. No, u slučaju optimiziranja popularnih Google AdSense oglasa za prikaz na smartphonima i tabletima, morali ste pribjeći intenzivnijim zahvatima u kodu kako bi oglas bio responzivan. Druga opcija je bila skrivanje oglasa na smartphonima koristeći display:none; za pripadajući div.
I jedan i drugi zahvat predstavljao je kršenje Google Adsense pravila. U prvom slučaju jer se kôd za implementaciju oglasa ne smije mijenjati, odnosno, izgled oglasa mora ostati nepromijenjen. U drugom slučaju zato što se, neovisno o skrivanju div-a koji sadrži oglas, na stranici ipak zavrti Javascript te se to ipak računalo kao prikazivanje oglasa.
Napokon službena podrška za responzivne Google AdSense oglase
Bez velike pompe i reklame (što nije iznenađujuće za Google) , u kolovozu 2013. godine je omogućeno kreiranje adaptivnih oglasnih jedinica.
Danas, pet mjeseci kasnije, adaptivne oglasne jedinice, kako ih zove Google, još uvijek su u Beta fazi, no to ne znači da se responsive AdSense oglasi ne prikazuju kako spada. Već je dosta izmjena izvršeno pa se stoga nadamo da će u 2014. godini ovakvi oglasi izaći iz Beta verzije te da će preuzeti prioritet prilikom korištenja na web stranicama.
Adaptivnim oglasnim jedinicama možete kontrolirati veličinu oglasa na svojoj stranici, u skladu s time kako kontrolirate izgled čitave stranice na raznim uređajima.
Kako funkcioniraju adaptivne oglasne jedinice ?
Responzivni oglasni kôd automatski prilagođava veličinu oglasne jedinice izgledu stranice. Potrebna veličina se izračunava dinamički, na temelju širine nadređenog spremnika (parent container) oglasne jedinice, a zatim se određuje najbolja standardna visina koja odgovara toj širini.
Primjerice, ako imate div širine od 30% i postavite naš oglasni kôd u div, tada ćemo, ovisno o širini korisničkog zaslona, automatski poslužiti različite veličine oglasa. Ako se vaša stranica pregledava na tabletu širine 1024 px, poslužit ćemo oglas veličine 307 x 250, a ako se pregledava na radnoj površini PC-a širine 1680 px, poslužit ćemo oglas veličine 504 x 60.
[clear]
Kako kreirati adaptivnu oglasnu jedinicu ?
Ukoliko ne znate kako kreirati račun i koristiti Google AdSense uslugu , više informacija možete pronaći na https://support.google.com/adsense/.
Da biste izradili novu responzivnu oglasnu jedinicu, prvo treba generirati oglasni kôd.
Izradite oglasnu jedinicu na uobičajeni način, pazeći da pri izradi s padajućeg izbornika Veličina oglasa odaberete “Responzivna oglasna jedinica (BETA)”, a zatim kliknite Spremi i dohvati kôd.
U okviru “Oglasni kôd” koji se prikaže odaberite jednu od sljedećih opcija na padajućem izborniku Način:
Pametno dimenzioniranje – ovo je preporučeni način i ne zahtijeva da izvršite izmjene u oglasnom kodu.
Napredno – taj način zahtijeva da izvršite izmjene u oglasnom kodu. Trebate odabrati ovaj način samo ako želite odrediti ili točnu veličinu putem CSS-a ili opći oblik (vodoravni, okomiti i/ili pravokutni) kojem bi se vaša oglasna jedinica trebala prilagoditi.
Kopirajte i zalijepite oglasni kôd u HTML izvorni kôd stranice gdje želite da se oglas prikaže, imajući na umu da će dinamički naslijediti veličinu nadređenog (parent) spremnika. Detaljno testirajte!!
