31. srpen 2012
Responsivní design a reklama
Už nějakou dobu mi v hlavě zrála myšlenka na vyzkoušení responsivního designu společně s responsivně udělanými reklamními plochami. Že to bude takový masakr, plný technických záludností a strávím s tím přes 10 hodin času mě ani ve snu nenapadlo.
Responsivní design
Co je to responsivní design najdete na wikipedii, v principu jde o vzhled který se nemusí vyvýjet pro různá zařízení zvlášť, ale podle toho v jakém rozlišení se načítá mění polohu prvků stránky a jejich velikost tak, aby bylo vše ideálně čitelné a nemuselo se rolovat vodorovně. Často se také některé méně důležité prvky schovávají pro menší zařízení, aby se zbytečně neplýtvalo prostorem.
Šablona a kde to zkusit
Poslední dobou se responsivní šablony začínají hojně objevovat a vypadají moc hezky. A to jak pro Joomlu například od JoomlArt, který používám v Developer členství, tak pro Wordpress od ElegantThemes, jejichž členství také používám. Nasazení nové šablony je podobný jako u kterékoliv jiné, takže stačilo vybrat pokusný web. Rozhodl jsem se pro změnu celé sítě XBand.cz, která ve stávajícím designu je příliš pomalá a nevhodná pro menší rozlišení. Než nasadím šablonu na všechny hudební stránky, zvolil jsem jako první NH6.cz, protože má malou návštěvnost a pokusy tak nebudou mít až tak neblahé důsledky pro návštěvníky.
Reklama a rozmístění
Po nasazení designu,doladění a určení co se bude v které části ukazovat, jsem se podíval jak fungují jednotlivé rozložení stránky v různých rozměrech obrazovky, abych se mohl rozhodnout kam umístím reklamní prvky. Nechtěl jsem čachrovat s nějakými extrémními umístěními, takže jednu Top pozici pro vodorovný banner a pak nějakou reklamu do postraního panelu. A tady nastaly první problémy.
Nejprve krátce k šabloně, používám Lucid, která má 4 různá zobrazení podle rozlišení, pod 479px je pro mobil, do 767px je o něco širší pro tablety na výšku, 768px-960px je pro větší rozlišení a nad 960px je maximální zobrazení. Menší dvě neukazují potranní panel a menu mají srolované na tlačítko pro přehlednost.
V rámci testování jsem dal vedle loga 760x100 a na stranu 160x600. Pokud jsem začal stránku zmenšovat, tak se se začala přizůsobovat na výše zmíněné možnosti. Jakmile jsem se dostal pod 767px, tak zmizel postranní pruh a tím i reklama v něm. Navíc banner začal vytékat mimo stránku. Na úrovni CSS prvků se v responsivním designu mohou měnit některé prvky pomocí např. takto označeného bloku
@media only screen and ( max-width: 479px )
Dal jsem tedy od určitého rozlišení mizet i horní blok s reklamou. Aby nepřetékala a nerušila.
Problémy s neresponsivní reklamou
Web se tedy choval správně responsivně. Na velkých rozlišení se reklama ukázala, na menším byla skrytá. Návštěvník viděl web graficky v pořádku a vše se zdálo být v pořádku. Jenže jsou tu určité problémy s podmínkami, závazkům vůči inzerentům ...
Problémy s ukrytou reklamou
- Ukrytá reklama se stále načítá, jen je schovaná. Pokud prodáváte CPM (cena za impressi), tak na malých zařízeních okrádáte inzerenta. Pokud prodáváte CPT (cena za klik), tak zobrazení reklamy skrytě nemusí až tak vadit, obvyklá je ale kombinace obou možností.
- I skryté prvky se musí načíst a přenést. A to je zvlášť pro mobilní zařízení špatně!
- Pokud používáte alespoň z části pro reklamní plochy AdSense, tak skrytím reklamy porušujete pravidla. Reklama načtená se stránkou by měla být viditelná. Jste tedy už za hranou pravidel.
- Na malých rozlišeních neukazujete reklamu, takže ani nic nevyděláváte. A při růstu počtu přístupů z mobilních zařízeních to zkrátka bude čím dál víc znát.
Responsivní reklama
Jediným správným řešením pro responsivní design by tedy měla být responsivní reklama. Lehko se řekne značně hůr udělá. AdSense, Sklik a ani obecná bannerová reklama není responsivní a responsivitu nepodporuje. Musíte tedy nejdřív otestovat rozlišení zařízení a podle toho jaké je rozlišení vložit bloky s reklamou a reklamními prvky. To pořád vypadá jako hračka. Až na to, že technicky to skoro nemá řešení.
Na úrovni PHP sice můžete rozhodovat o toma jaké soubory pomocí include vložíte, jenže z PHP nebo jiných server-script technologií nemůžete o cílovém zařízení zjistit nic. Z volání http, sice můžete určit identifikaci zařízení, tedy například iPhone, Blackberry apod., jenže těch zařízení je tolik a rozlišení se zase nedozvíte. Navíc tahle část není vždy správně funkční a některá zařízení se maskují, nebudete je znát.
Javascript vám dokáže říct rozlišení, dokonce vám řekne rozlišení okna s prohlížečem, když není používám v plném rozlišení. Jenže to už je trochu pozdě, stránku máme načtenou. Můžeme volat sice javascriptem reload stránky s nějakým parametrem, ale jednak je to prasárna, auto reload zakazují podmínky reklamních agentur a navíc zkuste si to udělat pro nějaké OpenSource CMS řešení bez toho abyste je museli totálně překopat.
Napadl mě AJAX, načíst stránku, zjistit a podle toho donačíst prvky s reklamou. Zase poněkud problematické. Kromě toho, že jsem nedokázal takové načtení zprovoznit, aniž by mě nepřesměrovalo na samotné zobrazení banneru, tak takové řešení bude fungovat po načtení stránky. A u mobilních zařízení to někdy trvá dlouho, návštěvník vám mezitím odejde na další stránku a máte po impressi.
Funkční řešení
Funkčním řešením se nakonec ukázal javascript. Hlavní důvodem je to, že reklamní kódy AdSense jsou javascriptové, stejně tak zobrazovací kódy OpenX, které používám spro správu reklamních prostor. A protože se reklamní prvky volají javascriptem, jde ještě před jejich zavoláním jiným javascriptem pozměnit parametry podle zjištěného rozlišení. I tohle řešení má určité limity a věci na které je potřeba myslet. Je to ale zatím jediné plně funkční řešení, které splňuje podmínky AdSense, reklamních agentur, servíruje reklamní plochy velikostně přizpůsobené zařízením a nezatěžuje zbytečnými datovými přenosy.
Limity Javascriptového řešení
- Pokud měníte parametry AdSense bloků, musíte to udělat změnou parametrů před voláním AdSense prvku a nesmíte zasáhnout do kódu. Je to poněkud na hraně, ale z hlediska pravidel by to mělo být akceptovatelné řešení.
- Pokud měníte parametry OpenX kódu, není z hlediska pravidel už vůbec třeba něco řešit, žádný zásah do AdSense kódu se vůbec nekoná
- Rozlišení se detekuje ve chvíli načtení, pokud pak budete velikost prohlížeče měnit, mění se rozložení prvků, ale reklama zůstane tak jak byla načtená. Může tak přetéct velký banner, schovat se postranní apod. To je ale v pořádku, stejně jako když si zmenšíte prohlížečové okno na 20x20px, taky neuvidíte z reklam mnoho :). Šlo by to sice obejít AJAXem a voláním načtení reklam po změně rozlišení, jenže znovunačtení reklamních prvků stránky je všemi reklamními systémy přísně zakázáno, takže o tomhle nemá smysl uvažovat. Navíc ke změně a znovunačítání by mohlo docházet při každém otočení tabletu na šířku/výšku. A teď si představte že ho nesete v ruce a jak se míhá tak je to jeden refresh za druhým.
- Stále musíte řešit ukryté prvky v malém rozlišení. Reklamní kód tam prostě stále je. Jak řešit u samotného AdSense jsem nemusel řešit, ale nejspíš by muselo být zobrazení kódu voláno funkcí na základě splněné podmínky. U OpenX jsem to vyřešil jednoduchým fíglem. Načítám v takovém případě práznou reklamní plochu o velikosti 1x1px, ke které není přiřazená žádná kampaň ani banner
Technické řešení
Kromě obecné úvahy a výsledného řešení shlédnutelného na www.nh6.cz a časem na celé hudební síti Xband.cz, vám hodlám ušetřit i čas s psaním kódu. Zítra si tedy budete moct přečíst technické řešení responsivní reklamy pomocí OpenX, včetně kódů. Také přidám řešení pro AdSense pokud někdo z vás používá pouze AdSense reklamu.
Jde o téma zatím celkem problematicky řešitelné a budu se tedy těšit na komentáře a diskuzi k tomuto tématu.
