Sidens bredde - undgå vandret scroll?

Hop længere ned på siden, til:

Siden er opdateret 23. 1. 2006

Mange nybegyndere - og erfaringsmæssigt er folk, der har arbejdet i den grafiske branche ofte de værste - sidder og måler ud og beregner, for at få klemt en masse ind på hjemmesiden.

Resultatet ser mægtig flot ud - i den skærmopløsning og browserstørrelse, som sidens designer har benyttet i udviklingsprocessen. Men når siden kommer ud på nettet og derefter bliver hentet hjem af en bruger med en anden skærmstørrelse/-opløsning og evt. browserstørrelse, ser det totalt kikset ud.

En ting er, at man i diverse statistikker kan læse, at så og så mange brugere har en skærm, der har så og så stor opløsning i pixels. Statistikken siger bare intet om, hvor stor brugerens browservindue er. Men erfaringsmæssigt kan man sige, at jo større skærmopløsning en bruger sidder med, jo mindre forholdsvis er hans browservindue. Ja, mange kører med et browservindue på ca. 800×600 px, selv om deres skærm tillader op til det dobbelte på begge leder.

Men hvordan undgår man disse problemer? Nemt: Lav siden fleksibel mht. bredden.


Sidens elementer

Hvis du f.eks. har en side opbygget som denne:

Sidens toptekst

Menupunkt 1

Menupunkt 2

Menupunkt 3

Sidens overskrift


sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst
Bundtekst - info til brugerne

... er der ikke nogen gyldig grund til at sætte en eksakt pixelbredde på mere end menuen i venstre side. Derudover kan der sættes en bredde = 100% (ikke noget med pixels her!) på topbar og footer. Lad resten af sidens indhold tilpasse sig automatisk til bredden på brugerens browservindue ved ikke at sætte en bredde på.


Eller du vil måske have en kolonne mere i højre side? Så kan den også tildeles en fast bredde. Men indholdsboksen i midten skal stadig være uden defineret bredde:

Sidens toptekst
Menupunkt 1
Menupunkt 2
Menupunkt 3
Sidens overskrift

sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst
Reklame 1
Reklame 2
Reklame 3
Bundtekst

Du har så stadig bevaret sidens fleksibilitet for brugerens ukendte browserbredde.


En tredje mulighed er, at du lægger hele siden - inklusive menuen - ind i en boks, som du så giver en samlet bredde på max. 750 px og centrerer denne boks i vinduet:

  Sidens toptekst  
Menupunkt 1
Menupunkt 2
Menupunkt 3
Sidens overskrift


sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst
Bundtekst

^ Tilbage til sidens top


Læsevenlig bredde

En ikke uvæsentlig ting at tage højde for, når man designer sin hjemmeside, er den linjelængde, man 'påtvinger' læserne.

Jeg vil ikke selv gøre mig klog, men det siges, at man ikke skal lave sin tekst længere end omkring 65-70 tegn. Ellers bliver det svært for læseren at finde tilbage fra slutningen på en linje til begyndelsen på den rigtige næste linje.

Dette gør sig for alvor gældende ved lange uafbrudte tekstblokke. Efter min mening kan man - hvis man med passende korte intervaller sætter en tom linje ind - tillade sig at have noget længere linjer.

Men stadig gælder det, at man skal lade linjelængden tilpasse sig automatisk til bredden på brugerens browser - altså ikke noget med at putte teksten ind i en boks, som man sætter en voldsomt stor bredde på!

^ Tilbage til sidens top


Billedstørrelser

Man ser også ofte, at sidens forfatter har lagt billeder ind på siden og har indsat omhyggeligt beregnet højde og bredde på billederne. Uden at overveje, at billederne er større end det viste i virkeligheden.

Ja, jeg har for nylig (august 04) været inde på en side, hvor der var nogle billeder vist i størrelsen 200×170 px. Men billederne var lagret i størrelsen 2000×1700 px eller 10 gange større på hver led. Billedfilerne var såledet 100 gange større end nødvendigt.

Ikke alene betød det længere uploadtid for sideejeren og unødigt forbrug af serverplads - det betød også en helt håbløs lang downloadtid for alle besøgende på siden.

Derfor kan jeg ikke tydeligt nok sige: Nedsæt billedstørrelserne i et grafikprogram til den størrelse, de skal vises i på hjemmesiden. Og vis ikke billeder, der er større end omkring 700 px minus sidens menubredde - er menuen f.eks. 150 px bred, bør ingen billeder i sidens indholdsdel være mere end ca. 550 px.

^ Tilbage til sidens top


Baggrundsbillede

Når man laver baggrundsbillede til sin hjemmeside, er der et par ting, man skal have i tankerne:

^ Tilbage til sidens top


Udskrift af en side

En andet problem, der kan opstå med sider, der er designet til at skulle være meget brede, er når man ønsker at udskrive siden på papir.

En side, der er lavet, så den automatisk tilpasser sig bredden på brugerens browservindue, vil også automatisk tilpasse sig papirbredden, når man ønsker at udskrive siden. Men hvis siden har en fast defineret stor bredde, vil man miste noget af sidebredden - det er ikke hele bredden, der udskrives.

Du kan selv lave et ganske simpelt forsøg: Lav en side og giv den en fast defineret stor bredde. Indlæs den i en browser - det er ligegyldigt, hvor stort browservinduet er. Klik nu i browserens menulinjes Filer og vælg derefter i menuen punktet Vis udskrift.

Du kan nu se, hvor meget af sidens bredde, der ikke kan være på papiret. Prøv så at fjerne den faste bredde på siden. Opdater siden i din browser (uden at ændre browservinduets størrelse) og bed den igen om at vise udskrift. Forskellen er tydelig - nu kommer hele siden med ud på papiret, linjelængderne er bare tilpasset pladsen på papiret.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen august 2004
Hjemmesideskolen
Du er her: Forsiden - layout - Sidens bredde - undgå vandret scroll?
Brugere lige nu: 1
Home Mail