Doporučení pro HTML5 bannery

Pokud nemáte k dispozici grafika, pro výrobu animovaných HTML5 bannerů doporučujeme Google Web Designer (zdarma), který dokáže poskytnout dostatečný komfort při výrobě kreativy a zároveň je jeho výstup při dodržení technické specifikace v souladu a požadavky reklamního systému Sklik. Dále plně podporujeme bannery z nástroje Adform HTML5 Studio.

Animační programy není nutné použít, pokud svěříte výrobu banneru zkušenému webovému grafikovi/kodérovi s pokročilými znalostmi jazyků HTML, CSS a JS.

Doporučení ke kreativě:

Soubor následujících doporučení vám pomůže vyvarovat se nejčastějších chyb při výrobě HTML5 bannerů.

1. Grafické zpracování

Kvalitní grafické zpracování dotváří výsledný dojem z reklamního sdělení a zvyšuje zájem uživatele o Vaše produkty nebo služby. Design reklamních bannerů doporučujeme svěřit zkušeným firmám v oboru. Zpravidla pak dosahují vyššího výkonu.

2. Výrazná a srozumitelná komunikace

Při tvorbě všech reklamních bannerů je nutné brát na zřetel fakt, že čtenáři navštěvují webové stránky primárně kvůli jejich obsahu, nikoliv kvůli samotné reklamě. Pokud je chcete zaujmout, vytvořte kreativu co nejméně komplikovanou. V tomto případě platí, že méně je více, zejména u bannerů menších rozměrů. 

3. Animace jsou skvělé, ale všeho s mírou

Forma sdělení by neměla převažovat nad samotným obsahem inzerce. Animace využijte účelně a snažte se jimi co nejlépe vystihnout podstatu vašeho produktu nebo služby. Správným vyvážením designu a animací uživatele zaujmete. Přehnaně animovaný banner působí rušivě a čtenáře může od zajímavé nabídky spíše odradit.  

4. Délka animace

Reklamní bannery jsou na webových stránkách rozmístěny na různě viditelných pozicích a čtenář si je prohlíží postupně, zpravidla směrem ze shora dolů. Nikdy není předem jasné, v jaké fázi animace si čtenář vašeho banneru všimne. Proto ponechte hlavní sdělení v kreativě vždy jasně viditelné po celou dobu animace a vyvarujte se tzv. hluchých míst, které nemají žádnou informační hodnotu. Doporučená délka animace je do 10 sekund, maximálně 15 sekund. Animace se však může opakovat.

5. Písmo

Usnadněte potenciálním zákazníkům přenos reklamního sdělení z vašeho banneru k nim a proto nepoužívejte příliš ozdobná písma nebo sazbu, která je obtížná ke čtení. Jednoduchá bezpatková písma v optimální velikosti (minimálně 18 px na výšku a vysázená v rovině) jsou nejlepší volbou.

6. Rychlost načítání

Čím dříve se váš banner načte, tím rychleji může oslovit vašeho potenciálního zákazníka. Snažte se tedy vytvářet bannery s co nejmenším množstvím souborů a pokud možno s co nejnižší datovou velikostí (při zachování dobré obrazové kvality).

7. Vektory a bitmapy

Pro dosažení maximální možné obrazové kvality a nízké datové velikosti, používejte v co největší míře vektorové objekty (formát SVG). Bitmapám (např. fotografie ve formátu JPG/PNG/GIF) nastavte vhodný stupeň komprese, který odpovídá barevnému složení daného objektu. Při použití více bitmapových objektů může být kvůli úspoře datové velikosti vhodné vytvořit tzv. „sprite sheet“.

8. CPU

Vytvořený banner by neměl zatěžovat procesor (CPU) na mobilním zařízení nebo počítači z více než 10 %. Vzhledem k většímu množství dalších bannerů nebo jiných výpočetně náročných prvků (např. před Vánoci populární “sněžení”) na webové stránce, by se mohly následně animace ve vašem banneru zpomalit a kreativa by tak mohla ve výsledku ztratit svou dynamiku. V krajním případě může dojít i k zamítnutí reklamy, která nadměrně vytěžuje systémové prostředky zařízení koncového uživatele.

9. Testování je důležité

Přestože je již technologie HTML5 v dnešní době plně podporována napříč všemi majoritními prohlížeči (Chrome, Firefox, Safari, MS Explorer 11) a zařízeními – desktop i mobil. Vždy si na nich pro jistotu chování finální verze banneru otestujte a v případě odchylek od záměru banner vylaďte.