Norske nettsider bør være 960px brede
Det er vanskelig å vite hvor bred du bør designe nettsiden din, spesielt for oss som i noen grad lever av reklame som skal passe inn. I denne artikkelen skal jeg mene litt om hva jeg synes er en hensiktsmessig bredde, relatert til spesielt to forhold: Hvor store nettleservinduer nordmenn faktisk har, og at reklamebransjen er godt moden for en noe mer standardisert bredde.
Først en liten begrepsavklaring: Jeg kommer til å snakke mest om viewport, ikke så mye om skjermbredde. Viewport (noen som har et godt norsk ord?) er den delen av nettleservinduet som brukes til å vise frem selve nettsiden, på innsiden av alt av rammer, statuslinjer og menyer. Hvor store skjermer folk har er i grunn uinteressant i denne sammenhengen, det er størrelsen på viewport som er vårt utstillingsvindu.
FINN har målt viewport i et par år, og har tidligere skrevet en artikkel om hvor stor del av nettsiden din som faktisk er synlig for brukerne. Der er hovedpoenget at folk flest har lave skjermer, og at du burde ha et bevisst forhold til hvor du plasserer det viktigste innholdet. Denne gangen er bredden hovedfokus.
Så brede er norske nettlesere
Grovt forenklet kan vi gruppere brukerne slik:
- 10% av brukerne ser mindre enn 1000 piksler
- 15% ser akkurat 1000 piksler
- 15% ser mellom 1000 og 1250 piksler
- 30% ser akkurat 1250 piksler
- De resterende 30% ser mer enn 1250 piksler
Vi har samlet inn viewport-bredden fra 39 millioner besøk (drøye 800 millioner sidevisninger) på FINN.no i april 2010. I et forsøk på å visualisere det har vi laget et plot som viser hvor mange prosent av brukerne som faller innenfor ulike sidebredder.
Litt mer detaljer ser bildet slik ut:
| så mange har | viewport bredere enn |
|---|---|
| 95% | 783px |
| 90% | 980px |
| 85% | 1003px |
| 80% | 1004px |
| 75% | 1016px |
| 70% | 1109px |
| 65% | 1204px |
| 60% | 1252px |
| 55% | 1259px |
| 50% | 1259px |
| 45% | 1259px |
| 40% | 1263px |
| 35% | 1263px |
| 30% | 1280px |
| 25% | 1345px |
| 20% | 1351px |
| 15% | 1419px |
| 10% | 1519px |
| 5% | 1663px |
«Omtrent 1000px» vanskelig for annonsører
60% av brukerne har viewport som er stor nok til å se innhold som er 1250px bredt. Om lag 90% ser 1000px. Dette er “folk” flest, dvs IE7 eller IE8 på en 1024px eller 1280px bred skjerm. Ettersom høyden er et knapphetsgode er det fristende å bruke bredden til innhold.
Et nettsted som FINN, med store mengder innhold, og mange valgmuligheter, ønsker nå å ta i bruk mer av bredden. Det er viktig for oss at alt hovedinnholdet er synlig for alle, så vi legger oss på «ca. 1000»-merket.
Det er i dette leiet de fleste store norske nettsteder har lagt seg. VG på 990px, Startsiden på 982px, Dagbladet på 972px, Aftenposten på 990px, MSN på 977px (muligens sentralstyrt :)) og SOL på 960px.
Men vi ønsker å sikre at vi også er best mulig tilrettelagt for våre merkevareannonsører. Derfor håper vi det er mulig å få en konsensus på en eksakt anbefalt sidebredde. En fast innholdsbredde vil gjøre det lettere for alle som produserer reklamemateriell, og sikre at ditt og vårt nettsted ikke går glipp av kampanjer bare fordi det ikke produseres nok varianter av kampanjemateriellet, eller fordi det er mer lettvint for byråene å bruke pengene i andre mediekanaler.
Er det utopi å gå for dette når VG og Aftenposten har valgt 990px? Jeg mener 990px ikke er optimalt, ettersom det vil gi svært mange brukere et horisontalt rullefelt som stjeler høyde, i tillegg til at det vertikale rullefeltet delvis vil legge seg over innholdet. (Se oppdatering nedenfor.) Men det er kanskje andre grunner til de ulike valgene der ute? I så fall vil vi gjerne høre om de.
Hvorfor 960 piksler?
Så å si alle nettsider er høyere (eller lenger om du vil) enn det er plass til å vise i nettleservinduet. Det betyr at det vil komme et rullefelt til høyre i ruta. Denne tar ytterligere 15-20 piksler. Og så har de fleste litt luft rundt innholdet sitt, gjerne 8-10px.
Gitt at du ønsker at de fleste skal se innholdet ditt, blir regnestykket for den mest vanlige skjermbredden som følger:
1024px (hele skjermen)
- 20px (rammen på nettleseren)
- 15-20px (rullefelt)
- 8-20px (luft/ramme)
= 964-981px (gjenstår til selve innholdet)
Oppdatering 27. mai: Det ser ut som om jeg tar feil hva angår rammen på standard IE/Windows-oppsett. I maksimert tilstand er den bare 2px, og med 19px til scrollbar blir viewport 1003px. Avhengig av hva man ønsker av luft, vil brukere flest se alt innholdet ditt om det er innenfor 1003px, inkludert luft/ramme. Hovedargumentasjonen for 960px er fremdeles like relevant, men argumentet ovenfor om unødvendig horisontal scrolling ser ut til å kunne begraves. I stand corrected, og er i gang med armhevninger.
Men hvorfor 960px, og ikke 964-981px?
Dette har med design å gjøre, og her må dere gjerne ta i bruk kommentarfeltet! Jeg regner med litt deng fra tilhengerne av flytende bredde. Folk som har betydelig mer peiling enn meg på slikt har ment mye om dette. En presentasjon fra 2007, av en sjefsdesigner i NYTimes, er min største inspirasjonskilde for grid-basert design:
(Her kan du laste ned PDF-versjonen av presentasjonen: Grids are good.)
Skal en designe grid-basert (og det kan det være gode grunner for dersom du tjener penger på merkevare), så er det lurt å velge en bredde som gir deg stor frihet, dvs. kan deles opp i mange ulike varianter. Da er tallet 960 riktig så bra, og bare bittelitt mindre enn 964-981! 960 kan deles i 2, 3, 4, 5, 6, 8, 12, 15, 16, 20, 24 eller 30 like deler. Det gir voldsom fleksibilitet, samtidig som du sikrer en visuell helhet.
Går du for et 960-design finnes det også et utall hjelpemidler som er tilgjengelig på nettet: Overlay-filer til Photoshop, ferdig grid-grafikk, CSS-generatorer osv. Her er et knippe nyttige linker:
- 960.gs selve moderskipet for 960-basert design
- 10 Really Outstanding and Useful CSS Grid Systems – en finfin samling ulike grid-rammeverk
- gridsystemgenerator.com – kode/css-generator for ulike gridsystemer
Derfor: 960px er et godt valg for en standard bredde for reklamebannere!
…og så høye er norske nettlesere
Jeg har nevnt et par ganger at høyden er et knapphetsgode, så jeg runder av med en rask oversikt over hvor høy viewport norske nettsurfere har.
Brukere scroller av hjertens lyst, så lenge de skjønner at det kommer noe interessant lenger ned. Det er derfor viktig å ha denne grafen i bakhodet når du prioriterer innholdet ditt, spesielt om du har mye søkemotortrafikk, eller stor andel brukere som ikke er innom regelmessig. Da har du gjerne ikke så mange sekundene på å overbevise brukerne om at dette er et sted det er verdt å være.
Det er verdt å merke seg at så mye som nær halvparten av alle norske brukere ikke ser mer enn 600 piksler av innholdet ditt! Og har du slurva med valget av sidebredde, så får de kanskje et horisontalt rullefelt som stjeler ytterligere 15-20 verdifulle piksler. Det kan være overskriften på den neste artikkelen de går glipp av.
Vi har lenge holdt oss til 980px som maksbredde for nettsider vi lager. Det er da lett å bruke det fleksible 960-systemet hvis man har 10px på hver side med enten luft rundt innholdet, eller luft innenfor innholdsfeltet.
Hvordan ser grafene ut hvis dere filtrerer vekk alle mobile enheter? Det er egentlig ganske uinteressant å ha med mobile enheter i denne sammenhengen, da man bør ha eget tilpasset format for mobiler.
Du ber om et norsk ord for viewport, hva med synsfelt?
George Takk for kommentar! Finn er såpass ubehagelig på mobil at andelen slike terminaler i statistikken er forsvinnende liten. Synsfelt var er godt forslag, men kanskje litt tvetydig?
Kult å høre at dere er på 960/980. Har dere noen negative erfaringer med dette?
God post igjen, Erlend.
Vi har lagt oss på 980 – riktignok etter omtrent identiske vurderinger av dine. Jeg holdt sågar et foredrag om det på Institutt for Journalistikk tidligere i år.
Du peker for øvrig ikke på hovedproblemet: At vi har annonseformater tilpasset viewports fra en helt annen tidsalder – fremst av dem netboard-formatet med 468-bredde. Både geek- og pensjonspoeng tildeles for de av dere som har årsaken til 468-formatet i hodet.
Hvis vi skulle tatt en dugnad ville jeg heller at vi skulle bruke ressursene på å få frem annonseformater tilpasset et fornuftig grid – gjerne basert på 960. Der tror jeg vi som bransje har mye å hente.
Heisann! Skal jeg være litt pirkete her, ligger også Startsiden på 990 pixels, ikke 982. ;)
Ellers er jeg enig i at 960 pixels trolig er den beste størrelsen å sette som “ny” standard. Grid er en svært god grunn, bannerstørrelse en annen. En tredje grunn er mobile enheter. 960 er trolig i øvre grenseland for hva som er enkelt å browse på mobiltelefoner. Men defineres en slik bredde som standard, vil det ofte kun trengs små modifikasjoner for å kunne presentere innhold på en god måte også for mobile brukere. Sånn sett slipper kanskje mange også retningen “en webside for nett og en for mobil”. :)
Pål Nedregotten Takk for det, Pål, og selv takk for din innsikt og grundighet. Skremmende parallelt tenkt, men jeg lover at jeg ikke hadde sett presentasjonen din :)
Jeg tror ikke det er noen motsetning mellom ønsket om å standardisere annonseformatene kontra nettsidene, snarere en høna-eller-egget-problematikk. Min forståelse er at reklamebransjen er svært søkende etter den ene eller den andre varianten. Men jeg tror “vi” er i bedre stand til å gjøre noe med det enn dem. Derfor en litt bombastisk approach mot innholdsdistributører snarere enn annonseprodusenter.
Målet mitt med denne artikkelen er at den skal være en slags base for nettopp denne diskusjonen; hvilke annonseformater er fornuftige å legge oss på den nærmeste tiden (kanskje 1-3 år).
View port er ganske tvetydig det og :)
Har ingen negative erfaringer å melde med 960/980, men skulle selvfølgelig ønske at vi nå i 2010 kunne gå enda bredere!
Bård Øien Hei Bård, og takk for kommentar. Jeg har målt bredden på selve innholdet på nettstedene jeg nevner i artikkelen, ikke containeren rundt. Og innholdet på Startsiden er såvidt jeg kan se 982px.
Du har interessante poenger rundt mobilitet, og besvarer dem vel litt selv. Jeg tror du er inne på noe svært sentralt i at man gjennom å designe etter en eller annen struktur, være seg grid eller noe annet, er i bedre stand til å raskt endre presentasjonen av innholdet. Kjører man lappemetoden (som vi har vært gode til på FINN), og justerer litt etter litt, og litt for ofte, så blir vi fort låst i et statisk design.
Erlend,
Hvis jeg skal være bombastisk i retur så har du helt rett: “Vi” er nok langt bedre stilt til å ta grep enn “de” er – ikke minst fordi “vi” har kontroll på koden.
Vi (uten anførselstegn) har imidlertid møtt argumentet om at vi ikke kan endre verken skjermstørrelse eller grid fordi vi ikke er store nok til å diktere annonseformater. Er vi store nok, eller mange nok, kan vi imidlertid få gjort noe med det. To wit: VG endret Netboard-formatet til 580px ved siste forsideomlegging.
Så, til konklusjonen:
* Fornuftige annonsebredder tilpasset et fornuftig grid, tilpasset en fornuftig skjermstørrelse.
Hvem tar på seg å lage skisser? Jeg blir mer enn gjerne med på en dugnad og fører gjerne argumentene inn mot MBL/Nettforum.
George Touché :) Et av håpene med å dele disse tallene er jo at folk også skal kunne gå bredere, dersom de ønsker. Med denne statistikken er det kanskje lettere å gjøre kalkulerte vurderinger på “konsekvensene” av å bruke et bredt design.
Det vi ser er at bevegelsene mot bredere skjermer er en seig prosess. Verden har stått temmelig stille de siste 10 årene, ettersom bærbare PCer tok verden noen steg tilbake i forhold til skjermareal.
Jeg tror vi kommer til å ha en begrensning på 960-980-1000px bredde intill column-count / column-width kommer for fullt med CSS3. Det er alt for buggy i både gecko og webkit til at man kan bruke det i produksjon i dag (og seff 0 støtte i IE). Problemet er at linjebredden blir alt for bred hvis man beveger seg utover den nevnte bredden. Man kan riktignok dele opp innholdet ved hjelp av javascript på bredere sider, men da eksluderer man klienter som har javascript deaktivert.
Jeg har holdt på aeksprementere med mitt eget “fluidGRID CSS system” som gjør at siden – litt avhengig av innhold – skalerer fra mobile enheter opp til full skjerm/ hvor bredt man vil ha det. Dette i kombinasjon med nevnte column CSS3 deklerasjonen tror jeg kommer til å bli veien mange går i fremtiden.
Pål Nedregotten. Hei Pål
Denne problemstillingen er allerede spilt inn i fagruppen “Display-ad gruppen” i INMA. Der sitter representanter for de 12 største nettstedene i Norge. Så en konsensus om hva som bør bli den neste standard bredde (både toppbanner og netboard) i den gruppen, vil etter all sannsynlighet danne en ny standard. Alle ønsker det, spørsmålet er bare hva vi skal lande på. Det beste er å innstille på en bredde (og slik jeg leser det så er 960 langt på vei foreslått?), og deretter få den gruppen til å støtte forslaget.
De som sitter i den gruppen er nok ikke like gode på dette som dere (tror jeg :-), så det beste er nok om vi bruker denne blogen til å ha diskusjonen, for deretter å fremme et endelig forslag.
Jeg kan gjerne spille dette inn, men at dere er fagpersonene som står bak begrunnelsen.
Jeg er også veldig for dynamisk bredde på nettsider, Kenneth.
CSS støtter maks og min bredde på sider, slik at man kan få sidene til å se fornuftige både for de som har veldig liten og veldig stor viewport. Med litt jobb er det sikkert mulig å lage dynamiske sider også for de som har annonsører som prøver å gjøre det vanskelig.
Jeg mistenker at trenden er større variasjon ift viewport enn tidligere. Bruken av både netbooks, telefoner og store skjermer har mest sannsynlig økt, men skulle gjerne sett noe statistikk som underbygger dette.
960px er likevel et godt utgangspunkt for en fallback grid av nevnte grunner.
@Audun, @Kenneth: Har dere noen eksempler på gode nettsider (av litt størrelse) som har flytende bredde? Jeg kjenner til Amazon ganske godt og ser hva slags løsning de har valgt i forhold til innholdselementer og bredde (dog burde de gått ennå lengre etter min mening).
Det hadde vært spennende med slike eksempler, selv om dette for så vidt er utenfor kjernen av diskusjonen rundt 960 vs noe annet ;-)
Slik jeg oppfatter artikkelen så handler ønske om å standardisere på bredde mye om å komme frem til et nytt standard bannerformat. Det å lage et nytt format for toppbannere (i dag 768 x 150) mener jeg har pri 1 – og jeg synes at argumentet om 960px er bygd opp på en god måte. Jeg støtter deg helt ut her Erlend.
Videre tror jeg at man bør se nærmere på andre formater – og hvorvidt disse er hensiktmessige gitt at sidebredden ender på et sted mellom 960 og 1000 pixler. Personlig tror jeg ikke de er det – og særlig nettboard formatet (i dag er 468×400 pixler) bør man se på
Google har dynamisk bredde på mange av sine sider, Wave, Mail, Search og Docs for eksempel. Finner ingen større enn dem ;)
@Larre Standariseringsgruppen for web er vel en av den mest kjente som har dynamisk bredde. http://w3c.org.
Som Audun nevner har mange av google sine produkter dynamisk bredde.
Akkurat nå har dynamisk bredde en begrensning siden man er avhengig av at javascript er på hos klienten for at ikke linjebredden / whitespace blir for stor.
Et godt eksempel på en side som tar i bruk javascript for tilpassing av bredden er tutspluss sidene som for eksempel http://nettuts.com. De har begrenset det til 2 forskjellige bredder, men her er det ingen ting i veien for å skifte rundt på innhold for å tilpasse ønsket viewport størrelse.
For sider som lever av reklame blir det nye studier for å finne ut det mest attraktive punktet på 1000px+ brede sider.
Veldig bra Erlend!
Vi er for tiden helt i startgropen hvor vi skal se på mulighetene for en mer felles struktur på websidene innenfor MNO – MediaNorge. Her vil vi måtte legge opp til stor fleksibilitet innenfor et felles rammeverk for å tilfredsstille de fire avisene. Timingen din er derfor veldig bra Erlend.
Støtter Fredrik i at spesielt nettboard formatet legger en demper på mulighetene man har.
[...] [...]
Vi har for ikke lenge siden redesignet forsiden vår, og resten står for tur. Vi landet på et sidebredde på 990px. Dette fordi dette var maksimal hensiktsmessig bredde 1024 tatt i betraktning, og det gikk opp i mitt gridregnestykke bestående av 20 40px-spalter med 10px marg.
Mobile enheter ble ikke hensyntatt når ny sidebredde og grid ble utarbeidet. Vi har i dag egen versjon for “smarte telefoner” og kommer til å utvikle nye versjoner når nye plattformer lanseres. Dette for å gi bedre kontroll på presentasjon av innhold og opplevelsen leseren har ved å bruke tjenesten.
I det nye designet har vi helt gått bort fra gamle annonseformater, bortsett fra formatene med bredde 180px. Fullbreddeformatet 768×150 er erstattet med 990×150. Hovedspalteformatet 468×400 med 580×500 (590×500). Sekundærspalten vår er på 390px og åpner derfor muligheten for en ny bredde. Vi har foreløpig ingen annonser med denne bredden, men har spaltet den i to og har knapper med bredde 180px.
Vi blir mer enn gjerne med på en diskusjon rundt nye annonsestandarder.
Morten Mitchell Larød
VG Nett
Morten Larød Strålende, Morten! Takk for at du og dere kommer på banen her. Da har vi de fleste av de store representert i diskusjonen.
Stemmer det at 990px-formatet opprinnelig var 1000px (som var et pent rundt tall), men ble 990px ettersom det måtte være plass til “annonse”-markering ved siden av annonsen?
Det er litt tricky å finne de perfekte formatene, ettersom marg-håndteringen er ulik på de fleste siter. Noen er venstrejusterte, noen sentrerte, noen har ramme, andre har blanke felter, osv.
Men jeg har en plan om å tegne et reelt skisseforslag, så blir det lettere å mene noe om forslaget for oss alle.
Nei, formatet har alltid vært 990px, det samme som innholdsbredden. Padding og skygge rundt innholdet er kun staffasje og regnes ikke i totalen.
[...] som har reklameinntekter fra bannerannonser. Basert på tilbakemeldingene etter vår artikkel om at norske nettsider bør være 960px brede, og god sparring med Pål Nedregotten i A-Pressen, har vi et konkret forslag til nye [...]
Etter et vennlig spark i baken fra Hr. Nedregotten har jeg endelig fått satt sammen et forslag til nye annonsebredder, samt gjettet litt på -høyder.
Det har vært veldig moro å lansere disse tankene, for mottagelsen har vært enestående. Håper vi klarer å ta prosessen helt i mål.
http://labs.finn.no/forslag-til-nye-norske-bannerstr/
Kjør debatt!
[...] jeg så på FINN Labs likte jeg veldig godt. En “real” statestikk over brukerene’s bredde på [...]
[...] [...]
[...] [...]
I stedet for å bruke absolutte pixler så anbefales det generelt å bruke relative enheter, som prosent eller em (med min/max-width) for å definere størrelser.
Da får man et system som tilpasser seg bedre til størrelsen på skjermen. Spesielt mer og mer aktuelt siden man nå ser mer av skermer som varierer i DPI. 960px på en stor høy DPI skjerm blir veldig smått. Med relative enheter vil siden bli tilpasset vær individuell skjerm.
Mange takk for et svært interessant artikkel!
Har selv benyttet meg av 960 gv.
Viktig å ta hensyn til brukerne og deres skjermoppløsning.
[...] [...]