Hopp til hovedinnhold

Banner-størrelser

På denne siden finner du oversikt over over alle størrelsene en banner kan ha, og samtidig noen eksempler på hvordan de kan kombineres.

Bannerstørrelser og deres samspill:

Slide deg gjennom slideshowet for å de 8 bannerstørrelsene og hvordan de henger sammen.

  • 1/8
    Small: Dekker 25% (50% på mobil) av rutenettseksjonens bredde
  • 2/8
    Small-medium: Dekker 25% (50% på mobil) av rutenettseksjonens bredde og fyller samme høyde som en medium-modul. Dobbel høyde av en small.
  • 3/8
    Medium: Fyller 50% av rutenettseksjonens bredde (100% på mobil) og dobbelt høyde av en small-modul.
  • 4/8
    Medium-small: dekker 50% av rutenettseksjonens bredde (100% på mobil) og samme høyde som en small- modul.
  • 5/8
    Medium-large: Dekker 50% av rutenettseksjonens bredde (100% på mobil) og 3 ganger høyden av en small modul (= høyden av en large modul)
  • 6/8
    Large-medium: Dekker 100% av rutenettseksjonens bredde på desktop og mobil og samme høyde som en medium (= høyden av to small)
  • 7/8
    Large: dekker 100% av rutenettseksjonens bredde på desktop og mobil. Fyller høyden til 3 small-moduler.
  • 8/8
    XL: Fyller 100% av rutenettseksjonens bredde og 100% av skjermhøyde på alle skjermflater.

Noen tips:

  • Størrelser gjelder kun når bannere plasseres i rutenett-seksjoner
    • Hver banner kan fremstå i 8 ulike størrelser.
    • Rutenett-seksjonen som omslutter bannerne kan også være i 3 ulike bredder.
    • Banner-layout: Oppsett av bilde til venstre eller høyre i hver enkelt banner gjør at rutenettet kan fremstå enda mer omfattende.
  • Hver rutenettseksjon bør inneholde inntil 4 bannere, men kan i praksis inneholde et uendelig antall
    • Vi anbefaler  flere rutenettseksjoner med færre bannere i hver seksjon for å unngå noen potensielle bugs.
  • ​På små skjermer/mobil  vil bannere alltid plasseres under hverandre, med unntak av "small"-bannere.
    • Unntak: "s" (small) bannere legges to i bredden på mobil stående skjerm.
    • Noen få banner-kombinasjoner f.eks  "s + m-s + s" gir uheldige glipper på små skjermer. 
  • Bannere har tradisjonelt blitt brukt for å bygge opp forsider på nettstedene, men kan like gjerne benyttes i vanlige artikler for å skape mer mer variert oppbygning av disse.
  • Tradisjonelt vises bannere helt "tett" i "tett", men det er mulig å designe inn mer luft mellom bannere om ønskelig. Nedenfor er dette gjort, men kun på skjermer over 640px bredde..


Nedenfor: Bannere i "full nettsteds bredde"-rutenettseksjon.

25% på dekstop
50% på mobil

medium-small
50% på desktop
100% på mobil

small-medium

large-medium

large

XL gir alltid full skjermhøyde

Smalere rutenett

Bannere i "bred" rutenett-seksjon. Rutenett kan også være "smal" hvilket vil si vanlig innholdssekjon/brødtekst bredde.

Rutnett: smal

Gjør det f.eks mulig med et par "bokser" side om side.. I boksene (banneren) kan det ligge bilder, filmer eller annet..

Hva kan bannere inneholde?

I eksemplene her er bannere bare gitt en bakgrunnsfarge og størrelsen på dem er angitt som bannerets tittel. I praktisk bruk inneholder bannere en rekke funksjoner som kan være nyttige.


Eksempler på bannerinnhold:

Denne blir 4x small i høyde. Burde være 3.