Dit artikels is verouderd. Nieuwe cijfers over schermresoluties(september 2009) vindt u op:
http://usability-blog.be/schermresolutie-cijfers-2009/  

Het fenomeen 
Veel webmasters geloven echter niet dat ze via één en dezelfde HTML-code bezoekers met allerlei soorten resoluties en venstergroottes optimaal kunnen bedienen. Vandaar dat het merendeel van de sites in een resolutie hoger dan 800 op 600 slechts een deel van het scherm gebruiken, zoals bijvoorbeeld De Standaard. Sommige sites proberen al die lege ruimte te verdoezelen door er een grafisch element te plaatsen of de hoofding uit te rekken, zoals Tijdnet dat doet. Ook het volledig uitsmeren van de tekst is geen goede oplossing: immers, hoe breder de tekst hoe minder snel die gelezen kan worden.

De oplossing: een drieluik 
Het principe. Een steeds meer gebruikte oplossing om een flexibele webpagina te bekomen, is door zowel links als rechts een balk met een vaste breedte te voorzien met daartussen een flexibel contentgedeelte. Bij deze ontwerpen wordt de linkerbalk vaak gebruikt voor de navigatie en de rechterbalk voor een zoekfunctie en/of interne reclame, zoals op Wanadoo. Het middengedeelte zelf wordt in vele gevallen opgesplitst in twee kolommen om zo te brede teksten te vermijden. Mits wat inventiviteit en creatief gebruik van beperkt grafische elementen kan dit laatste probleem echter verholpen worden. Op die manier kan je voor de nodige afwisseling zorgen, zoals bijvoorbeeld UptoMusic doet bij de cd-besprekingen.

De hoofdtabel. Om een optimaal resultaat te bekomen begint u met één grote tabel waarbij de attributen border, cellspacing en cellpadding gelijk zijn aan 0. Als u wil dat uw site langs alle zijden van het scherm omgeven wordt door enige witruimte dan laat u de body-tag van uw pagina ongemoeid en stelt u de breedte van deze tabel in op 100%. Indien u geen voorstander bent van wituimtes raden we aan de body-tag te voorzien van volgende attributen: leftmargin="0" topmargin="0" marginwidth="0" marginheight="0". Vervolgens kan u de breedte van de tabel instellen op 100% als u wenst dat uw pagina tegen de randen van de browser plakt (Wanadoo) of op bijvoorbeeld 98% wanneer u ze wat meer ruimte wil geven (UptoMusic). Vergeet in dit laatste geval niet de gehele tabel te centreren op de pagina via <div align="center"><center>tabelcode</center></div align="center">.

De ruwe indeling. Binnen deze tabel plaats u een nieuwe tabel die 100% breed is en waarbij border, cellspacing en cellpadding alweer 0 zijn. Deze tabel deelt u vervolgens in in drie kolommen, waarbij de eerste en laatste kolom een vaste breedte meegeeft. De precieze breedte is uiteraard afhankelijk van bijvoorbeeld de lengte van uw navigatietermen of de grootte van uw buttons, maar we raden alvast een waarde tussen 100 en 150 aan. Omdat het menselijk oog houdt van symmetrie maakt u linker- en rechterkolom trouwens best even breed. Tenslotte mag u niet vergeten deze drie kolommen verticaal bovenaan uit te lijnen (valign="top").

De invulling
Linker- en rechterkolom kan u het best voorzien van de nodige gegevens via een include opdracht. Op die manier kan u immers de volledige navigatie van uw site via slechts één enkel bestand aansturen. Hoe u het middendeel precies wenst in te vullen hangt uiteraard volledig af van uw wensen. Wij raden alleszins aan ook hier meteen een tabel te gebruiken waarbij cellpadding en cellspacing op bijvoorbeeld 2 gezet worden. Op die manier verhindert u immers dat de tekst tegen de randen van de tabel gaat plakken. Om breed uitgelopen teksten te vermijden, kan u deze tabel best indelen in twee kolommen (zoals op de homepage van UptoMusic).

Omlijnen
Als u zoals UptoMusic de randen van uw navigatie, contentgedeelte en rechterkolom extra wil omlijnen kan dit door uw hoofdtabel een achtergrondkleur te geven (in dit geval zwart) en de cellspacing en cellpadding van de tweede tabel een waarde mee te geven (in dit geval 2).

Header en footer 
In veel gevallen zal u bovenaan en onderaan de pagina een zone willen plaatsen die afwijkt van het hierboven beschreven drieluik. Dit doet u eenvoudigweg door boven en onder de hoofdtabel (al dan niet via een include opdracht) telkens een nieuwe tabel te plaatsen met dezelfde breedte en attributen als onze hoofdtabel. Op die manier wordt deze tabel immers op dezelfde manier uitgelijnd en kan u de zone zelf toch zonder enig probleem anders invullen. Dit is zowel het geval bij UptoMusic als Wanadoo.

Els Aerts & Karl Gilis