V Red Orbitu se s klienti mnogokrat srečujemo s problematiko, ko oglasi (bannerji) tehnično ne odgovarjajo (precej) strogim zahtevam Googlovega prikaznega omrežja. Zadnje mesece … pravzaprav zadnji 2 leti je predvsem priljubljeno, da oblikovalci oglase pripravljamo v (za oglase popolnoma novem) tehničnem zapisu – HTML5 (najnovejša različica HTML-ja – hyper text markup language), ki nam tako kot Flash omogoča kreiranje animiranih grafičnih vsebin na spletu. Ta HTML5 pa v svetu frontendašev ni nobena topla voda. Z njim (alert: newbie stavek) je napisana pravzaprav čisto vsaka spletna stran. Gre torej za način, da oglas napišemo oz. oblikujemo v istem jeziku, kot je napisana tudi ostala spletna stran.
Torej do zdaj oglasi niso bili napisani v jeziku HTML?
Ne. Leta 2005, ko je Google predstavil YouTube, je bil vrhunec tehnologije Flash. Ta je pravzaprav omogočal, da smo si tisti videoposnetek sploh lahko ogledali. In tudi naši oglasi, bannerji so bili pripravljeni v Flashu – ta je bil dolga leta glavni format, v katerem smo oblikovalci pripravljali animirane oglasne pasice in grafične elemente na spletu. Če ste videli oglas, na katerem je nekaj utripalo, se premikalo ali spreminjalo, potem je bil ta oglas narejen v Flashu.
In tako kot je čas povozil kasete, videorekorderje, walkmane, zgoščenke in Internet Explorer, tako je s prihodom novih tehnologij izpodrinil tudi Flash. Jabolčni velikan Steve Jobs je že leta 2010 najavil, da njihovi »i-izdelki«, pa ne le iPhone, tudi iPad in iPod – ne bodo podpirali tehnologije Flash, saj naj bi bila preveč energijsko požrešna (težava s porabo baterije) in nezanesljiva na mobilnih brskalnikih. Lani poleti pa je podobno ugotovil tudi Google, saj je v svojem paradnem brskalniku Google Chrome začel avtomatično ustavljati vse dele spletnih strani, ki so vsebovali vsebino v Flashu.
Ampak zakaj bi opuščal Flash, ko pa smo ga vajeni?
Tole bo preprosto. Razlogov za to je več in vsi imajo velik vpliv na doseg, ki ga ima oglaševanje, ki ga izvajate z animiranimi oglasnimi pasicami. Tudi če v tem trenutku vpliva zatona Flash animiranih oglasov še ne čutite na svojih oglaševalskih rezultatih, je spodaj 5 razlogov, ki vas bodo zagotovo vsaj spodbudili k razmisleku, če ne že spreobrnili.
- Flash oglasi ne delujejo na večini mobilnih naprav (tablice in mobilni telefoni). Že tole je sam zase dovolj strašljiv podatek, sploh v kontekstu, ko vemo, da delež uporabe mobilnih naprav eksponentno raste – tudi do +67,6% YOY. Prav tako je vse večji delež transakcij, ki jih prispevajo prav mobilne naprave. To pa je prednost, ki je ne gre zanemariti.
- Google ne bo več dovoljeval Flash oglasov. V začetku letošnjega leta je Google najavil, da bo v juniju letos opustil možnost nalaganja Flash animiranih oglasnih pasic v svoji oglaševalski mreži, od 2. januarja 2017 pa bo njihovo prikazovanje v celoti onemogočeno. Če torej svojih oglasnih pasic ne boste migrirali na HTML5 tehnologijo, se ne boste več videli na Googlovi oglaševalski mreži. In tukaj se debata zares konča. Kljub temu pa obstajajo tudi druge prednosti HTML5 oglasov. Beri naprej… 😊
- HTML5 oglasi so lahko hitrejši za produkcijo. S HTML-jem je omogočen bolj agilen pristop do priprave kreativ, saj se lahko popolnoma izognemo uporabniških vmesnikov, ko npr. popravljamo samo ceno na oglasu. Popravimo HTML, iz 139 € na 137 €, CTRL + S, ga zazipamo in voilà! Seveda pa je fajn, da ste že kdaj napisali kaj v HTML-ju. 😅
- Uporaba dinamičnih vsebin. HTML5 omogoča uporabo vsebin, ki se sproti prilagajajo. Vaši oglasi tako lahko npr. odštevajo ure in minute do izteka akcijske ponudbe, ki se v realnem času prilagajajo času, ko posamezen uporabnik vidi vaš oglas. Če prodajate širok nabor izdelkov, lahko v svojih oglasih tudi izmenjujete različne produkte, prilagajate cene ali pa zaloge.
- Nadgradnja oglasov s profesionalnimi animacijskimi knjižnicami. Nedolgo tega je Google najavil, da zdaj dovoljuje tudi implementacijo zunanjih animacijskih knjižnic kot sta Greensock in CreateJS. Z njima lahko ustvarjamo tako imenovane Ultra high-performance animacije in razne obogatene vsebine. Resno, pregooglajte! Tole je huge.
OK, razumem. Rabim HTML5 oglase. Now what? Znate to spet samo vi?
Hah ha, sem že čakal, da vprašate. Ne, ne, seveda ne. To boste znali vsi, ki preberete tole do dna. Za pripravo kreative v HTML5 imate več možnosti. In tudi prav prekleto spretni s HTML-jem ne rabite biti. Skrivnost je v naslednjih programskih rešitvah:
- Google Web Designer, v času pisanja še vedno v Beta stanju. Googlova rešitev Flashovih težav, marsičesa sposobno orodje, hkrati pa vseeno vzrok marsikaterega sivega lasu na glavi – predvsem zaradi tega, ker program včasih res zataji. Beta pač. Lepota vsega na drugi strani pa je, da je to Googlovo orodje in res harmonično funkcionira z Google AdWordsom ali Google DoubleClickom.
Več informacij o programski opremi Google Web Designer. - Adobe Animate CC (prej Adobe Flash), za vse, ki ste vedno pripravljali oglase v Flashu, je to odlična novica. Dober mesec nazaj je namreč Adobe Flash postal Adobe Animate CC, program z identičnim vmesnikom kot prej, samo spisan tako, da zna izvoziti pravi HTML5 oglas.
Več informacij o programski opremi Adobe Animate CC. - Adobe Edge Animate, morda komu poznan, žal pa ne več aktualen, saj ga je Adobe novembra lani nehal razvijati ravno zaradi tega, ker je popolnoma prepisal prej omenjen Adobe Animate CC in zdaj praktično vse funkcionalnosti najdemo tam.
Na kaj torej biti pozoren pri pripravi oglasa?
Hja, kot rečeno v uvodu, Google ima precej stroge zahteve, ko oddajamo/-te oglase v Google Display Network. Da bo delo naše Google AdWords ekipe potekalo nemoteno, najdete vse podrobnosti, ki jih potrebujete za pripravo oglasov tule, jaz pa za vam povzemam slednje:
- Držite se standardnih dimenzij.
- Če oglas pripravljate kjerkoli drugje kot v Google Web Designerju, definirajte dimenzijo oglasa z meta podatki v HTML glavi kot na primer tole
<meta name="ad.size" content="width=300, height=250">
. - Končna izvozna datoteka .zip naj ne presega 150 KB. Vem, tole zna biti kar zabavno. Težave bodo delale sličice. Tule je orodje, ki bo že stisnjene .jpgje, .pngje še dodatno “skweeznil”.
- Vse datoteke, na katere se sklicujete, morajo biti vključene v končno izvozno datoteko .zip in ne sme jih bit več kot 40.
- Ohranjajte izvorne datoteke, ki vam naj v primeru adaptacije služijo za izhodišče.
- Smiselno poimenujte tako izvorne mape kot tudi končne izvozne datoteke. Dodajte ime projekta, različico in dimenzijo oglasa, ki ga pripravljate. Verjemite, ko jih boste naredili 10+, lahko hitro nastane zmeda.
Primer:company-imeprojekta-
gdn-razlicica-160x600px-export.zip
. - Pripravljajte vsako novo dimenzijo istega seta kot nov projekt (nov dokument), ne kot prilagajanje prejšnje dimenzije – ampak kot “File – New” in potem export. Pri izvozu program dopiše nekaj ID-jev, ki lahko kasneje povzročajo težave, če se ne spreminja samo vsebina.
- Naj bo čim več elementov v oglasih dinamičnih – npr. teksti naj bodo dejanski teksti (ne sličice), saj so korekture tako mnogo lažje/hitrejše – urejanje samo HTML dokumenta je bolj učinkovito.
- Prosim, olajšajte si življenje in poimenujte plasti v dokumentu, dodajte ID-je elementom, saj so korekture/adaptacije tako mnogo lažje/hitrejše.
- Nikar ne zavrzite izvornih datotek, npr. Photoshopa, kjer ste pripravljali kreativo in tudi ta naj bodo v čistem source formatu – SmartObjects, ne “Flattened layers”, katerih vsebina naj bo prav tako urejena po mapah, barvah, imenih …
- V delavno mapo zraven pripnite tudi vse tipografije, uporabljene v oglasu, v primeru, da bo morebitno adaptacijo delal nekdo drug in ne za vašim računalnikom.
Tako. Zdaj znate vse. Hitro poforvardirajte tole vašemu oblikovalcu ali pa kar sami poprimite zgoraj omenjena orodja! Obljubim, da ste za vsaj 3 ure zaposleni! 😉
*Bonus: Kaj pa Swiffy (ali katerikoli drug pretvornik Flasha v HTML5)?
Lahko v vmesnem obdobju pretvarjate Flash v HTML5 s Swiffyjem, ki ga predlaga Google? Ta naj bi oglase, napisane v Flashu, preračunal/prekodiral/premetal v HTML5. Poudarek v prejšnjem stavku je na besedni zvezi “naj bi”. Storitev je zadovoljiva v povsem enostavnih oglasih, brez naprednejših animacij. Takoj, ko pa želimo v našem oglasu pokazati malce več dinamike, ko pripravljamo tako imenovan rich media ad, pa niti v teoriji pretvorba ni možna – saj Flash temelji na popolnoma drugačnem pristopu programiranja kot HTML. Kot da bi želel iz recepta za kruh pripravit sočno pečenko. Enostavno se sestavine pač razlikujejo. Toliko. HTML5 in konec debate.
Se beremo.
Kako prenesem oz. instaliram Google Web Designer?
Marko, Google Web Designer je za prenos na voljo tule.
Žal ne najdem “download-a” na tej strani.
Ali je vzrok to, da uporabljam brskalnik Firefox?
Marko, meni spletna stran za prenos Google Web Designer izgleda takole –> http://cl.ly/fsOG/Firefox%20Apr%2028%2010.01.08.png.
Lahko preveriš Chrome in v “incognito mode”?