Hogere Resoluties op het Web

In een reactie op mijn bericht over de Slideshare Egowidget gaf Willem Karssenberg aan dat hij vond dat ik bij het weblog onvoldoende rekening hield met de ruimte die ‘de tegenwoordige breedbeeldschermen’ ter beschikking hadden.
Nou was ik in de veronderstelling dat ik een tijd geleden al de layout daar op aangepast had, maar het opstarten van een niet eens zo nieuwe breedbeeld laptop maakte al snel duidelijk dat er relatief veel ruimte links en rechts over blijft als je meer dan 1024×768 aan resolutie hebt. Dat is de resolutie waar de layout op geoptimaliseerd is. Bij een resolutie van 800×600 zie je dan alleen de linker twee kolommen.

Los van het feit dat ik me even niet kon herinneren waarom het niet (meer) aangepast was, stond ik natuurlijk voor de vraag of één enkele reactie in het forum voldoende reden was om de layout aan te passen.

(zo’n cliffhanger moet genoeg reden zijn om de rest ook te willen lezen!) De gebruikte drie kolommen indeling heeft een belangrijk nadeel als het gaat om flexibiliteit voor verschillende resoluties. Zo kan ik het ontwerp zo instellen dat de middelste kolom, de belangrijkste van de drie, automatisch de resterende breedte van het scherm vult. Dat betekent dat je bij een breedbeeldscherm meer info op je beeldscherm krijgt.

Het nadeel van die indeling is dat als je het browser venster niet op maximaal hebt staan, de middelste kolom weer heel smal kan worden. Terwijl ik in dat geval liever heb dat de rechterkolom buiten beeld verschuift.
En dat was ook de reden waarom de aanpassingen die ik ook deze keer doorvoerde het ook de vorige keer niet gered hebben. Toen heb ik er geen blogpost over gemaakt, ik doe het nu om het niet nog een derde keer te moeten herontdekken.

Waarom is mij dit nou niet eerder opgevallen. Nou, omdat ik niet of nauwelijks met breedbeeldschermen werk. Mijn werklaptop, de tabletPC van Fontys, ook mijn eigen 901 EEEPC, allemaal gebruiken ze 1024×768 als resolutie. En de enige breedbeeldlaptop die we in huis hebben is er eentje waar ik alleen achter zit als er software op geïnstalleerd moet worden.
Toch blijkt Willem zeker niet de enige te zijn met een hogere resolutie.
Sterker nog, slechts 35,85% van de bezoekers gebruikt 1024×768 als resolutie en maar 2,85% heeft 800×600. Daar staat, gemeten over heel 2008 tot nu toe, tegenover dat de groep met resoluties hoger dan dat (1280×1024, 1280×800, 1680×1050, 1600×1420, 1440×900, 1152×864, …) samen optellen tot meer dan 54% van de bezoekers. Ruimschoots meer dan de helft dus.

Ik heb geen generieke oplossing kunnen vinden die alleen op basis van stylesheets werkt.
De oplossing die ik nu geïmplementeerd heb is een stukje Javascript:

<script type=”text/javascript”>
if(screen.width>1024) {
document.write(‘<style type=”text/css”>’);
document.write(‘.container {‘);
document.write(‘ width: 1200px;’);
document.write(‘}’);
document.write(‘</style>’);
}
</script>

Hiermee wordt bij een gerapporteerde resolutie van meer dan 1024 pixels in de breedte, de ingestelde breedte van het ontwerp aangepast.
Dat betekent dat je bij een resolutie van 1680×1050 nog steeds ruimte links en rechts over hebt, maar veel minder dan eerst.

Het is een beetje een hack, maar ik heb geen nieuwe klachten gehoord erover, dus zo te zien helpt het een beetje.
Blijft overigens wel opvallend dat de verschuiving naar hogere resoluties zo hard doorzet.