Banner-størrelser

Med bannere kan man enten bygge et rutenett av bannere med opp til 4 bannere pr. rad (på større skjermer), eller man la banneret fylle hele bredden. Med bredden mener vi da  rutenett-seksjonens bredde som kan være en av 4 mulige; 

• full (hele nettleser)
  • (med denne mister man kontroll, da sluttbruker i kan ha svært brede skjermer..)
• nettsted (maks 1440px) 
  • Dette er standard og mest vanlig bredde på rutenettseksjonene 
  • NB! Last helst ikke inn bilder som er smalere enn 1440px dersom bildene skal dekke hele banneret.
• bred (maks 1080px)
• smal (maks 720px)

På skjermer som er smalere enn maksbreddene så vil seksjonene fylle all tilgengelig bredde.​

På små skjermer (mobil) vil alle banner-størrelser unntatt størrelsene S og S-M fylle hele bredden. Men de vil ha litt ulike høyder. Ser mer om dette i det følgende.

Grovt sett kan man si at bannere kan være 

• kvadratiske: S, M
• liggende(desktop) / stående (mobil): M-S, L-M, L, (XL)
• L,L-M og XL tar i tillegg hele bredde både på desktop og mobil
• stående: S-M , (M-L)

Størrelsene L-M, L og XL vil fylle hele rutenettseksjonens bredde på desktop (større skjermer enn mobil). En utfordring med akkurat disse tre størrelse er at de går fra et liggende format på desktop til et kvadratisk eller stående format på mobil.

På mobil vil aktså de fleste bannere (untatt S og S-M) fylle hele skjermes bredde. De "store" variantene (L-M, L, XL) vil på mobil ta igjen litt av det de mister av breddemessig omfang i høyden, slik at de fortsatt fremstår som store. Men dette vil da medføre at de går fra et liggende format på desktop til et mer kvadratisk eller stående format på mobil. Dette får igjen konsekvenser for eventuelle bilder i slike bannere, da noe vil måtte kuttes fra disse enten på desktop (vil ikke kunne vises stående bilder i sin helhet) eller mobil (vil ikke kunne vise liggende bilder i sin helhet). For å bøte på dette kan man velge "fokuspunkt" på bildene slik at man har kontroll på hva som skal være i senter dersom noe må kuttes.

Skulle man vist et liggende bilde i sin helhet på stående mobil, vill dette blir veldig lavt, og man ville dermed ikke kunne f.eks plassere tekst oppå bildet, hvilket er et vanlig oppsett for bannere i Museum24. Men merk at ifbm. med arbeidet med Museum24 2.0 (nytt grunnstilsett) vil det kunne komme endringer på dette for å forsøke å lage mer optimale løsninger for alle skjermflater.

Ettersom et nettsted kan vises på utallige ulike skjermstørrelser blir det vanskelig å si akkurat hvilke eksakte dimensjoner i pixcelstørrelser som bannerne (eller bilder inne i disse igjen) har.  Det er viktigere å forstå hvilket forhold det er mellom bildets bredde og høyde; aspect-ratio. Angivelse:  Bredde : Høyde

Tabellen nedenfor viser bannerenes aspect-ratio for standard Museum 1.0 grunndesign. Merk at det kan være gjort endringer på dette pr. kunde, samt at det vil komme noen endringer på dette i Museum24 2.0. Merk også at det er ikke gitt at bilder i bannere har den samme aspect-ratio, da dette igjen kommer an på hvilken "layout" (plassering av bilde i banneret) man velger.

• D = Desktop (nettbrett eller større)
• M ​= Mobil (stående)

Det er vanlig å plassere media/bilder i bannere. Hvordan bildet vil plasseres i banneret avgjøres av hvilke "layout" man velger. Her finnes det 6-7 ulike valg. I noen av disse vil banner og bilde ha samme aspect-ratio.

• Auto / ​Tekst på bilde : Bildet ligger i bakgrunn av banner og får dermed en ratio lik banneret størrelsinnstilling.
• Variabel høyde: Bildet fylle bannerets dimensjoner, og et tekstfelt (med høyde som følger tekstmengde) legges under. Bildets ratio blir dermed lik banneret størrelsinnstilling. En utfordring med denne innstillingen er at bannere ved siden av hverandre får ulike høyder noe som både kan gi visuelle og flytmessige utfordringer. Akkurat dette vil bli kraftig forbedret i Museum 24 2.0 (som er under utvikling).
• Bilde over / under:  bildet ligger over eller under banneret tekst og fyller hele bannerets bredde og halve høyden. Bildets ratio blir lik BB:BH/2
• Bilde til venstre/høyre: bilde ligger til venstre eller høyre for bildet og fyller hele høyden og halve bredden. Bildets ratio blir lik BB/2:BH
• Spesial: Litt ulikt pr. kunde, og ikke alltid i bruk.. I Museum24 2.0 vil denne metoden trolig brukes for å skape en mer ideel overgang mellom visning på mobil og desktop.

Kombinasjonen av ulike banner-størrelser, ulike layouts (plassering av bilde vs tekst) og ulike skjermstørrelser gjør det i flere tilfeller umulig å sikre at et bilde alltid vil bli vist i sin  helhet, når bildene brukes i bannere. Derfor har Museum24 en fokuspunkt-funksjonalitet som gjør at man kan redaksjonelt kan peke på det området av et bilde som man ønsker at skal være i fokus dersom bildet ikke kan vises i sin helhet. 

I Museum24 2.0 (nytt grunndesign) jobbes det med å utvikle visningsvarianter som forsøker å løse dette mer ideelt, f.eks ved at visningsformene på mobil skiller seg noe mer fra desktop-visning.

Hvis man ønsker å tilpasse et bilde slik at det vises helt eller så godt som i sin helhet f.eks i et hovedbanner på en forside må man ta stilling til hvilken størrelses-innstilling og hvilken layout som banneret har og om man ønsker det vist i sin helhet på store eller små skjermer. I visse tilfeller er det nemlig umulig å lykkes med begge deler.

Bildet må i så fall produseres med en aspekt-ratio som er lik det i ønskemålet man måtte ha. Den faktiske pixel-størrelsen på bildet spiller ingen rolle så lenge det er "stort nok" til ikke å måtte skaleres opp ved visning. Altså bør bildets original i hvert fall være bredere enn 1440px (som er normalt nettstedenes maks-bredde). Det skader ikke at det er vesentlig bredere enn dette, da Museum24 uansett vil hente ut nedskalerte versjoner ved visning. Det viktige er altså at ratio (forhold mellom bredde og høyde) er riktig om man skal lykkes med dette. Ettersom nettstedet vises både på desktop og mobil, må man ta utgangspunkt i desktop og ikke laste inn noe som er laget spesifikt for små mobiler (hvilken enn størrelse disse måtte ha..) og så ender opp med å skaleres opp på desktop.

Gitt at banneret har størrelse L-M og en av layoutene som gir lik ratio på banner og bilde så vil det da si 20:9 på desktop og 2:3 på mobil. Så dersom man laster inn et bilde med f.eks  B*H = 2000px * 900px så vil dette vises i sin helhet på alle skjermer som har et liggende format. Den eksakte størrelsen i en 1440px bred rutenett-seksjoner vil være 1440px *  648px, men det er ingen grunn til å produsere bilder med så eksakte størrelser. Man kan like gjerne legge seg på runde/enklere tall bare de er store nok. I fremtiden vil det bli mulig å vise bilder som med enda høyere oppløsning i Museum24 så jo større de opplastede originalene er jo bedre..

På mobil vil da deler av dette bildet kuttes og man vil dermed kunne velge fokuspunkt for å ha litt kontroll på hva som skal vises.  Hvis man motsatt produserer et bilde som vil vises i sin helhet på mobil i et 2:3 format, f.eks 1000px * 1500px så vil dette da ikke vises i sin helhet i det samme banneret på desktop.

Ønsker man å produsere bilder som fyller noen av de andre bannerstørrelsene perfekt, f.eks M eller S, så er altså aspect-ratio der 1:1, som vil si at man vil lykkes godt med bilder som er originalt er på f.eks 1500px * 1500px. M og S vil også ha samme ratio på mobil så de er sånn sett enklere å lykkes med.  Bilder med 1:1 ratio vil også egne seg godt for S-M kombinert med layout: bilde over/under eller M-S kombinert med bilde til venstre/høyre.  Skal bilder ligge i bakgrunnen av disse vil bildene følge bannerenes ratio som er 1:2  (f.eks 1000px * 1500px) eller 2:1 (f.eks 1500px * 2000px)..

I verktøyet som det lenkes til nedenfor, kan man fore inn ønskede aspect-ratios og f.eks en ønsket bredde ( i pixler), for å så finne hvilken høye bildet må ha.

• https://calculateaspectratio.com/

Generelt er det pr i dag en vanskelig øvelse å produsere bilder som skal være ideelle for bannere i og med at det er så mange faktorer (banner størrelse, layout, skjermer) så påvirker dette, spesielt gjelder dette for de store bannerne som får et veldig forskjellig uttrykk på desktop vs mobil. Men et og annet bilde tilpasset f.eks hovedbannere på forsider, som da vises i sin helhet f.eks på desktop, kan jo være greit dersom man over tid opererer med de samme innstillinger på dette banneret.  Men man må da være klar over at på mobil-visning vil man pr i dag ikke ende opp med det samme resultatet, og dersom bildet er aktuelt å bruke i andre sammenhenger (f.eks bannere med andre innstillinger) så vil ikke bildet nødvendigvis være like egnet.

Noen kvadratiske bilder (1:1, f.eks 2000px*2000px) vil også være greie å forholde seg til i en del oppsett (M, S, M-S (bilde til venstre/høyre), S-M (med bilde over/under). Bilder i 2:1 eller 1:2 ratio vil kunne være nyttige som bakgrunner i S-M eller M-S bannere.

Men dersom man har bilder som man ønsker å alltid vise i sin helhet uansett hva slags format disse måtte ha, anbefaler vi i stedet å tilgjengeliggjøre disse via mediamoduler (slideshow, grids el.)  i vanlige artikler. Bannere bør man primært se på som innganger til annet innhold, der tekst/lenke i banner er hovedbudskapet og bilde/media mer er en kuliss/pynt som ikke er hovedbærer av budskapet. 

Noen praktiske eksempler i det følgene:

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

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

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.

• Se eksempler på hva bannere kan inneholde