Adnamis guide til responsive bannerannoncer:
Undgå disse 2 typiske fejl som ofte sker for professionelle annonceleverandører
Med det gratis værktøj, Google Web Designer, sikrer du, at dine html5-annoncer vises korrekt på din målgruppes enheder, mobilskærme, laptops, tv og i de web-medier, som bringer bannerannoncering.
De to typiske fejl
Hvem er denne vejledning for?
Denne vejledning henvender sig først og fremmest til annonceleverandører og brugere af Google Web Designer, der ved hvordan, man opretter en ny displayannonce, vælger annonceformater og placerer grafik og tekster, etc.
Den handler specielt om, hvordan du undgår, at dine annoncer bliver vist på nettet, enten beskåret, så vigtig information ikke ses, eller med responsive layoutfejl med grafik og tekst “der flyder sammen.”
Adnami foreslår Google Web Designer-appen, da den er specielt udviklet af Google til display-annoncering og derfor næsten er en web-standard.
Hvis du ikke er erfaren bruger, og ønsker at vide noget om programmet generelt, findes der instruktive videoer på Youtube og link, hvor du henter appen Google Web Designer.
Der findes andre værktøjer end Google Web Designer (GWD) til at producere display-annoncer. I GWD arbejder man responsivt som beskrevet nedenfor, men i andre programmer kan det være noget andet. Det er bare vigtigt at responsiviteten er defineret, så banneret vil virke korrekt.
BEMÆRK
Hvis du arbejder i andre programmer og frameworks end Google Web Designer:
Responsive fejl opstår også i andre værktøjer eller frameworks end Google Adwords, og er typiske i web design. Vi henviser til vejledninger på nettet specifikt rettet mod disse programmer.
Responsiv fejl nr. 1
Annoncer der er kvadratiske, i højformat, eller lavformat
Display-annoncen skalerer, men indholdet beskæres forkert
Denne instruktion gælder, hvor annoncen vises i flere størrelser, men hvor forholdet mellem højde og bredde altid er det samme.
En annonce designet i f.eks. 600*600 pixels skal kunne vises korrekt i 300*300 pixels uden uønsket beskæring.
Start – følgende skal være er slået til:
Properties panel: Alle elementer, tekstbokse og grafik er valgt:
Fungerer annoncen nu som den skal? Prøv at skalere den ved at trække i nederste højre hjørne. Husk at holde skiftetasten nede.
Responsiv fejl nr. 2
Annoncer der er kvadratiske, i højformat, eller lavformat
Display-annoncen skalerer – men indholdet blandes sammen
Ofte skal annoncerne vises på formater, der måske ikke stemmer helt overens med de valgte faste pixelstørrelser.
Denne metode sikrer, at du undgår, at grafikken flyder sammen i området omkring de faste annoncestørrelser. Annoncen vil optræde fleksibelt ved visninger, hvor formatet ikke 100 % matcher den aktuelle plads i mediet, hvor annoncen skal vises.
Brug Sizes og Range media rules
1.
Med Sizes bestemmer du de faste størrelser, som annoncen skal vises i, og hvordan grafikelementerne layoutes.
2.
Med Range media rules afstemmer du grafikelementernes fleksible placering inden for definerede marginer.
Første trin: I Responsive-panelet vælger du annoncens forskellige størrelser
Library
Åbn Properties panel:
Arrangér herefter elementerne på de valgte annonceformater.
Man kan vælge flere størrelser; i dette eksempel bruges kun tre.
TIP
Du kan kun indstille Alignment, når Edit Default Values er aktiveret
Hvis grafikken er placeret centreret eller tæt på samme annoncehjørne, kan du eksperimentere med en anden Alignment-indstilling som f.eks. center eller bottom right.
Range media rules indstilles på Media rules manager-siden
For at styre, hvordan grafikken opfører sig inden for ønskede marginer, kan du vælge at definere f.eks. tre media range rules for de annoncestørrelser, som er vist med gule tjekbokse.
TIP
Mediarange rules
Du kan i princippet oprette ligeså mange media range rules, du vil: Jo flere der er defineret, jo mere præcist vil du kontrollere responsiviteten.
Du kan altid gå tilbage og justere rammernes størrelse og tilføje flere, hvis der er behov for det.
Annoncen tilpasses de valgte media ranges een efter een.
Du tjekker, at de enkelte elementer skalerer og placerer sig fornuftigt ved at trække i annoncens nederste højre hjørne.
Annoncen og grafikelementerne fungerer nu optimalt og responsivt!
