Ako vytvoriť skvelý HTML5 banner, ktorý predáva

Keď sa prvýkrát objavilo rádio, špecialisti na média predpovedali, že „klasické noviny sú mŕtve“ a do pár rokov určite zaniknú. Nestalo sa tak. Neskôr sa objavila televízia a špecialisti hovorili, že „rádio je mŕtve“ a že do pár rokov určite zanikne. Potom prišiel internet a všetci pre zmenu hovorili, že prichádza „súmrak televízie“. Máte doma telku? Ak áno, tak sa špecialisti opäť mýlili.

Prečo o tom hovoríme? Často sa totiž počas rozhovorov stretávame s otázkou: „Webové bannery? Veď tie sú dávno prekonané.“ Ľudia, ktorí majú takýto názor, sa (neprekvapivo) opäť mýlia. Každá technológia sa totiž s príchodom nových trendov menila a zlepšovala, ale stále perfektne slúži svojmu účelu. Ľudia aj dnes vo veľkom počúvajú rádio, sledujú televíziu, scrollujú sociálne siete – a klikajú na bannery.

Mimochodom, naozaj ste si tento týždeň nepozreli (či dokonca neklikli) ani na jeden banner?

Majú webové bannery zmysel aj dnes?

Ak sa opýtate špecialistov na výkonnostné online kampane, odpovedia vám bez váhania: „Stopercentne áno. Ale iba v prípade, že sú kvalitné.“ Bannery sa vizuálne aj technologicky posunuli, rovnako ako všetky ostatné mediálne kanály. Stále však platí, že ak dokážu odovzdať informáciu príťažlivým spôsobom, tak si nájdu svoju cieľovú skupinu. Samozrejme, ak sa zúčastníte pretekov s tridsaťročným Favoritom a skončíte posledný, je nezmysel tvrdiť, že všetky autá sú už dnes prekonané. Prekonané je iba to vaše.

Preto dnes v diskusii o banneroch už nemôžeme hovoriť o klasických obrázkových (či dokonca textových 🤦🏻‍♂️) banneroch. Dnešné online bannery sa hýbu, blikajú, menia texty – a niektoré dokonca reagujú, keď po nich prechádzate myšou.
Zoznámte sa s HTML5 bannermi.

Čo sú HTML5 bannery?

Čo je to za zvláštny názov, to HTML5? Jednoducho povedané, ide o bannery, ktoré vytvoríme s pomocou značkovacieho jazyka HTML. Ide o jazyk, ktorý je základnou stavebnou jednotkou všetkých webových stránok. Aj táto stránka, ktorú práve čítate, bola vytvorená s pomocou HTML kódu.

A tak, ako môžete na stránke klikať na tlačidlá či využívať ďalšie interaktívne prvky, rovnako môžete tieto možnosti využiť pri banneri, ktorý bol vytvorený touto technológiou. Každý banner sa tak vlastne stáva malou webovou stránkou. Možno už začínate tušiť, aké možnosti to otvára vo svete online reklamy. V podstate do nich dokážeme dostať veľa veľa prvkov, ktoré môžete poznať priamo z webových stránok.

Aké sú teda výhody HTML5 bannerov?

Všetko to samozrejme znie veľmi zaujímavo, ale poctivý sedliacky podnikateľský rozum vo vás sa ihneď spýta: „Ako mi to všetko pomôže v podnikaní?“

HTML bannery ponúkajú oproti klasickým bannerom hneď niekoľko dôležitých výhod:

HTML5 banner podporuje interakciu

Vďaka možnostiam a interaktivite, ktorú dokážete využívať, si tieto bannery dokážu oveľa efektívnejšie získať pozornosť. A špeciálne vtedy, keď do toho vložíte trochu kreativity. Propagujete výrobcu okien? Pripravíme vám banner, v ktorom sa okno otvorí a spoza neho na zákazníkov vykukne ponuka. Alebo vytvoríme banner, v ktorom visí šnúrka z rolety a zákazník za ňu môže zatiahnuť – a po zrolovaní sa mu zjaví ponuka. Hravé prvky sú mimoriadne účinné pri zvyšovaní miery prekliku na web.

A čím viac ľudí dostanete na web, tým vyššia je šanca, že dôjde ku konverzii.

 

HTML5 banner využíva doplnkové dáta, aby bol osobnejší

HTMLko dokáže aj zaujímavejšie veci, než len vytvoriť klikateľné tlačidlo. Predstavte si, že pre vás vytvoríme banner, ktorý si vezme konkrétny parameter, ako je napríklad poloha diváka, a využije ho v reklame.

Vo výsledku uvidí jeden zákazník v Poprade text „Kvalitné okna pre celý Poprad“ a iný zákazník v Martine uvidí banner „Kvalitné okná pre celý Martin“. Reklamy tak budú osobnejšie, čo je dôležitý faktor, ktorý vplýva na interakciu s reklamou.

Funguje skvelo v každom prehliadači

Možno ste si nikdy neuvedomili, aké problémy spôsobuje tvorcom online obsahu responzivita. Žijeme vo svete, kde si počas dňa pozeráte obrázky a videá v smartfóne, ktorý má displej situovaný „na výšku“, zatiaľčo televízory a monitory notebookov sú situované na šírku. Ak pre banner využívate klasické obrázky, veľmi rýchlo zistíte, že musíte tvoriť obsah samostatne pre každý kanál. HTML5 bannery vám v tomto smere ušetria veľmi veľa času, keďže sa vedia ľahko prispôsobiť rôznym displejom a formátom. Šetríte tak grafikov čas – a tým pádom aj svoje peniaze.

 

Ako zostaviť úspešný HTML5 banner?

Je to veľká veda? Ani zďaleka. Tvorbu online bannera dnes zvládne takmer ktokoľvek. Inou vecou však je, ak potrebujete banner, ktorú bude napĺňať marketingové ciele značky. V takom prípade potrebujete niekoho, kto v týchto vodách pláva a vie vám bez dlhého premýšľania povedať, čo funguje a čomu sa radšej vyhnúť. Pozrite sa na nasledujúci príklad, ktorý vám ukáže, že nie je jedno, kto pre vás takéto bannery pripravuje.

Od klienta sme v tomto prípade dostali zadanie prepracovať ich existujúce bannery.

Čo sme zmenili? Väčšie a primerane upravené fotografie, minimum plochy, na ktorej je umiestnený text (pretože ľudia sa radšej pozerajú než čítajú) a výraznejšie „call to action“ prvky, ktoré pozývajú k interakcii. Niekedy môžete mať jasno v tom, čo chcete mať na tanieri, potrebujete však niekoho, kto vie suroviny namiešať a uvariť tak, že budú neodolateľné. Čo všetko sa môže pri tvorbe týchto bannerov skomplikovať?

Jednou z najčastejších chýb pri tvorbe HTML5 bannerov je napríklad snaha klientov dostať do banneru čo najväčšie množstvo textu v duchu hesla: „Naložíme mu, čo sa doňho zmestí“. Na prvý pohľad to môže pôsobiť logicky, keď si však takýto banner vo výsledku pozriete, zistíte, že vôbec nie je pekný, pretože množstvo textu v ňom zabíja celú kreatívu.

Banner totiž nie je webová stránka, má na ňu iba odkazovať. Má byť dostatočne pútavý, aby vzbudil zvedavosť, zároveň však nemá odpovedať na všetky otázky, pretože práve preklik na web je konečný cieľ, ktorý ním chceme dosiahnuť.

Čo však robiť, ak klient predsa len potrebuje odovzdať väčšie množstvo informácií, pretože je to dôležité pre vzbudenie zvedavosti zákazníkov? V takom prípade je dobrým riešením rozdeliť text do viacerých slajdov, ktoré sa v rámci animovaného banneru postupne striedajú, podobne ako pri ukážke nižšie. Ďalšou možnosťou (hoci o čosi menej elegantnou) potom je rozdeliť text do viacerých bannerov v rámci jednej kampane.

Úspech sa ukrýva v detailoch

A takto to platí aj v ďalších veciach. Viete, čo vo všeobecnosti odlišuje dobrý HTML5 banner od skvelého? Možno vás to prekvapí, ale často sú to detaily. Malé veci, ktoré vo výsledku spôsobia veľké zmeny. Chcete príklad? Dáme vám príklad.

Pri väčšine reklamných sietí platí pravidlo zastavenia animovaného bannera do 30 sekúnd. Čiže po 30 sekundách sa animovaný banner musí prestať hýbať a ostať statický.

Môžete teda naprogramovať veľmi pekný a veselý banner, ktorý však bude mať na konci už len logo a tlačidlo zistiť viac. Ak si návštevník webu nevšimne banner hneď po otvorení stránky, ale najprv sa začíta napr. do blogu), v momente, keď si banner začne všímať, vidí už len – tlačidlo. My preto štandardne komponujeme bannery tak, aby dávali zmysel aj vtedy, keď sa z animovaných zmenia na statické.

(Ukážka zle premysleného animovaného bannera)

Ako sme už povedali vyššie – sú to malé detaily, ktoré vo výsledku prinášajú veľký rozdiel v interakciách, návštevnosti webu – a aj v predaji a návratnosti vynaloženej investície.

Nechajte si poradiť

Ak potrebujete pomôcť s bannermi pre vašu kampaň, ozvite sa nám. Máme bohaté skúsenosti s celým spektrom klientov – od automotive po realitný trh, od webových aplikácií po e-shopy. Radi sa s vami porozprávame o tom, ako môžete prostredníctvom HTML5 bannerov alebo iných médií zažiariť na trhu a priviesť na svoj web správnu cieľovku. Kliknite sem a dajte nám vedieť. Tešíme sa na spoluprácu.