De breedte van je Homepage scherm resolutie.

 
Klik voor uw scherm resolutie
 
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-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 50% van alle mensen op Internet een resolutie van 1024x768 of hoger.

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

Free text flow
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.

Over het algemeen is free text flow 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.

Fixed width
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. Kijk voor een voorbeeld maar eens hier en verander de grootte van het window maar eens.

In verband met de leesbaarheid (zoals bij free text flow omschreven) is fixed width duidelijk aan te raden. Maar welke breedte kies je dan? De meeste designers kiezen tegenwoordig voor een breedte die past bij de resolutie 800x600.

Dat betekent dat de breedte vast op zo'n 760 pixels wordt ingesteld (de windowranden en scrollbars moeten er immers ook nog bij). Bij deze maat is de tekst goed leesbaar op alle resoluties, behalve op 640x480. Op die resolutie moeten de bezoekers flink gaan scrollen om de tekst te kunnen lezen. Echter minder dan 9% van alle mensen op internet heeft een resolutie van 640x480. De meeste ontwerpers nemen dit dus op de koop toe.

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.

Conclusie
Er is geen optimale website die op alle resoluties ideaal functioneert. Ik adviseer om je ontwerp met een vaste breedte van 760 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.

Een onderzoek naar de meest gebruikte schermresolutie heeft uitgewezen dat de meeste gebruikers een resolutie hebben van 800 x 600 of hoger. Nog geen 9% maakt gebruik van een kleinere instelling. Daarom is het een goed idee om daar rekening mee te houden bij het ontwerpen van een webpagina. Als je dan een pagina maakt met jouw instellingen op 800 x 600 en de site is duidelijk zichtbaar, dan ben je zeker dat 91% van alle bezoekers jouw site goed kan bekijken.

Maar wat met die overige 9%? Hoe kunnen we die proberen over te halen om hun scherminstelligen aan te passen?

We kunnnen met een simpel stukje code de grootte van de schermresolutie van de bezoeker opvragen. Afhankelijk van de gebruikte resolutie kunnen we dan een gepaste boodschap tonen. Je zou de bezoeker die een resolutie gebruikt die lager is dan 800 x 600 kunnen uitleggen hoe hij of zij dit kan aanpassen.

Hier onder staat een script dat precies dit doet. Je moet het gewoon tussen de HEAD-tags van jouw pagina plaatsen. Je kan natuurlijk, als je dat wenst, een andere schermresolutie opgeven door bestwidth en bestheight aan te passen. Stel: in de toekomst wijzen de onzoeken uit dat 800x600 ook niet meer veel gebruikt wordt, dan kan je de variabelen gewoon aanpassen. De boodschap zelf kan je natuurlijk ook aanpassen.
 
de code:

<script language="JavaScript" type="text/javascript">
<!-- Begin
var bestwidth = 800;
var bestheight = 600;
if (screen.width < bestwidth || screen.height < bestheight)
{
alert("Deze site is het beste te bekijken als de beeldschemresolutie "
+ "is ingesteld op " + bestwidth + "x" + bestheight + " of groter.\n\n"
+ "De instelling die je gebruikt is " + screen.width + "x"
+ screen.height + ".\nDeze instelling is te veranderen door "
+ "met de rechter muisknop op het bureaublad van windows te klikken. "
+ "In het snelmenu kies je eigenschappen. In het scherm dat je nu te zien krijgt, "
+ "kies je het tabblad instellingen.\n\nVeel succes en kijkplezier.")
}
// End -->
</script>


einde code
Wanneer er een bezoeker op je site komt die een schermresolutie heeft die kleiner is dan 800 x 600 dan pikt het script dit op en wordt de volgende boodschap getoond:
Ik heb deze gegevens van de onderstaande adres en wilde deze ook met jullie delen.

Dit artikel komt uit het Web Succes Magazine,
copyright 2003 van Alphamega
http://www.websuccesmagazine.com