Websites en schermresoluties

• 5 juli 2010,
• al 1 reactie

Een website designen is er over de jaren niet makkelijker op geworden. Een van de redenen daartoe is de enorme evolutie die beeldschermen gemaakt hebben. Zo moeten we tegenwoordig rekening houden met verschillende schermbreedtes en -hoogtes. Anderzijds kunnen we daar natuurlijk ook creatief mee omgaan...

Schermresoluties

De resolutie van een computerscherm bepaalt hoeveel informatie het scherm kan weergeven. Meestal volgt de resolutie ook de grootte van het scherm (hoe groter, hoe hoger de resolutie), maar dat hoeft niet zo te zijn. Te meer omdat je de resolutie als computergebruiker zelf kan instellen!

De resolutie van een scherm wordt uitgedrukt in pixels, zowel horizontaal als verticaal. De meest bekende resolutie, en volgens recent Belgisch onderzoek (2009) nog steeds meest gebruikte, is 1024x768 pixels. Maar we hebben intussen al schermresoluties tot maximaal 2560x1600 pixels zien opduiken. Op deze laatste resolutie krijg je zomaar eventjes 5x zoveel informatie te zien als op die meest gebruikte.

Zoals vermeld heb je die schermresolutie als computergebruiker volledig zelf in de hand. Je kan het onderste uit de kan halen (de maximale schermresolutie gebruiken), of een andere waarde kiezen. Uiteraard moet je computer (grafische kaart) ook die maximale waarde ondersteunen, wat echter meestal geen probleem is.

Daarnaast heb je bij sommige schermen ook de mogelijkheid om ze te kantelen, zodat ze als het ware “rechtop staan”. Uiteraard heeft dit ook zijn invloed op de resolutie (horizontale waarde wordt verticaal, en omgekeerd).

Als laatste is het ook mogelijk om meerdere schermen samen te koppelen, waardoor je de verschillende resoluties zou kunnen samentellen. Zo heb ik op mijn eigen systeem 3000x1080 pixels beschikbaar: 1680x1050 + 1920x1080, naast elkaar opgesteld. In het verdere verhaal is dit echter niet relevant, omdat het niet interessant is een website over 2 schermen te spreiden.

De schermresolutie is een ding, maar de browsergrootte is dan nog een andere factor. Niet elke bezoeker heeft zijn scherm steeds gemaximaliseerd staan. Uiteraard zal de browsergrootte steeds kleiner zijn dan de schermresolutie, en zal deze ook bepalen wat juist weergegeven wordt van de website.

Webdesign en schermresoluties

Bij het ontwerpen van een website moeten we ervoor zorgen dat elke bezoeker een aangenaam ogende website krijgt, en dus moeten we uitgaan van de minst bedeelden, in dit geval van een schermresolutie van 1024x768. Concreet betekent dat dat we een ruimte van ongeveer 1000 pixels horizontaal op ongeveer 550 tot 600 pixels verticaal ter beschikking hebben waarin de eerste indruk gemaakt moet worden, en de belangrijkste informatie geplaatst. Binnen die ruimte creëren we dan een webdesign dat rustig, volledig en aansprekend is.

En grote resoluties dan?

Door de opkomst van grotere monitoren, maar veel meer nog door de opkomst van laptops in allerhande formaten zijn ook de schermresoluties toegenomen. Om voor deze bezoekers de website ook mooi te houden kiezen we er meestal voor om de eigenlijke website te centreren. De witruimte die daardoor langs beide zijden overblijft zorgt voor extra rust in het design, wat de kwaliteitsbeleving ten goede komt. Bij andere websites kiezen we er dan weer voor om met een grote achtergrondfiguur te werken, zodat meer van die afbeelding zichtbaar wordt naarmate het scherm groeit. Heb je een kleiner scherm, dan mis je niets, heb je een groter scherm, dan krijg je er dat toetje bovenop.

Experimenteren

Bij echt heel grote monitoren, en dan hebben we het over monitoren met een horizontale resolutie van 1440 pixels en meer (laten we zeggen: 17 inch-laptops en groter, of de betere 20 inch-schermen en groter) durven we al eens te gaan experimenteren met extra elementen. Zo hebben we in onze eigen administratietool Noudattaa een extra kolom ingevoegd van zodra de schermresolutie groter is dan 1400 pixels. Omdat deze website links uitgelijnd is (niet gecentreerd), komt op die manier een ruimte vrij van ongeveer 400 pixels (of ongeveer 40% extra), waarin we perfect een extra kolom kunnen invoegen.

Op de Aurealis-website hebben we ervoor gekozen de inhoud wel te centreren, maar op heel grote monitoren (1600 pixels horizontaal, of 60% meer) hebben we links en rechts extra elementen ingevoegd. Heb je dus een grote monitor, dan zie je links de website structuur, voor een snelle navigatie, en rechts de 2 laatste blogposts, voor dezelfde reden. Op deze manier experimenteren we om net dat ietsje meer uit een website te halen. Zij die investeerden in een grotere monitor hebben dus meer opties ter beschikking, zonder dat anderen daar last van ondervinden.

Conclusie

We hebben nog geen dergelijke experimenten geïmplementeerd op klantenwebsites, omdat dit tot nog toe niet relevant was, maar we zullen in elk geval niet aarzelen als dit voor de klant een meerwaarde levert.

Bij het creëren van onze designs gaan we waar mogelijk wel al uit van grote monitoren, en geven klanten dan ook een preview van hoe het er uit zal zien. Kwestie dat ze zich een duidelijk beeld, en een gefundeerde mening kunnen vormen.