# Animerede bannerannoncer: bevægelse, der hjælper budskabet

[Canonical HTML page](https://gradiently.design/da/guide/animated-banner-ads)

Et banner får et blik ud af øjenkrogen. Bevægelse kan fortjene det blik, og så skal den aflevere til et budskab, der er enkelt nok til at blive læst på et sekund.

## The short version

- Effektive animerede bannerannoncer følger som regel et kort storyboard på tre billeder: en krog, værdien og så brandet og opfordringen til handling.
- Det sidste billede i et animeret banner bør virke alene, fordi mange annoncenetværk begrænser, hvor længe eller hvor mange gange animationen må køre.
- Almindelige displaystørrelser er 300×250, 728×90, 300×600, 160×600 og 320×50 pixels.
- Animerede bannere leveres som regel som HTML5-pakker eller GIF’er, og netværkene sætter stramme grænser for filvægten på begge.
- Bevægelse i et banner bør trække øjet én gang og så lade ordene stå stille længe nok til at blive læst.

Gode **animerede bannerannoncer** bruger bevægelse til at fange øjet én gang og så komme af vejen for budskabet. Den pålidelige struktur er tre billeder: en krog, værdien og et slutbillede med brandet og en tydelig opfordring til handling, der bliver stående. Hold hele sekvensen kort, få det sidste billede til at virke som en stillestående annonce alene, og hold filen let, for annoncenetværk begrænser både, hvor længe animationen kører, og hvor tung filen må være.

## Storyboardet på tre billeder

Bannerannoncer ses i forbifarten ved siden af noget, læseren faktisk kom for. Ingen venter på, at et banner bliver færdigt. Planlæg sekvensen, så hvert billede giver mening alene, og rækkefølgen fortæller en lille historie.

1. **Billede 1: krogen** Én kort linje eller ét slående billede. Dets eneste opgave er at få nogen til at kigge. »Dit skrivebord, roligere.« To til tre sekunder.
2. **Billede 2: værdien** Hvad du tilbyder, i læserens egne vendinger. »Kabelbakker, der passer til ethvert skrivebord.« To til tre sekunder.
3. **Billede 3: slutbilledet** Logo, tilbuddet kort og en opfordring til handling formet som en knap. »Se kollektionen.« Dette billede bliver stående, til annoncen stopper.

Et kvadratisk annoncebillede med krogen dit skrivebord, roligere over en langsomt bevægelig gradient

Billede ét: en krog på fire ord over bevægelig farve. Intet andet konkurrerer med den.

Et kvadratisk slutbillede med et brandnavn, en kort værdilinje og opfordringen se kollektionen

Slutbilledet: brand, værdi og opfordring til handling samlet. Hvis det er alt, nogen ser, virker annoncen stadig.

Det samme storyboard virker til annoncer på sociale medier, som som regel er korte videoer frem for bannere. [Design af Facebook-annoncer](https://gradiently.design/da/guide/facebook-ad-design) og [design af Instagram-annoncer](https://gradiently.design/da/guide/instagram-ad-design) dækker de formater.

## Timing og loops i animerede bannerannoncer

Mange annoncenetværk og udgivere begrænser, hvor længe animationen må køre, og hvor ofte den må loope, og grænserne varierer. Google Ads begrænser for eksempel uploadede animerede annoncer til 30 sekunders animation. Tjek den gældende specifikation hos hvert netværk, du køber hos, og design, så annoncen slutter på sit stærkeste billede uanset grænsen.

| Del | Timing | Regel |
| --- | --- | --- |
| Krogbillede | 2 til 3 sekunder | Korte ord, stor skrift |
| Værdibillede | 2 til 3 sekunder | Én fordel, ikke en liste |
| Slutbillede | Bliver stående | Brand, tilbud og opfordring til handling, læselig som stillbillede |
| Overgange | 300 til 500 ms | Hurtige og ensartede. Én stil til alle billeder |
| Hele sekvensen | Omkring 6 til 10 sekunder pr. afspilning | Kort nok til at loope nogle gange inden for grænserne |

En tommelfingerregel for læsetid: kan du ikke læse et billede højt to gange, før det skifter, så giv det længere tid eller skær ord væk.

> **Undgå blink og hektisk bevægelse** Hurtige blink er ubehagelige og kan være skadelige for mennesker med lysfølsom epilepsi, og annoncenetværk afviser dem almindeligvis. Bevæg farve og skrift jævnt, og aldrig hurtigere end øjet kan følge med.

## Standardstørrelser til bannerannoncer

Displaynetværk bruger et sæt standardstørrelser. En kampagne dækker som regel flere af dem, så design et system i stedet for én annonce: et layout, der omarrangerer sig til brede, høje og små pladser og beholder de samme ord, farver og bevægelse.

- Mellemstort rektangel: 300 × 250
- Halv side: 300 × 600
- Bred skyscraper: 160 × 600
- Leaderboard: 728 × 90
- Mobilbanner: 320 × 50

Almindelige displaystørrelser i målfast størrelsesforhold. De meget brede og meget lave pladser kræver færre ord og et enklere slutbillede.

| Størrelse (px) | Navn | Hvad der kan være på |
| --- | --- | --- |
| 300×250 | Mellemstort rektangel | Hele historien på tre billeder. En god mastersstørrelse |
| 300×600 | Halv side | Plads til et billede over ordene |
| 160×600 | Bred skyscraper | Ord stablet, to eller tre pr. linje |
| 728×90 | Leaderboard | Én linje pr. billede, logo og knap side om side |
| 320×50 | Mobilbanner | Kun krog og knap. Logoet kan være krogen |

Design først 300×250, og tilpas derefter. Udgivere og netværk beder ofte også om versioner med dobbelt tæthed.

## GIF eller HTML5 til animerede bannere

De fleste displaynetværk accepterer animerede annoncer som enten GIF eller HTML5, en lille pakke af HTML, CSS, JavaScript og billeder. HTML5 giver jævnere bevægelse, skarp tekst i enhver tæthed og fuld farve og passer til rigere annoncer. GIF er enklere at lave og accepteret næsten overalt, men dens grænse på 256 farver får gradienter til at vise bånd. Grænserne for filvægt er stramme på begge, målt i kilobyte frem for megabyte, så tjek hvert netværks specifikation.

Hvis du vælger GIF, holder teknikkerne i [animerede GIF’er](https://gradiently.design/da/guide/gif-maker-tips) vægten nede: færre billeder, en palet bygget ud fra animationen og så lidt af billedet i bevægelse som muligt. Til selve bevægelsen er ensartet [easing](https://gradiently.design/da/guide/easing) det, der skiller et poleret banner fra et hakkende.

## Designregler, der får bannere til at virke

### Undgå

- Fire eller fem billeder med tekst
- Lille tekst over urolig, hurtig bevægelse
- Logoet kun i første billede
- En ny animationsstil til hvert element
- Et slutbillede uden tydelig opfordring til handling

### Gør

- Tre billeder med en håndfuld ord hver
- Stor skrift over langsom, rolig farve
- Brandet på slutbilledet, der bliver stående
- Én overgangsstil hele vejen
- En opfordring til handling formet som en knap på det sidste billede

En karakteristisk baggrund er den billigste måde at blive genkendt på tværs af en kampagne. Når det samme farvefelt bevæger sig bag hvert billede og hver størrelse, begynder folk at forbinde bevægelsen med dig, før de har læst et ord. Test variationer af krogen frem for hele annoncen. [Test af annoncekreativer](https://gradiently.design/da/guide/ad-creative-testing) forklarer, hvordan du gør det retfærdigt.

Gradiently passer til kampagnens sociale del. Design krogen og slutbilledet på en Mark, der tilhører dig, tilpas til 1080×1080, 1080×1350 og 1080×1920 i ét trin på Pro, og eksportér hver som MP4. Marken gengives til hvert format, så dens rolige område stadig sidder bag ordene i alle størrelser.

## FAQ

### Hvor lang bør en animeret bannerannonce være?

Én afspilning på omkring 6 til 10 sekunder passer til de fleste bannere. Mange netværk begrænser den samlede animationstid, Google Ads til 30 sekunder for uploadede animerede annoncer, så tjek hvert netværks specifikation.

### Hvor mange billeder bør et animeret banner have?

Tre er en pålidelig struktur: en krog, værdien og et slutbillede med brandet og opfordringen til handling. Flere billeder betyder som regel flere ord, end nogen vil læse.

### Hvad er de mest almindelige størrelser til bannerannoncer?

300×250, 300×600, 160×600, 728×90 og 320×50 pixels er blandt de mest brugte displaystørrelser. Start med 300×250, og tilpas de andre ud fra den.

### Skal animerede bannerannoncer være GIF eller HTML5?

HTML5 giver jævnere bevægelse og skarpere tekst og passer til rigere annoncer. GIF er enklere og accepteret næsten overalt, men viser bånd i gradienter. Begge skal overholde netværkets grænse for filvægt.

### Hvad bør det sidste billede i en bannerannonce vise?

Brandet, tilbuddet kort og en tydelig opfordring til handling, lagt ud, så billedet virker som en komplet stillestående annonce, hvis animationen stopper der.