meneer simmering

Menu Close

5 antwoorden over de breedte van je website

Als het gaat over de breedte van een website is het vaak lastig te bepalen hoe breed de website nu moet worden, wil hij goed gezien worden door alle gebruikers, dus ook op bijvoorbeeld een iphone, of een extra groot beeldscherm. Wat is nu de meest gebruikte resolutie en hoe zit het met vaste breedtes ten opzichten van variabele breedtes? 5 prangende vragen beantwoord.

1. Kunnen we 800×600 nu eindelijk negeren?

Ook al zijn er nog maar weinig gebruikers die een computer hebben met als schermresolutie 800×600, toch kun je dit formaat beter niet negeren. Er zijn mensen die wel een groot scherm hebben, maar toch hun browser kleiner openen. Hier heb je geen invloed op. Niet iedereen opent een scherm maximaal.

Daarnaast is er een groep die 800×600 gebruikt omdat ze slechtziend zijn en met een groot beeldscherm deze resolutie gebruiken en zodoende alles kunnen lezen.

Niet negeren dus 800×600 pixels.

Wat is het beste schermformaat om een website in te maken bij 800×600 en 1024×768?

Een optimaal formaat voor beide schermen is moeilijk aan te geven. Zo zul je rekening moeten houden met het feit dat er scrollbars in beeld kunnen komen en bijvoorbeeld randen. Hou toch wel rekening met een verlies van een 20 tot 50 pixels.

3. Wat is de meest voorkomende schermresolutie?

Volgens de meeste websites die bezoekersaantallen bijhouden is momenteel 1024×768 het meest gebruikte scherm, maar de grotere schermen zijn in opkomst. Daarnaast wordt het gebruik van kleine schermen van bijvoorbeeld mobiele telefoons en PDA’s ook steeds belangrijker.

Voor HTML-site geldt de volgende verdeling als het gaat over het afgelopen jaar.

schermresoluties html-site 2009

Daarbij valt op dat 1280×1024 de meest voorkomende resolutie is, daarbij moet je wel bedenken dat de meeste bezoekers iets doen met websites maken en vaak al wat duurdere computers gebruiken dan de gemiddelde Nederlander, denk ik dan toch…

4. Moet je verschillende resoluties verschillende stylesheets geven met JavaScript?

Er zijn verschillende JavaScripts gemaakt om ervoor te zorgen dat de verschillende beeldschermen aparte stijlbladen voorgeschoteld krijgen. Nadeel is dat JavaScript niet aan hoeft te staan op computers van bezoekers, een en ander kan matig tot slecht functioneren of soms helemaal niet werken omdat er een andere breedte gekozen is, maar het alternatief is veel eenvoudiger.

Met CSS kun je variabele breedtes meegeven, de zogenaamde ‘fluid layout’. Dit doe je met percentages in plaats van vaste breedtes in pixels.

JavaScript is sowieso geen optie voor ‘handhelds’. Veel mobieltjes ondersteunen dit niet. Daarvoor heb je het alternatieve stijlblad nodig. ‘media=”handheld”‘ bijvoorbeeld.

Vaste breedte tegenover variabele breedte, hoe zit dat?

Vaste breedte, of fixed layout wordt veel gebruikt als er een website gemaakt wordt die veel gebruik maakt van plaatjes. Bijvoorbeeld om een achtergrond exact te plaatsen. Voordeel is dat je vrij nauwkeurig zaken op hun plaats kunt zetten. Nadeel is dat je te maken hebt met veel verschillende groottes.

Hou je bijvoorbeeld rekening met 800×600, dan valt de website wel erg in het niet op een heel groot beeldscherm. Maak je de website te groot dan is deze weer niet goed zichtbaar voor gebruikers van kleine schermen.

Voorbeeldcode:

body { width: 760px;}

Bij websites met een variabele grootte, fluid layout, is de grootte afhankelijk van de browser. Deze wordt bepaald in percentages. De breedte wordt bijvoorbeeld op 50% gezet en de website zal in iedere browser de helft van het scherm innemen. Een nadeel kan zijn dat in grote schermen de regels bijvoorbeeld wel erg lang gaan worden, waardoor de layout ook wel eens uit zijn verband kan schieten.

Voordeel is natuurlijk de kleinere afhankelijkheid van de schermgrootte.

Voorbeeldcode:

body { width: 95%;}

Tip, max-width en min-height

Nog even een tip. Tegenwoordig kun je om dat hele uitgerekte scherm te voorkomen ook de maximale breedte instellen. Dit wordt in de oudere Internet Explorer browsers wat matig tot niet ondersteunt, maar hier zijn wat oplossingen voor, beschreven in het artikel CSS hacks voor verschillende browsers.

Als je dit een interessant artikel vond…

heb je vast ook interesse in mijn NIEUWSBRIEF!
Iedere week weer een nieuw ARTIKEL!