De breedte van de site op verschillende resoluties

Er zijn allerlei verschillende soorten schermresoluties die mensen gebruiken. Schermresolutie staat voor de hoeveelheid pixels (puntjes) die er in de hoogte en breedte op het scherm staan. Vaak is de resolutie gekoppeld aan de grootte van de monitor. Mensen met een 14- of 17-inch monitor hebben meestal een resolutie van 640x480 of 800x600, terwijl mensen met een 19 inch monitor 1024x768 of 1280x1024 gebruiken. Overigens heeft meer dan 75% van alle mensen op internet een resolutie van 1024x768 of hoger. Met de huidige monitors tot zelfs 25 inch is de resolutie nog vele malen groter.

Hoe maak je nou een website die op alle resoluties toch goed overkomt? Er zijn in principe twee hoofdkeuzes: vrije tekst breedte (free text flow) en vaste breedte (fixed width).

Vrije tekst breedte

Dit wil zeggen dat de tekst van je pagina zich automatisch aanpast aan de breedte van het browser window. Als je het window vergroot of verkleint dan schuift de tekst helemaal mee. Kijk voor een voorbeeld maar eens hier en verander de grootte van het window maar eens door de rechterkant met de muis vast te pakken en naar links te schuiven (deblokkeer eventueel eerst de maximale grootte van je browser door rechts boven op het middelste icoontje te klikken).

Over het algemeen is vrije tekst breedt af te raden. Uit onderzoek is namelijk gebleken dat tekst moeilijk leesbaar wordt als de regels breder zijn dan zo’n 15 centimeter. Vandaar het formaat van pocketboeken. Op de meeste resoluties zal je pagina veel breder worden dan 15 cm, tenzij het window een stuk smaller gemaakt wordt dan het scherm. De tekst wordt dus een stuk minder leesbaar en dus zullen bezoekers eerder afhaken.

Vaste breedte

Dat wil zeggen dat je het ontwerp een vaste breedte meegeeft, ongeacht de schermresolutie van de bezoekers. Als je het window dan vergroot of verkleint blijft de tekst toch precies even breed. Een voorbeeld is deze website; verander de grootte van het window maar eens zoals hierboven beschreven.

In verband met de leesbaarheid (zoals bij vrije tekst breedte omschreven) is vaste breedte duidelijk aan te raden. Van belang hierbij is de breedte van de primaire inhoud van de website (dus exclusief de kolommen voor menu’s en andere informatie). Een lange regel is moeilijker leesbaar omdat bij het einde van de regel het begin van de volgende regel moet worden gevonden. Hoe breder de tekstregel is hoe moeilijker het begin van de volgende regel te vinden.

Maar welke breedte kies je dan? De meeste designers kiezen tegenwoordig voor een breedte die past bij de resolutie 1024x768. Dat betekent dat de breedte vast op ongeveer 985 pixels wordt ingesteld (de vensterranden en schuifbalken moeten er immers ook nog bij). Bij deze maat is de tekst goed leesbaar op alle resoluties, behalve op kleinere schermbreedtes zoals 640x480 en 800x600. Op die schermbreedte moeten de bezoekers flink gaan scrollen om de tekst te kunnen lezen. De meeste ontwerpers nemen dit op de koop toe omdat het aantal bezoekers met deze schermbreedte op een computer klein is.

Bij grotere resoluties ontstaan langs het ontwerp lege ruimte vanwege de vaste breedte. Deze lege ruimte is natuurlijk een beetje storend, maar weegt niet op tegen de leesbaarheid.

Mobiele apparaten

Mobiele apparaten, als groep, hebben zeer uiteenlopende schermgroottes, vanaf 480 pixels breed. Met name telefoons hebben een beperkte breedte. Verwacht je dat je doelgroep vaak via een apparaat met beperkte schermbreedte zullen werken, dan moet hierin bij het ontwerp rekening worden gehouden. Met de huidige css3 standaard is het mogelijk via css hierop in te spelen, bijvoorbeeld door met een variabel aantal kolommen te werken.

Mobiele apparaten zullen, naar verwachting, vaak een gewone computer gaan vervangen. Maar dat zullen dan overwegend tablets zijn die „normale schermbreedtes” aankunnen en niet de telefoons met beperkte schermbreedte.

Conclusie

Er is geen website die op alle resoluties optimaal functioneert. De css3 standaard kan hierin verandering brengen.

Voor sites die voornamelijk op desktops en laptops worden bezocht adviseer ik om je ontwerp met een vaste breedte van 985 pixels te maken en de daarbij behorende nadelen op de koop toe te nemen. De meeste ontwerpers en vrijwel alle grote websites kiezen voor deze oplossing.