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.

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

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.

s:small

25% på dekstop
50% på mobil

s

m-s

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

s-m

small-medium

s-m

m-s

m-s

l-m

large-medium

l

large

xl

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.

s

s

s

s

m

m

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..

 (Foto/Photo)

banner

 (Foto/Photo)

banner

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:

m-l

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

m-s

m-s

m-s

m-s