V tomto článku jsme se chtěli podělit o zkušenosti s procesem tvorby bannerů a poskytnout návod na jejich výrobu a optimalizaci. Během psaní jsme zjistili, že to nebude tak jednoduché...

Tvorbou reklamních bannerů pro internetové kampaně se zabýváme už od prvopočátků online reklamy. Začínali jsme statickými i animovanými flash bannery a sadami pro portály Seznamu a header bannery pro různé webové stránky a e-shopy. I když jsme si během té doby utvořili určitý koncept vedení bannerových kampaní, zjistili jsme, že ke každé realizaci musíme často přistupovat velmi individuálně. Odlišné specifikace a ruzné kombinace reklamních potrálů, kam se bannery nasazují, nedovoluje mít nějaký univerzální mustr, podle kterého by grafik/animátor/kodér bannery pro kampaň připravil. Jsou desítky kombinací, takže většinou co kampaň to originál.

Proto ještě předtím, než se pustíte do grafických návrhů bannerů, je potřeba udělat si předběžnou analýzu kampaně. Tzn. zjištění, kde budou bannery nasazeny, přes jaký systém a s jakými specifikacemi (omezeními). Znamená to někdy také navržení správné sady velikostí bannerů v závislosti na kampaních. Např. pokud se inzeruje v Google Ads i Skliku, výběr shodných formátů pro direct a RTB reklamy. Dále musíte počítat s tím, že některé portály jako např. Sklik nepovolují dynamický obsah, abyste se pracně nedělali s animacemi a pak nezjistili, že je povolena pouze statika. Specialista v tom, jak tvůrcům bannerů neulehčit, je např. Mafra (portály iDnes a spol). Tam je někdy řešením vytvořit animace pouze v čistém CSS, aby vůbec prošly přísnými pravidly agentury. Toto vše je na zvážení před samotnou realizací, ideálně sepsané v bodech pro klienta, který s tím bude srozuměn, nebo vám to nejlépe písemně odsouhlasí v emailu, aby nevznikaly nejasnosti při předávání hotových bannerů.

Tímto se dostáváme do další fáze realizace reklamní kampaně - tvorbě návrhů. Té, pro kreativce příjemné a tvůrčí, s marketingově grafickým přesahem. Jaké použít nástroje na tvorbu grafických návrhů? Dalo by se říci, jakýkoliv grafický editor, ale opět to není tak jednoznačné. Velmi záleží, co je ve vizuálu kampaně použito za grafiku. Může být různorodá, bitmapy (fotografie), vektory (logo), texty (webové) nebo např. SVG symboly. Podle toho je také dobré pracovat s návrhy, takže samozřejmě nejvhodnější kombinací je Creative Cloud a jeho nástroje, ve kterých všechny tyto formáty můžeme dobře editovat, ale hlavně kombinovat. Pokud budete pak animace bannerů připravovat v Adobe Animate o to více oceníte provázanost jednotlivých softwarů (Photoshop, Ilustrator, Animate, Adobe XD). U video bannerů využijete i Premiere nebo After Effects. Uspořádání grafiky banneru je na každém tvůrci, nicméně existují určitá pravidla, kterými je dobré se řídit, aby byl banner co nejvíce klikatelný. To by bylo na delší povídání, zkuste zagůglit např. pod keywords "bannery prvek CTA".

Návrhy jsou hotové, nastává čas posílání si souborů. Pokud využijete doporučený Creative Cloud, můžete krásně publikovat přes Adobe cloud files s možností komentářů klientem, pro neAdobáře WeTransfer nebo klasický email taky není k zahození. Nejlepší varianta reakce klienta je, když návrhy projdou na první dobrou :), nebo druhá alternativa, korekturuje se :(, nu což, běžná věc. Nicméně většinou se dopracujete k nějaké finální verzi statických grafických návrhů, která je připravena k převodu na animace.

A je to tu! Animujeme. Můžeme využít už zmíněný Adobe Animate, bannery pro Google Ads v něm také projdou, pokud se následně přehraje automaticky generovaná JS knihovna a nastaví nové id. Nebo kdybyste to chtěli mít pro strýčka Googla dokonalé, tak na jistotu jejich software Google Web Designer (GWD) už to přímo optimalizuje pro Ads kampaně. Ovládání trochu méně intuitivní než Animate, ale oproti tomu zase Web Designer podporuje 3D parametry, takže pokud budete potřebovat efekty typu flip nebo 3D cube, tak v Animate to nedáte, v GWD ano. Portály Seznamu (SAuto, Sbazar atd.) jde použít Animate, povolují zabalené i jejich JS knihovny. Portály Mafra neprojde ani Animate, dokonce ani GWD, skrze nízký limit (150kB), do kterého započítávají i externí knihovny. Tudíž zde je možnost pouze statika nebo čisté CSS animace, aby se vešlo.

Když si projdeme kolečkem animací, je tu další část realizace - optimalizace zobrazování bannerů na zařízeních a operačních systémech. Vše testujeme důkladně a dlouho, pokud možno všude, kde se dá.
Operační systémy: iOS a Windows starší i novější verze. Linux se zatím neřeší, ale pokud máte, můžete klidně i tam.
Nejpoužívanější prohlížeče: Chrome, Firefox, Safari, Opera, Edge, ale také starší verze Exploreru.
Zařízení: desktop, tablet a smartphone / iOS, Win a Android
Aby testování nebylo málo, tak u bannerů pro Google je nejlepší je otestovat přímo v jejich aplikaci v rámci reklamního systému nebo na HTML5 validátoru. Na Seznamu komplexní nástroj na testování zatím nemají, pouze link na kontrolu externích zobrazovacích kódů. Pokud je všude všechno ok, můžeme si dovolit zaslat klientovi na schválení animací. Opět nastává očekávání, jestli to bude na první dobrou nebo korekturovaná verze.

Máme odsouhlaseno!!! Jdeme do finále. Zaslané animované bannery mají většinou nastavení z exportu, podle zvoleného sofwaru, ve kterém jsme banner připravovali (Animate, GWD...). Vytvoříme si složky s názvy jednotlivých potrálů, kde budou bannery nasazeny, nakopírujeme do nich a pojmenujeme podle požadavků agentury. Pak jednotlivé kódy bannerů ještě doupravíme podle požadovaných specifikací daných portálů. Bývají rozdílné scripty clickTagu (DCM, AdForm..), požadavky na otvírání v novém nebo stejném okně, nebo již zmiňované podporované JS knihovny. Po finálním vyladění všech souborů, můžeme slavnostně odeslat klientovi, agentuře, nebo rovnou nahrát do reklamního systému. A pak čekat, jestli vše proběhne bez reklamací. Pokud jste udělali všechny výše zmíněné kroky, tak je velká pravděpodobnost, že to vyjde ;).

Tak takto nám to nakonec vyšlo. Čtenáři trochu znalému problematiky a online technologií to třeba něco řekne, začínajícím tvůrcům reklamních kampaní možná i pomůže. Běžný uživatel internetu asi často nebude vědět, o co jde. Každopádně snaha tu byla :).

Pod zn. d-sign připravujeme animované nebo statické bannery pro jakékoliv reklamní kampaně na internetu. Sady pro Google Ads, Sklik, AdForm, Facebook, Instagram nebo jiné reklamní systémy.

Máte-li zájem o vytvoření konkrétní nabídky a kalkulace na zpracování bannerů, KONTAKTUJTE NÁS.

Další informace a ukázky realizovaných bannerů najdete na webu BANNERY ONLINE..