Vroeger, in de goeie ouwe tijd van beeldbuizen en websites met frames, werd er het meest gewerkt op schermen met een resolutie van 800x600 pixels. Websites werden toen uiteraard voor die kleine schermresoluties geoptimaliseerd. Schermen werden groter, de eerste flat-screens kwamen op de markt welke een grotere resolutie van 1024x768 pixels introduceerden. Al snel werd dit 'de standaard' schermresolutie waarvoor websites vandaag de dag meestal nog steeds worden geoptimaliseerd. En dat is nodig als we (hier) even de huidige statistieken bekijken.

Momenteel zijn er flaptops en desktops, al dan niet breedbeeld schermen, in alle formaten op de markt en stijgt de resolutie van deze schermen zienderogen. Maaaaaar, er is altijd een maar, langs de andere kant is er ook een stijging in het aantal kleinere schermresoluties waar te nemen! Het zal u niet ontgaan zijn, meer en meer mensen gaan mobiel op het internet (smartphones, ipad enz)!

Dat maakt het er voor ons webdesingers niet makkelijker op... rekening houden met al die verschillende schermresoluties.

Tegenwoordig worden er van sommige websites 2 versies gemaakt. Eén 'computerversie' en één 'mobiele versie'

In functie van het optimaliseren van onze websites voor verschillende schermresoluties heb ik een 'nieuw' flexibel grid-systeem getest met een klein nevenprojectje. Ergens op het interweb gevonden dankzij een tip van @bramloquet.

A 1140px wide, 12 column grid. Fluid all the way down to a mobile version.

Door met deze grid te werken wordt een website geoptimaliseerd voor een schermbreedte van 1280px. Jawel, groter dan de huidige standaard! Mensen met een kleinere schermresolutie worden niet in de steek gelaten want bij een kleiner scherm wordt de website automatisch geschaald naar de juiste breedte. En dit tot en met de kleine schermresoluties van een mobiel toestel. En nee hoor de website word niet in zijn geheel verkleind. Vanaf een bepaalde breedte komen de vershillende kolommen netjes onder elkaar te staan, zodat alles leesbaar en 'bruikbaar' blijft.

Op deze manier kan je websites gecontroleerd gaan optimaliseren voor verschillende schermresoluties.

Enkele opmerkingen na mijn test;

• Zeer belangrijk is dat reeds bij het ontwerp en het opzetten van de website er rekening wordt gehouden met de verschillende resoluties.Tijdens het html+css'en is er ook wat extra werk, want je moet extra css voorzien voor de verschillende resoluties (maar geen volledige 2^e website)
• Opletten met images voor het opzetten van de layout! Je maakt best gebruik van zoveel mogelijk css en zo weinig mogelijk images de kracht van CSS3 zal hier in de toekomst zeker niet te verwaarlozen zijn.
• Uitgebreid testen ;) Trial and Error!

Momenteel werk ik bij het html+css'en op een aangepast framework gebaseerd op het allombekende blueprint grid systeem. Binnenkort zal dit waarschijnlijk vervangen worden door een nieuw framework met integratie van deze grid. Een beetje aangepast en gepimpd uiteraard ;).

Ik ben alvast van plan om hier verder mee te experimenteren. Hebben jullie hier bedenkingen of opmerkingen over laat het me zeker weten en laat hieronder uw reactie achter!

Een 'kleine' bedenking nog; Wat met nog grotere schermresoluties? Moeten we deze ook bedienen, kan dat nog even wachten of evolueren we snel naar volledig flexibele websites?