Hoe breed moet een website zijn?

Een vraag die ik tijdens mijn trainingen vaak krijg van webdesigners is “Hoe groot moet een website zijn?” en dan bedoelen ze vooral de breedte van de site. De meesten weten ondertussen wel dat niet de webdesigner maar de bezoeker zélf bepaalt met welke grootte hij een website wil bekijken.

Je weet dus nooit precies welke schermresolutie een bezoeker gebruikt. En ook worden beeldschermen in de loop van de jaren steeds groter. Er zijn momenteel al schermresoluties van 1920 x 1200 pixels. Maar een schermgrootte van 1024 x 768 is nog steeds gebruikelijk. Daarnaast komen 1280 x 1024 en 1280 x 800 veel voor.De laatste is de schermresolutie van de meeste breedbeeldlaptops. Dus hoewel beeldschermen steeds groter worden, wil dat niet zeggen dat een website ook steeds groter moet worden. Want niet elke bezoeker heeft zijn browser fullscreen ingesteld. En je hoeft ook niet het hele beeldscherm te vullen. Lege ruimte brengt juist rust in een webpagina.

In de vorige editie van mijn boek Webdesign van concept tot realisatie uit 2006 zei ik nog dat je moest uitgaan van een minimale resolutie van 800 x 600 pixels. Maar daar hoef je nu geen rekening meer mee te houden. Een beeldscherm van 800 x 600 pixels komt nauwelijks nog voor. Een resolutie van 1024 x 768 is een prima uitgangspunt voor een website.

Wel moet je er voor zorgen dat een website geschikt is voor meerdere schermgroottes. Je kunt hierbij kiezen voor een vaste breedte of een variabele breedte, afhankelijk van de schermgrootte.

Website met vaste breedte

Bij een vaste breedte heeft een website altijd dezelfde breedte. Als je uitgaat van een minimale schermresolutie van 1024 x 768, dan maak je de website bijvoorbeeld 980 pixels breed. Maak een website in ieder geval nooit 1024 pixels breed, want de scrollbar neemt ook ruimte in. Bij een breedte van 980 pixels ziet de bezoeker met een resolutie van 1024 x 768 pixels nog net een randje van de achtergrond (zie figuur 1). Als je wilt dat de bezoeker meer ziet van de achtergrond dan kun je de website natuurlijk smaller maken dan 980 pixels. Er zijn bijvoorbeeld bureaus die altijd uitgaan van een breedte van 960 pixels of een breedte van 900 pixels.

Figuur 1 Website met vaste breedte bij een resolutie van 1024 x 768 pixels

Dezelfde website op een 1280 x 800 scherm zie je in figuren 2 en 3. In figuur 2 is de website links uitgelijnd en in figuur 3 is de website gecentreerd. Bij grotere schermresoluties blijft de site of links uitgelijnd of gecentreerd en wordt alleen maar meer van de achtergrond zichtbaar. Het grote voordeel hiervan is dat je weet hoe de bezoeker de website ziet. De bezoeker krijgt bijvoorbeeld niet onverwacht veel bredere tekstregels te zien wat bij een schaalbare website wel het geval kan zijn.

Figuur 2 Website met vaste breedte bij een resolutie van 1280 x 800 pixels, links uitgelijnd

Figuur 3 Website met vaste breedte bij een resolutie van 1280 x 800 pixels, gecentreerd

Schaalbare website

Een schaalbare website heeft geen vaste breedte en schaalt mee met de grootte van het browservenster (zie figuren 4 en 5). Dit wordt ook wel liquid design genoemd. Zowel met kleinere als bij grotere schermresoluties neemt de website de volledige breedte van de browser in. Dit kan een voordeel zijn omdat er dan meer inhoud van de website in een keer te zien is. Maar een groot nadeel is dat tekstregels veel te breed kunnen worden (zie figuur 5) en dat leest niet prettig.

Als een schaalbare website gewenst is, is het dus zaak hier rekening mee te houden. Een oplossing kan zijn om de website in meerdere kolommen te verdelen zodat blokken tekst in ieder geval nooit te breed worden.

Een paar jaar geleden was een liquid design nog erg populair, maar tegenwoordig zien we eigenlijk dat bijna alle websites een vaste breedte hebben, gebaseerd op een resolutie van 1024 x 768 pixels (met dus een breedte van 900-980 pixels).

Figuur 4 Website met variabele breedte bij een resolutie van 1024 x 768 pixels

Figuur 5 Website met variabele breedte bij een resolutie van 1280 x 800 pixels