Sannheten om det gylne snitt, skjermbredde, og nettsidene dine

Her om dagen mottok vi følgende på telefon:

Tyskerne krever 945 piksler for at de skal kunne innarbeide det gylne snitt, men portugiserne står hardnakket på 925 og har allerede begynt å implementere… hva skal jeg gjøre? Hva er riktig?

Utsagnet oppsummerer kundens situasjon: Stor organisasjon med regionale aktører og egne meninger på kollisjonskurs med behovet for et enhetlig og konsistent design. Kunden har innsett at det sistnevnte gir både kommunikasjonsmessige og økonomiske gevinster, men får problemer i møte med tilsynelatende vilkårlig valgte tall som det plutselig er gått nasjonal prestisje i.

La oss passere nasjonal selvfølelse i stillhet: Hvordan velger du egentlig optimal bredde på en nettløsning? Svaret er, som med mye annet i livet, at det kommer an på. Heldigvis kommer det ikke an på så fryktelig mye, og vi skal se på det viktigste her.

Fast eller fleksibel

Høyde

Med unntak av statiske online-reklameplakater, microsites, kampanjer og en og annen webapplikasjon, har nettsider som oftest fleksibel høyde. Denne utformingen rommer mulighet for variable mengder av innhold i form av tekst, bilder og andre media, og forskjellig presentasjon av dette materialet avhengig av kontekst. Scroll-hjul på musen har gjort det helt naturlig å flytte siden oppover etterhvert som man skummer gjennom en artikkel eller skaffer seg oversikt i en portal – faktisk er det ofte langt mer irriterende å måtte “klikke for å gå til neste side” enn bare å la siden gli over skjermen. Personlig mener jeg at med unntak av ved svært store datamengder eller ved behov for å eksponere brukerne for stadig nye bannerannonser er sideskift uten et samtidig skifte av kontekst eller tema en uting på internett.

Bredde

Når det gjelder bredden har man i utgangspunktet 2 valg: Fast eller fleksibel bredde. Det er fordeler og ulemper ved begge disse. Ikke alt innhold egner seg til fri skalering i bredden, men dette får bli gjenstand for et annet blogginnlegg. Det er ihvertfall stadig diskusjon om hva som fungerer best i de enkelte tilfellene, og Dagbladet hadde nylig en artikkel vedr. nettavisens redesign til å bruke fullskjermbredde uansett skjermstørrelse. Men uansett hva du velger må du finne den optimale størrelsen eller minste-størrelsen for nettsiden din. Hva som er riktig størrelse kommer an på både tekniske og kommunikasjonsmessige forhold:

Sjekkliste for å finne optimal nettsidebredde

Denne listen starter med spørsmål som er almenngyldige for alle designprosesser og blir mer direkte relevant etterhvert. Kommunikasjonskanalen er i dette tilfellet er bestemt: Internett.

1. Hvem snakker du med?

God kommunikasjon avhenger i stor grad av kjennskap til hvem man snakker til eller med. Ha et klart bilde av hvem du forsøker å nå – hvem skal bruke nettsidene dine, hva skal de oppnå, hvilke forutsetninger har de, osv. Med en nettstrategi i ryggen kan du gjerne bruke  personas eller andre verktøy for å etablere gode, klare svar på dette.

2. Hvilken fysisk skjermbredde har de?

Det som ofte veier tyngst i å avgjøre nettsidenes bredde, er hvilke tekniske forutsetninger brukerne har for å se sidene – mao. hvilken skjermbredde og skjermhøyde de ser løsningen med. Dette er det mulig å svare mer eller mindre presist på:

1. Dersom nettsidene skal utgjøre et intranett i en stor organisasjon med en IT-avdeling med rutiner som får “Prosessen” av Kafka til å blekne er svaret ofte veldig enkelt og veldig presist: Alle har akkurat samme skjerm med akkurat samme oppløsning. Uansett. I slike tilfeller har alle forresten også samme nettleser – det gjør det i teorien lettere å utvikle spesialfunksjonalitet til intranettet – men ikke sålenge nettleseren heter Internet Explorer 5 – kom igjen folkens: Oppgrader!
2. Dersom nettsidene retter seg mot offentligheten må vi istedet gjøre antagelser basert på hva vi vet om brukerne. Vi kan undersøke forhold som f.eks. deres brukssituasjon (hjemme eller på jobben?), yrke (grafisk designer eller lokomotivfører?), interesser (ornitolog eller power-gamer?), og andre demografiske data for å si noe om nivået på deres typiske IT-investering.
3. Sist men ikke minst kan vi basere oss på eksisterende nettstatistikk for brukere av tjenester som har lignende profil som den man selv skal lage. Fordelingen av brukere på skjermoppløsninger i løpet av første halvdel av desember for 2 store norske internettjenester med svært bred publikumsappell var som følger (grunnlaget baserer seg på mellom 2 og 3,5 millioner unike treff, og oppløsninger med samme bredde er slått sammen til ett tall):
   

   Oversikt over skjermstørrelser for unike besøk på 2 store norske nettsteder 2 uker medio desember 2008

   Tallene viser at det er forskjell på hva folk benytter på jobb og hjemme, og viser også at det brede laget av befolkningen i alle situasjoner besitter et minimum på 1024 x 768 piksler.

3. Hva er den maksimale bredden?

Med en skjermbredde som er rimelig ifht. brukernes forutsetninger må vi finne ut hvilken bredde vi egentlig har til rådighet. Poenget er å ikke definere en så bred side at man får horisontal rullesjakt* når nettleservinduet er maksimert og har vertikal rullesjakt. Forskjellige operativsystem og nettlesere “spiser” litt forskjellig av den totale skjermbredden til å vise nettleservinduets kanter og den vertikale rullesjakten. Som en tommelfingerregel bruker vertikal rullesjakt 16 piksler i bredden. I tillegg bruker enkelte nettlesere opp til 8 piksler på hver side for å tegne kanten på nettleservinduet. Dermed går altså 8+8+16 = 32 piksler i utgangspunktet tapt i bredden. På en typisk skjermoppløsning på 1024 x 768 sitter vi da igjen med en maksimalbredde på 1024 – 32 = 992 piksler.

Hva da med brukere som har installert/aktivert tilleggsmenyer i nettleser/operativsystem som også tar opp verdifull plass i bredden? På Windows dreier dette seg  primært om en “sidebar” i Vista (som Google har laget et alternativ til). På Mac er det mulig å plassere Dock’en på høyre eller venstre side og sette den til å ikke automatisk skjules. Dette spiser verdifull skjermplass. Skal vi ta hensyn til brukere som gjør dette? Med forbehold om spesielle forhold ved nettsidenes funksjon vil jeg stort sett svare nei. En bruker som bevisst endrer oppsettet så det avviker fra standardoppsettet er klar over at dette er gjort, samtidig som slike brukere statistisk sett er del av et svært lite mindretall. Det er også rimelig å anta at slike brukere med stor sannsynlighet ikke sitter med den minste tilgjengelige skjermstørrelsen heller – og da er det uvesentlig om 30-40 piksler ekstra går tapt.

(*”Scroll-bar” heter faktisk “rullesjakt” på norsk. Som innvandret brite får jeg gåsehud av begreper som dette, men forsøker altså å holde språket norsk her. Uoffisielt forslag for “roll-over” er forresten “Overglidning”. Brrr.)

4. Bruksmessige hensyn

Hvordan nettsidene skal fungere, dvs. hva deres oppgave er ifht. brukeren samt hvilket etterlatt inntrykk brukeren skal sitte igjen med, er en minst like vesentlig faktor som fysisk og virtuell skjermbredde. I enkelte tilfeller dikterer hensynet til nettsidenes funksjon hvilken skjermstørrelse man skal optimalisere nettsidene for, fremfor at minste felles multiplum for skjermstørrelse skal gjelde slik at “alle” kan se sidene optimalt.

Big is always beautiful

Det er ingen absolutte regler for hva slags type side som bør ha stor eller liten plass. En portal eller nyhetsside “trenger” i utgangspunktet mer plass i bredden enn en blogg: Dette er sideoppsett som gjør aktiv bruk av flere spalter og seksjoner for på en visuell måte å prioritere store mengder informasjon. Likeledes vil en side som skal fungere som arbeidsflate – som et intranett dashboard eller en webapplikasjon – ofte nyte godt av større plass. Men selv en blogg eller en kampanjeside bruker stor skjermplass med fordel – innholdsområdet kan utformes smalt eller lite, men ekstra plass rundt innholdet skaper ro og fokus på budskapet.

Jeg kommer ikke på noen tilfeller der nettsider har en stor fordel av å være små (vi snakker nettelsere og skjermer, ikke wap og håndholdte devices nå). De tilfellene finnes nok, men i min verden blir dette i større grad en designmessig avveining – det er alltid gunstig å ha stor plass å boltre seg på, og hvis det innenfor rammen av tilgjengelig skjermbredde ikke er noe ved bruksegenskapene som tilsier at sidene bør ha liten bredde kan hele flaten gjerne gjøres tilgjengelig for formgivning – enten det endelige arbeidet oppfattes som avgrenset innenfor et rolig passepartout eller ikke.

5. Hvordan dele opp flaten?

Vi har funnet skjermstørrelsen vi ønsker å basere oss på og har trukket fra nok til å gi oss en sikker maksimumsbredde. Hvordan bestemmer vi om den endelige bredden optimalt skal være 992 eller f.eks. 945 (som i eksempelet med det gylne snitt) eller 925 piksler? Dette er et designspørsmål, og her kommer designerens beste venn – grid’et – inn i bildet.

Grid

Et grid er i all enkelhet et rutenett med en konstant avstand mellom alle vertikale og alle horisontale linjer. Poenget med grid er at man benytter det som et skjelett å bygge designet på – man sørger for at vesentlige visuelle elementer går kant i kant med linjene i grid’et. På denne måten oppår man ryddighet og stramhet i designet – det at forskjellige elementer flukter med hverandre på tvers av formatet skaper ro og klarhet. Et grid kan ha store eller små ruter – mindre ruter gir i utgangspunktet større fleksibilitet. Et grid er ikke en tvangstrøye: Grid’et kan brytes bevisst for å oppnå en ønsket effekt. Dette er grunnleggende designkunnskap, og Khoi Vinh og de fine folkene på A List Apart har laget artikkler som viser bruken av grid på en kjempebra måte.

Som du sikkert allerede har gjettet – størrelsen på rutenettet i gridet, kombinert med hensyn til hvor mange og brede spalter man ønsker i sideoppsettet, avgjør hva som er en hensiktsmessig pikselbredde for nettsiden. Noen eksempler belyser dette best:

Hvilket antall kolonner og hvilken bredde/høyde på hver grid-rute som er riktig for nettstedet eller de enkelte sidene i nettstedet er en vurderingsak i hvert tilfelle. Dette er et puslespill hvor man gjerne tar hensyn til:

• Hva og hvor mye skal med på en gitt nettside? (Informasjonsarkitektur)
• Er det forhåndsbestemte mediaelementer som skal fungere i grid’et (f.eks. video eller reklamebannere i standardstørrelser)?
• Hvilken gridstørrelse er formålstjenlig ifht. formspråket – er det lettere å sette opp sidene med mindre ruter eller større ruter?

Personlig liker jeg å jobbe med grid som baserer seg på tall som er lette å dele på hele antall piksler, f.eks. 32 som lar seg dele på 2, 4, 8 og 16, eller 24 som lar seg dele på 2, 3, 4, 6, 8 og 12. Når og hvis omstendighetene tilsier at grid’et skal brytes blir det på denne måten lett å gjøre det på en måte som harmonerer med grid’ets basistall.

Grid er forøvrig ikke bare til hjelp som et verktøy for design. Det finnes flere rammeverk i CSS som gir støtte for svært effektiv implementasjon av nettsider ved bruk av grid. Et godt eksempel er Blueprint CSS som lar deg definere et grid i tråd med det du har benyttet ved design av nettsidene, og som deretter genererer CSS som enkelt lar deg posisjonere elementene i forhold til dette grid’et.

Det gylne snitt

Vi har funnet optimal bredde for nettsiden vår, og definert et bra grid vi kan jobbe med. Men hva var egentlig det snakket om det gylne snitt i starten av innlegget?

Det gylne snitt er et forholdstall som har lang historie innen arkitektur, kunst, design og musikk. Mange menneskeskapte verker bærer i seg det gylne snitt, og tallet finnes også igjen i mange former i naturen. Det gylne snitt defineres ved at man deler en linje i en lang og en kort del, hvor forholdet mellom den lengste delen og den korteste delen er det samme som forholdet mellom hele linjen og den lengste delen av linjen. Wikipedia har en forklarende artikkel.

Jeg ble overrasket over referansen til det gylne snitt i kontekst av nettsidebredde. Det er tradisjonelt et begrep som hører mer til design for papirtrykk enn for piksler. Når det er sagt er det er ikke noe galt i å forsøke å innarbeide dette prinsippet, men det virker nokså tynt å skyve det foran seg som en forklaring på hvorfor man akkurat måtte bruke 945 piksler, særlig når man ikke kommer inn på hva 945 skal stå i forhold til. Det gylne snitt er et interessant forholdstall som kan gi vakre proporsjoner. Det er et virkemiddel som kan vurderes brukt på samme måte som andre virkemidler – ikke et slags komposisjonsmessig dogme som må etterkommes for enhver pris og uten spørsmål. Et godt grid vil stort sett gjøre mer for kvaliteten enn det å innarbeide det gylne snitt for ett eller flere forhold på nettsiden din.

Uten mulighet til selv å ta tak i formgivningen som var utført for kunden anbefalte vi på generelt grunnlag å benytte den største av de to skjermbreddene som det allerede var sunket tid og penger i å utvikle,  basert på prinsippene vi har vært innom her. I og med det tyske kontoret dermed har fått viljen sin får vi håpe at også det gylne snitt vil bidra til å heve det ferdige produktet.