Nyeste it-job

Flere it-job

Skalerbart webdesign

af Jonas Astrup, HTML.dk
Sidst opdateret 20. november 2001

Mange websteder designes med en fastlåst bredde - men er det altid smart? I denne artikel gennemgås hvordan man istedet for at låse et design kan gøre det skalerbart i forhold til størrelsen på brugerens browservindue.

Hvorfor skalerbart webdesign?

Umiddelbart kan det virke logisk at designe et websted med låste angivelser af bredde og højde, så ved man jo nøjagtigt hvordan det kommer til at se ud hos brugeren, eller gør man?

Et udbredt eksempel er sites hvor bredden er låst, så layoutet passer til en given skærmopløsning - ofte 800*600 pixels. Hvis webstedet ses med en lavere skærmopløsning vil det resultere i en horisontal scrollbar.

HTML.dk gennemførte tilbage i maj 2001 en stor undersøgelse af 10.000 brugeres skærmopløsning og browserstørrelse. Undersøgelsen viste en stor spredning i brugernes skærmopløsning og browserstørrelse. Det vil sige at myten om at brugerne som minimum har hvad der svarer til et maksimeret browservindue i 800x600 pixels skærmopløsning ikke holder.

Brugerne indstiller deres browservinduer i mange forskellige størrelser, og et godt webdesign bør tilpasse sig brugerens indstillinger - ikke omvendt!

Absolutte og relative enheder

Det afgørende for om et webdesign er skalerbart eller ej, er hvilke enheder der anvendes til at specificere bredde (eller højde). Man skelner mellem absolutte enheder (låst design), og relative enheder (skalerbart design). For at forstå forskellen mellem de to typer enheder er det nødvendigt med en mere grundig gennemgang.

Som udgangspunkt er websider skalerbare. Det vil sige at f.eks. et tekstafsnit markeret med <p> automatisk tilpasser sig bredden i browservinduet.

<p>
Denne tekst tilpasser sig automatisk bredden på 
browservinduet - Denne tekst tilpasser sig automatisk 
bredden på browservinduet - Denne tekst tilpasser sig 
automatisk bredden på browservinduet
</p>

Situationen ændrer sig imidlertid hvis man fastsætter bredden af <p>-elementet med absolutte enheder. Lad os kigge på et eksempel hvor vi benytter Cascading Style Sheets (CSS) til at definere bredden i pixels:

<p style="width:250px">
Denne tekst tilpasser sig ikke automatisk bredden på 
browservinduet, men vil atid være 250px bred. Denne tekst tilpasser
sig ikke automatisk bredden på browservinduet, men vil atid være 
250px bred. Denne tekst tilpasser sig ikke automatisk bredden på 
browservinduet, men vil atid være 250px bred.
</p>

Hvis du ikke er bekendt med Cascading Style Sheets, kan du med fordel læse vores CSS tutorial for at forstå hvordan vi definerede bredden i eksemplet.

Vi har altså nu set hvordan vi med en absolut enhed (f.eks. pixels) kan fastlåse bredden af et webdesign. Men hvad så med de relative enheder? Lad os kigge på endnu et eksempel:

<p style="width:50%">
Denne tekst tilpasser sig automatisk halvdelen af bredden på 
browservinduet. Denne tekst tilpasser sig automatisk 
halvdelen af bredden på browservinduet. Denne tekst tilpasser
sig automatisk halvdelen af bredden på browservinduet. 
Denne tekst tilpasser sig automatisk halvdelen af bredden på 
browservinduet
</p>

Forskellen på at benytte pixels eller procenter som enhed er altså at fordi pixels er en absolut enhed fastlåses designet, mens procenter er relative i forhold til browservinduet.

Sådan gør du

For at lave dit eget websted skalerbart må du sørge for at der benyttes relative enheder de steder hvor bredden på forskellige elementer defineres. Så simpelt er det!

Hvis du sidder og kigger dine koder igennem, så husk at bredden kan defineres på mange forskellige måder - her er nogle eksempler: