Ik werk met een schermresolutie van 1280 x 1024 pixels. De websites die ik maak zien er prima uit op mijn scherm, maar dat is niet het geval voor surfers die een lagere resolutie gebruiken. Hoe kan ik ervoor zorgen dat mijn site er voor iedereen goed uitziet?


Ik werd met een schermresolutie van 1280 x 1024 pixels. Als webmaster van de plaatselijke judoclub heb ik een hele site ontworpen (met heel wat tabellen) en was erg tevreden met het resultaat… op mijn scherm althans. Surfers die met een lagere resolutie naar de site kijken, krijgen echter alles veel te groot op hun scherm gepresenteerd. Hoe kan ik er zonder al te veel bijkomend werk – en dus zonder een aparte site voor verschillende resoluties te moeten maken – toch voor zorgen dat die goed wordt weergegeven?

Joren Lemiegre

Wie webpagina’s ontwerpt, komt wel eens vaker voor onaangename verrassingen te staan zodra je de stek op een andere resolutie bekijkt – zeker als je gretig gebruik maakt van opmaaktabellen. Als zo’n optie in je webdesigner ontbreekt, kan het sharewaretooltje Browser Resolutions een handig hulpje zijn.

Hiermee kan je je webpagina’s namelijk snel in diverse schermresoluties bekijken in Internet Explorer (van 640 x 480 tot 1600 x1200, en ook in WebTV-formaat).

We kennen de broncode van je webpagina’s niet, maar we vermoeden dat je de tabelbreedte overwegend in absolute pixelgrootte hebt vastgelegd. Geef je een tabel bijvoorbeeld een breedte van 1.000 pixels mee, dan eist die tabel inderdaad zoveel ruimte op, ongeacht op welke resolutie je die bekijkt.

Het gevolg is dat gebruikers met een lage schermresolutie constant vertikaal of horizontaal in hun browser moeten scrollen. Je doet er daarom beter aan met relatieve waarden te werken in de (buitenste) tabellen.

In plaats van <TABLE WIDTH=”1000″> definieer je de tabelbreedte beter als bijvoorbeeld <TABLE WIDTH=’80%’>. Er zal wellicht weinig anders opzitten dan deze instellingen op al je webpagina’s aan te passen.

Met een goede tekstvervanger verloopt dit zoek-en-vervang-proces natuurlijk flink wat sneller. Zit zo’n functie niet in je web-editor ingebouwd, dan lost een tool als het gratis BK ReplaceEM dat wel voor je op.

Dit programma zorgt meteen ook voor een back-up, ingeval je per ongeluk verkeerde vervangingen doorvoert.
Het is ook een goed idee voortaan je webpagina’s zoveel mogelijk met behulp van css vorm te geven.

De belangrijkste stijlkenmerken kan je dan vastleggen in een extern bestand dat toegepast wordt op al je webpagina’s. Moet je nadien iets wijzigen, dan volstaat het dat ene css-bestand aan te passen. In Clickx 145 lees je wat meer over werken met css in Expression web.