HTML5 Bannere

Alt du skal vide om HTML5-bannere

Hvad er HTML5-bannere? Hvordan producerer man HTML5-bannere? Og hvorfor er det vigtigt for dig som marketeer og digital designer at vide alt om HTML5-bannere?

Det kommer vi hele vejen rundt om nedenfor – god fornøjelse.

Hvad er HTML5-bannere?

HTML5-bannere refererer til bannerannoncer, der anvender HTML5-elementer, hvilket helt konkret betyder, at bannerne ofte er interaktive og indeholder mere avancerede visuelle elementer sammenlignet med standard grafiske bannere.

Grundet formatets større mulighed for kreativitet og bevist højere CTR, er HTML5-bannere et populært valg. Udover, at HTML5 giver mere frit spil med det visuelle, følger der også en række af andre fordele med den populære bannertype. En af de største fordele ved HTML5-bannere er, at de kan bruges på tværs af platforme og enheder, da man på meget simpel manér kan inkorporere responsive elementer i bannerne, så de tilpasser sig den givne enhed eller format. Et eksempel på et HTML5-banner, kan være et videobanner, hvorpå en video starter, så snart brugeren kører musen henover annoncen.

“Mobile first”-æraen og videos rolle

Markedet ser en stigning i smartphone brugere på internettet, hvilket også betyder, at annoncer i højere grad bliver browset på telefonskærme. Selvom det måske ikke lyder som banebrydende nyheder, har det en indflydelse på, hvordan du skal tænke det faktum ind i dit bannerdesign.

Bannerannoncer skal altså være lige så visuel fede at se på, på telefonen, som de er på computeren. Brugeroplevelsen skal være på det samme niveau uanset enhed og platform. Nogle elementer, som fungerer perfekt på en større computerskærm, kan ikke altid overføres direkte til en mindre mobilskærm. Dog betyder dette ikke, at du skal sidde og redigere hver eneste banner i din annoncekampagne, da vores bedste ven – HTML5 – klarer det for dig på bedste automatiske vis.

HTML5-formatet giver dig på en simpel måde, mulighed for at udvikle bannere, der er mobilvenlige, responsive og rige på indhold samt funktioner. På den måde sikrer du, at dine annoncer er konkurrencedygtige og er godt klædt på til det smartphone dominerede marked.

Udover, at annoncer helst skal være mobilvenlige, kan du med fordel også gøre brug af HTML5-banners mulighed for at indeholde video-elementer. Indenfor digital marketing og displayannoncering vokser brugen af video drastisk. I Europa ser man at brugen af videoannoncer er tredoblet sammenlignet med annoncer uden video-elementer.

Brugen af video i dine HTML5-bannere får din annonce til at fremstå mere autentisk og skaber en bedre forbindelse til brugeren, hvilket hjælper med konvertering og salg. Desuden er videobannere et genialt værktøj til den stilfulde virksomhed, der ønsker at brande sig selv som kvalitetsbevidst. På et grundlæggende niveau, har du mulighed for at bruge en video i dit banner som baggrunden, eller potentielt som en del af banneranimationen. Det kan f.eks. være en trailer, der slutter med en call to action (CTA)-ramme.

Den store konkurrence i bannerannonceverden betyder, at du kun har få sekunder til at overbevise brugeren om, at lige netop dit produkt eller din virksomhed er værd at lære mere om, hvilket videoformatet er fremragende til at formidle.

Dét kan HTML5-bannere

HTML5-bannere kommer både i statiske og animerede versioner, men man ser en stigende popularitet i brugen af animerede HTML5-bannere. Et simpelt banner med et billede og tekst der animerer ind i banneret i løbet af de første tre sekunder, kan ganske fint formidle et budskab, hvis du f.eks. designer bannere til en blomsterhandler og dermed kan bruge billeder af blomsterdekorationerne på banneret. Det er en klassisk måde at designe HTML5-bannere på, som har stor success, men der findes også rig mulighed for at tage sine HTML5-bannere til det næste niveau, ved at udvikle dem til animerede og interaktive bannere.

Uanset om HTML5-banneret er statisk eller animeret, findes der et utal af fordele ved at bruge dem i marketing. Det største aspekt er som sagt, at uanset hvilken enhed eller browser du er på, vil banneret vise og animere det samme, fordi der ved HTML5-bannere findes stor mulighed for tilpasning af formatet.

Til trods for dette, betyder størrelse og format også noget for formidlingen af budskabet i banneret. Et banner med for meget tekst kan nemt se fedt ud på computeren, men måske være sløret eller ulæseligt på mobilen. Dette bør der derfor tages højde for, når man designer sit HTML5-banner.

Vælger du et animeret HTML5-banner, åbner du samtidig op for en verden af kreativitet i og med, at du ikke længere behøver at presse alle oplysningerne ind i ét enkelt billede, der alt sammen skal vises på én gang. Med HTML5-bannere kan du oprette separate dias eller keyframes, der har forskellige dele oplysninger.

HTML5-bannere har også en større tendens til at blive husket, for lad os se det i øjnene; vi elsker skinnende og prangende ting, som har et professionelt udtryk.

Når du opretter og designer dit HTML5-banner kan du i meget større grad have indflydelse på, om brugeren husker annoncen, da du kan trække på elementer som førnævnte. Ikke dermed sagt, at alle HTML5-bannere er overdrevne – brugere er blot mere tilbøjelig til at huske annoncer med pang i, sammenlignet med et almindeligt, stillestående billede.

Fordi HTML5-bannere kan komme i så mange forskellige størrelser og design, åbner dette også op for muligheden for at nå en større rækkevidde, når det kommer til målgrupper. Nogle brugere er større tilhængere af tekst, mens andre er fan af video. HTML5-bannere rummer det hele og du har derfor muligheden for at formidle til et meget større publikum, samt tilpasse dine bannere specifikt efter målgrupper. 

 

Download Zuuvi’s Cheat Sheet til bannerproduktion

Download Cheat Sheet
Du får tilsendt et Cheat Sheet, som hjælper dig til at producere best-in-class bannere

Det du skal tænke over, når du skal producere HTML5-bannere

1. Vælg den rette skabelon til dine bannere

Når du opretter layoutet for din banneranonce, er der specifikke pixels og mål som dit banner skal leve op til. Alt efter hvilken platform eller enhed du designer banneret til, er der forskellige anbefalinger af bannerstørrelser.

Bruger du Zuuvis egen platform til at udvikle dine bannere, kan du udvikle det samme design i flere størrelser, så du sparer udviklingstiden og kan producere flere banner på én gang. Bannere kommer i mange forskellige størrelser, hvoraf de mest almindelige er størrelserne “halv side” (300×600), “leaderboard” (728×90) og “medium rektangel” (300×250). Hvilken størrelse der egner sig bedst til lige netop din situation, er nødvendig at forholde sig til, da størrelsen ikke er helt ligegyldig for formidlingen af dit budskab. Er du i tvivl om hvilken størrelse banner, du skal starte med?

Læs mere om, hvad de forskellige størrelser egner sig bedst til i vores Cheat Sheet.

Download vores Cheat Sheet til bannerproduktion her

2. Design udseendet af dine bannere

Har du svært ved at vide, hvor du skal starte, kan du finde inspiration fra vores templates og arbejde videre derfra. Vi hjælper dig på vej med en forudbestemt farvepalette og animationer, som du senere kan redigere, så de passer lige præcis dine visioner om et lækkert banner.

Ved du præcis, hvad du vil have, kan du også starte fra scratch med et blank canvas og kreere derud af. Læg ud med at vælge den rette baggrund og prøv forskellige teksttyper af, til du finder den, som passer dit brand og budskab.

Husk at tilføje din virksomheds logo til banneret, for at sikre brand genkendelsen. Når du producerer et HTML5-banner, er kontrollen, du har over designet næsten ubegrænset. Vores platform gør det nemt for dig at redigere alle elementer af banneret, så alt du skal fokusere på, er at udfolde din kreativitet.

På trods af, alt det smarte tech der skal gøre udviklingsprocessen nemmere for dig, er der stadig et fastlagte par punkter, du skal have in mente. Billeder du vil inkludere på banneret, skal f.eks. helst ikke overstige 4000×4000 pixels. Faktisk er det bedst at bruge så få pixels som muligt, dog uden at gå på kompromis med kvaliteten af billedet. Jo færre pixels, jo lettere bliver banneret rent volumenmæssigt.

3. Tilføj animationer

Når du har designet klar og budskabet formidlet, er det tid til at tilføje det, som er en af de mest spændende funktioner ved HTML5-bannere – nemlig animationerne.

Du kan tilføje animationseffekter til din tekst, ikoner eller CTA-knapper. Det er her, at du får mulighed for at sætte din kreativitet på prøve allermest og udforske verden af grafisk animation. Det er en god idé at have i baghovedet, at bare fordi du kan animere alting, betyder det ikke, at du skal.

Alt med måde og begræns dine animationer, så det ikke virker som om, at du overbruger virkemidlerne. På den måde vedvarer du et stilet banner, som afspejler dit brand eller virksomheds personlighed.

I Zuuvi har vi en lang række best-practice templates tilgængelige til dig, når du producerer bannere. Sådan kan du hurtigt komme igang med at producere en bannerpakke.

Start en gratis prøveperiode og test vores platform her.

4. Sæt bannerne live!

Når du føler dig tilfreds med dit lækre HTML5-banner, kan du udforske de forskellige størrelser, som vores platform genererer for dig. Download det banner, du har brug for og upload det på den ønskede hjemmeside eller platform.

Voila!

Prøv gratis i 14 dage. Selvfølgelig uden forpligtelser.

Start i dag

Se vores kunders bannere og bliv inspireret