Undgå disse 2 typiske fejl som ofte sker for professionelle annonceleverandører

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 mlgruppes enheder, mobilskærme, laptops, tv og i de web-medier, som bringer bannerannoncering.


De to typiske fejl

  • 1. Display-annoncer der ikke skalerer og bliver beskret forkert.
  • 2. Annoncer der skalerer, men hvor indholdet flyder sammen.

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 undgr, at dine annoncer bliver vist p nettet, enten beskret, 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:

  • 1. Responsive panel: Responsive layout. 
  • 2. Menu: View / Responsive / Resize handles.


Properties panel: Alle elementer, tekstbokse og grafik er valgt:

  • Vælg procenter i stedet for pixels: vælg Use percentages. 
  • Vælg Scaling: Resize image to fit.
  • Vælg Alignment: Top left.

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  

  • 1. Åbn responsive-panelet.
  • 2. Opret de relevante størrelser i Sizes.


Library

  • 1. Åbn Library.
  • 2. Klik på Edit default rules.
  • 3. Træk de ønskede annonceelementer ind i layoutvinduet.

Åbn Properties panel:

  • 1. Vælg al grafik  (ctrl/cmd-A).
  • 2. Angiv layout i procent Use percentages
  • 3. Vælg “offset” for hver grafik og tekst: Scaling: Resize image to fit og Alignment: top left.


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!