# Animerade bannerannonser: rörelse som hjälper budskapet [Canonical HTML page](https://gradiently.design/sv/guide/animated-banner-ads) En banner får en blick ur ögonvrån. Rörelse kan förtjäna den blicken, men sedan måste den lämna över till ett budskap som är enkelt nog att läsa på en sekund. ## The short version - Effektiva animerade bannerannonser följer oftast en kort storyboard på tre rutor: en krok, värdet och sedan varumärket och uppmaningen. - Sista rutan i en animerad banner ska fungera på egen hand, eftersom många annonsnätverk begränsar hur länge eller hur många gånger animation får spelas. - Vanliga displaystorlekar är 300×250, 728×90, 300×600, 160×600 och 320×50 pixlar. - Animerade bannrar levereras oftast som HTML5-paket eller GIF, och nätverken sätter snäva gränser för filvikten för båda. - Rörelse i en banner ska fånga blicken en gång och sedan låta orden stå stilla tillräckligt länge för att läsas. Bra **animerade bannerannonser** använder rörelse för att fånga ögat en gång och sedan kliva åt sidan för budskapet. Den pålitliga strukturen är tre rutor: en krok, värdet och en slutruta med varumärket och en tydlig uppmaning som blir kvar på skärmen. Håll hela sekvensen kort, låt sista rutan fungera som en stillbildsannons på egen hand och håll filen lätt, eftersom annonsnätverk begränsar både hur länge animationen får gå och hur tung filen får vara. ## Storyboarden på tre rutor Bannerannonser ses i förbifarten, bredvid något läsaren faktiskt kom för. Ingen väntar på att en banner ska bli klar. Planera sekvensen så att varje ruta ger mening ensam och ordningen berättar en liten historia. 1. **Ruta 1: kroken** En kort rad eller en slående bild. Dess enda uppgift är att få någon att titta. ”Ditt skrivbord, lugnare.” Två till tre sekunder. 2. **Ruta 2: värdet** Vad du erbjuder, på läsarens villkor. ”Kabelrännor som passar vilket skrivbord som helst.” Två till tre sekunder. 3. **Ruta 3: slutrutan** Logotyp, erbjudandet i korthet och en uppmaning formad som en knapp. ”Se sortimentet.” Rutan står kvar tills annonsen slutar. Kvadratisk annonsruta med kroken ditt skrivbord, lugnare över en långsamt rörlig gradient Ruta ett: en krok på tre ord över rörlig färg. Inget annat konkurrerar med den. Kvadratisk slutruta med ett varumärkesnamn, en kort värdetext och uppmaningen se sortimentet Slutrutan: varumärke, värde och uppmaning tillsammans. Om det här är allt någon ser fungerar annonsen ändå. Samma storyboard fungerar för sociala annonser, som oftast är korta videor snarare än bannrar. [Design av Facebook-annonser](https://gradiently.design/sv/guide/facebook-ad-design) och [design av Instagram-annonser](https://gradiently.design/sv/guide/instagram-ad-design) tar upp de formaten. ## Timing och loopar i animerade bannerannonser Många annonsnätverk och utgivare begränsar hur länge animation får gå och hur ofta den får loopa, och gränserna varierar. Google Ads begränsar till exempel uppladdade animerade annonser till 30 sekunders animation. Kontrollera den aktuella specifikationen för varje nätverk du köper från, och designa så att annonsen slutar på sin starkaste ruta oavsett gräns. | Del | Timing | Regel | | --- | --- | --- | | Krokruta | 2 till 3 sekunder | Korta ord, stor text | | Värderuta | 2 till 3 sekunder | En fördel, inte en lista | | Slutruta | Står kvar | Varumärke, erbjudande och uppmaning, läsbara som stillbild | | Övergångar | 300 till 500 ms | Snabba och enhetliga, en stil för alla rutor | | Hela sekvensen | Cirka 6 till 10 sekunder per spelning | Kort nog att loopa några gånger inom gränserna | En tumregel för lästid: om du inte hinner läsa en ruta högt två gånger innan den byts, ge den längre tid eller ta bort ord. > **Undvik blixtrande och hektisk rörelse** Snabba blixtar är obehagliga och kan vara skadliga för personer med fotosensitiv epilepsi, och annonsnätverk avvisar dem ofta. Flytta färg och text mjukt, och aldrig snabbare än ögat hinner följa. ## Standardstorlekar för bannerannonser Displaynätverk använder en uppsättning standardstorlekar. En kampanj täcker oftast flera av dem, så designa ett system i stället för en annons: en layout som ordnar om sig för breda, höga och små platser men behåller samma ord, färg och rörelse. - Medelstor rektangel: 300 × 250 - Halvsida: 300 × 600 - Bred skyskrapa: 160 × 600 - Leaderboard: 728 × 90 - Mobilbanner: 320 × 50 Vanliga displaystorlekar i skala. De mycket breda och mycket låga platserna behöver färre ord och en enklare slutruta. | Storlek (px) | Namn | Det här ryms | | --- | --- | --- | | 300×250 | Medelstor rektangel | Hela historien på tre rutor, en bra originalstorlek | | 300×600 | Halvsida | Plats för en bild ovanför orden | | 160×600 | Bred skyskrapa | Orden staplade, två eller tre per rad | | 728×90 | Leaderboard | En rad per ruta, logotyp och knapp sida vid sida | | 320×50 | Mobilbanner | Bara krok och knapp, logotypen kan vara kroken | Designa 300×250 först och anpassa sedan. Utgivare och nätverk ber ofta även om versioner med dubbel täthet. ## GIF eller HTML5 för animerade bannrar De flesta displaynätverk tar emot animerade annonser som antingen GIF eller HTML5, ett litet paket av HTML, CSS, JavaScript och bilder. HTML5 ger mjukare rörelse, skarp text i alla tätheter och full färg, och passar rikare annonser. GIF är enklare att göra och accepteras nästan överallt, men dess gräns på 256 färger gör att gradienter får band. Gränserna för filvikt är snäva för båda, mätta i kilobyte snarare än megabyte, så kontrollera varje nätverks specifikation. Om du väljer GIF håller teknikerna i [animerade GIF](https://gradiently.design/sv/guide/gif-maker-tips) vikten nere: färre rutor, en palett byggd av animationen och så lite av rutan i rörelse som möjligt. För själva rörelsen är enhetlig [acceleration och inbromsning](https://gradiently.design/sv/guide/easing) det som skiljer en polerad banner från en ryckig. ## Designregler som får bannrar att fungera ### Undvik - Fyra eller fem rutor med text - Liten text över stökig, snabb rörelse - Logotypen bara i första rutan - En annan animationsstil för varje element - En slutruta utan tydlig uppmaning ### Gör - Tre rutor, en handfull ord var - Stor text över långsam, lugn färg - Varumärket på slutrutan som står kvar - En övergångsstil genom hela - En uppmaning formad som en knapp på sista rutan En särpräglad bakgrund är det billigaste sättet att bli igenkänd genom en kampanj. När samma färgfält rör sig bakom varje ruta och varje storlek börjar folk koppla rörelsen till dig innan de läser ett ord. Testa variationer av kroken snarare än hela annonsen. [Testning av annonsmaterial](https://gradiently.design/sv/guide/ad-creative-testing) förklarar hur du gör det rättvist. Gradiently passar kampanjens sociala sida. Designa kroken och slutrutan på en Mark som tillhör dig, ändra storlek till 1080×1080, 1080×1350 och 1080×1920 i ett steg i Pro och exportera var och en som MP4. Marken renderas för varje format, så dess lugna område ligger fortfarande bakom orden i varje storlek. ## FAQ ### Hur lång ska en animerad bannerannons vara? En spelning på cirka 6 till 10 sekunder passar de flesta bannrar. Många nätverk begränsar total animationstid, Google Ads till 30 sekunder för uppladdade animerade annonser, så kontrollera varje nätverks specifikation. ### Hur många rutor ska en animerad banner ha? Tre är en pålitlig struktur: en krok, värdet och en slutruta med varumärket och uppmaningen. Fler rutor betyder oftast fler ord än någon läser. ### Vilka är de vanligaste bannerstorlekarna? 300×250, 300×600, 160×600, 728×90 och 320×50 pixlar hör till de mest använda displaystorlekarna. Börja med 300×250 och anpassa de andra utifrån den. ### Ska animerade bannerannonser vara GIF eller HTML5? HTML5 ger mjukare rörelse och skarpare text och passar rikare annonser, medan GIF är enklare och accepteras nästan överallt men ger band i gradienter. Båda måste klara nätverkets gräns för filvikt. ### Vad ska sista rutan i en bannerannons visa? Varumärket, erbjudandet i korthet och en tydlig uppmaning, utlagda så att rutan fungerar som en komplett stillbildsannons om animationen stannar där.