Webdesign og skærmopløsninger

- af Michael Oxkjær, Altero Design - 16. oktober 2005

 
I denne artikel vil jeg forsøge at synliggøre de ting, man skal være opmærksom på, når man laver webdesign. Forhåbentlig kan denne artikel være med til at kaste lys over, hvorfor hjemmesider ser ud, som de gør.
 

Ønsker til webdesign

I forbindelse med udvikling af webdesign får jeg ofte nogle ønsker, som bl.a. går på:
 

"Jeg vil gerne have, at man se min hjemmeside uden at skulle scrolle"

"Jeg vil gerne have mit navn 1 cm. fra bunden af skærmen"

"Alt min tekst skal være på en side"
 
Hver gang jeg får disse "ønsker" ender det i en til tider temmelig teknisk udredning om, hvorfor det ikke er muligt, når man taler webdesign.
 
Hvis vi alle sad med computerskærme på størrelse med en udslået søndagsberlinger, så var vi ude over alle de problemer, eller var vi?
 

En skærm er vel en skærm?

I takt med at computerskærme bliver billigere og billigere, ja så investerer man i nye fladskærme, som ikke fylder så meget på bordet. Nå ja, en 17" koster jo kun lidt mere end en 15", så man tager sådan én, eller man vælger måske en ny bærbar computer med en skærm i 16-9 eller widescreen, som det også hedder.
 
Når så man får dette ny vidunder sat til, så sker der noget besynderligt. Hjemmesiden ser nu pludselig helt mærkelig ud, eller rettere den fylder ikke så meget på skærmen.
 
Så kan man få plads til at have listen over sine foretrukne websider til at stå åben i venstre side, da det gør dem nemmere at komme til. Det er en typisk konsekvens ved en skærmopløsning på 1024 x 768 pixels og derover - det er smart, for det er jo ikke alle der bruger deres browser i fuld skærmstørrelse.
 

Hvad betyder ordet "skærmopløsning"?

Billedet på en computerskærm består af en masse små kvadrater, og hvert af disse kvadrater kaldes en pixel. Man kan indstille sin skærm til at vise et bestemt antal af disse pixels, og det antal man vælger, betegner man som skærmopløsning.
 

Skærmopløsninger ligger typisk i følgende intervaller:

640 x 480, 800 x 600, 1024 x 768, 1280 x 1024, 1600 x 1280, osv. - dertil kommer så skærme i widescreen format, som har nogle andre intervaller.
 
Det første tal angiver, hvor mange pixels der er i bredden, og det sidste tal angiver, hvor mange pixels der er i højden.
 

Hvorfor 800 x 600?

Når man laver en hjemmeside, så er der især to faktorer, vi ikke er herre over.
  • Vi kender ikke den enkelte brugers skærmopløsning
  • Vi ved ikke om brugeren benytter sin browser i fuld skærmstørrelse

 

Selvom vi ikke har indflydelse på disse to faktorer, er vi stadigvæk nød til at tage forbehold for dem, og det er netop det, der gør at man ikke altid kan få det, som man gerne vil have det.
 
Mht. brugerens skærmopløsning, så er vi nød til at forholde os til nogle generelle statistikker, som må danne grundlag for vores valg.
 
Statistikken siger d.d., at ca. 23% af besøgende på hjemmesider benytter en skærmopløsning på 800 x 600 pixels. De samme statistikker siger også, at under 1 % bruger en mindre opløsning, så dem vælger vi at se bort fra.
 
Vi kan dog ikke se bort fra de 23 %, der benytter 800 x 600 pixels. Derfor er vi nød til at lave hjemmesiderne, så også de har mulighed for at se hjemmesiden uden af skulle scrolle horisontalt, altså fra side til side, for det kan få enhver til at forlade siden igen.
 

Netop derfor låser vi oftest vores webdesign, så de kan være på en skærm der er 800 pixels i bredden. Ved at låse designet i denne størrelse kan vi være sikre på, at indholdet står ens hos alle brugere uanset opløsning - i hvert fald i bredden.

De brugere der benytter en højere skærmopløsning vil blot få noget spildplads uden for designet, og det er der ikke noget at gøre ved. Denne spildplads kan man så fylde op med en farve eller et mønster, så det indrammer selve hjemmesiden.
 

Så er der det med scroll

I ovenstående afsnit fik vi styr på bredden, de 800 pixels, og nu skal vi så have styr på højden - altså de 600 pixels.
 
Her støder vi igen ind i nogle faktorer, som vi ikke er herre over. Vi ved ikke, om brugeren har lavet ekstra menuer i sin browser, om brugeren altid har sin proceslinie i bunden af skærmen øverst osv.
 
Derfor har vi absolut ingen indflydelse på, hvor meget af siden brugeren kan se i højden - absolut ingen!
 
Derfor kan man ikke placere ting - f.eks. 100 pixels fra bunden af skærmbilledet, man kan gøre det fra bunden af hjemmesiden eller fra toppen af hjemmesiden, men ikke fra bunden af skærmbilledet.
 
Dette skyldes netop den tidligere omtalte faktor - skærmopløsningen.
 
Man kan ikke, som i tilfældet med bredden, låse højden, og det er her, den famøse scroll kommer ind i billedet.
 
Lad mig sige det med det samme, vertikale scrollbars kan ikke undgås, hvis man blot har mere end 10 liniers tekst på sin side!
 
Jeg vil anslå, at mere end 95 % af alle computerejere efterhånden er indehaver af en mus der er udstyret med et lille hjul - placeret mellem de to knapper til at klikke med.
 
Dette lille hjul har den smarte funktion, at man kan rulle med skærmbilledet uden at skulle over og trække i scrollbaren.
 

Hvorfor har man mon lavet sådan et smart hjul?

Svar: Fordi scroll ikke kan undgås!
 
På en bærbar computer er der typisk lavet en tilsvarende anordning i form af en lille "plade", hvor man blot trækker fingeren hen over.
 
Derfor - glem den vertikale scrollbar, brugeren skal nok rulle ned af skærmen, hvis indholdet er interessant nok.
 

Hvad så med fuld skærm?

Man kan naturligvis sagtens designe en hjemmeside til at fylde hele skærmen uanset skærmopløsning. På den måde har man dog slet ingen kontrol med, hvordan tingene står på siden - heller ikke i bredden. Prøv blot at finde en side i fuld bredde og prøv så at trække browseren ned i størrelse. Indholdet vil så rykke ned på næste linie, indtil der ikke er plads til mere, og så vil den uheldige horisontale scrollbar dukke op.
 

Eksempler

For at illustrere hvilken forskel der er i de forskellige skærmopløsninger, har jeg herunder indsat eksempler på, hvordan denne hjemmeside ser ud i 3 forskellige opløsninger. Som du kan se, så står indholdet ens i bredden på alle billederne, men jo større opløsning - jo mere indhold i højden.
 
Du kan klikke på de enkelte billeder for at se dem i originalstørrelse. Eksemplerne åbner i et nye browservindue.
 
800 x 600
800 x 600
1024 x 768
1024x768
1280 x 1024
1280x1024

Næste skridt

Jeg vil tro, at i løbet af 1-1½ år, så er antallet af brugere med en skærmopløsning på 800 x 600 pixels faldet til under 1 %, og så kan vi begynde at få lidt mere plads til vores hjemmesider - eller kan vi?