Hogere Resoluties op het Web

 Gepubliceerd door om 14:36  Internet
okt 172008
 
Resoluties - Klik voor grotere versie

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.

Deel dit bericht:

  7 reacties aan “Hogere Resoluties op het Web”

Reacties (7)
  1. blogs lezen is voornamelijk lezen. en lezen gaat het snelst en makkelijkst in smalle kolommen, zoals in een krant. een krant is geoptimaliseerd op snel kunnen lezen. bezoekers analyse op beschikbare schermbreedtes zeggen daarom voor weblogs helemaal niks. 800 pixels breed is optimaal voor een blog. in de 800 pixels die je dan nog over hebt in de breedte kun je andere nuttige dingen zien. mijn favoriete button in mijn bookmarks bar:
    javascript:moveTo(50,5);window.resizeTo(800,screen.availHeight-50)

  2. Waarom vind je dat dit een hack is? Lijkt me een prima oplossing toch?
    "Je zegt:Het nadeel van die indeling is dat de middelste kolom weer heel smal kan worden."
    Volgens mij moet het mogelijk zijn om in een stylesheet een minimale breedte voor een element op te geven.
    Maar zo werkt het ook!

  3. @Willem: Er is inderdaad een waarde min-width, maar die lijkt bij Opera en IE6 geen effect te hebben.

    Ik vind het een hack omdat het niet netjes in de stylesheet gebeurt, maar met JavaScript en omdat één aanvullende breedte voor iedereen met hogere resoluties gebruikt.

    @Rino: bedoel je dan 800 pixels voor alles, of alleen voor de kolom met de tekst? In dat tweede geval doe ik het nou namelijk precies goed indien je een breedbeeldmonitor hebt. Die krijg namelijk een breedte van 800 pixels voor de middelste kolom.

  4. In dat geval is het ook interesant te weten hoeveel mensen via Opera en (nog) met IE6 je site bezoeken. Het zijn dingen waar ik zelf te weinig op let…

  5. Volgens Woopra lagen de verhoudingen tijdens de afgelopen 30 dagen als volgt:
    IE7 – 49,8%
    FF3 – 18,8%
    IE6 – 16,7%
    FF2 – 4,1%
    Safari 3 – 3,6%

    Opera 9 – 0,81%

    OK, aantal bezoekers met Opera 9 is heel beperkt, maar IE6 heeft nog steeds een aandeel dat bijna gelijk is aan FF3.

  6. De hack is een prima oplossing omdat het ‘non obtrusive’ is wat zoveel betekent dat browsers met javaScript uitgeschakeld er geen last van hebben (ook geen profijt).
    Evenzo geeft de min-width geen problemen in IE. Eventueel kan je conditionele style elementen gebruiken
    <!–[if IE 6]>
    Special instructions for IE 6 here
    <![endif]–>
    http://www.quirksmode.org/css/condcom

  7. Je kunt een minimale breedte afdwingen door er een transparante afbeelding (gif) in te plaatsen van 800 pixels breed en 1 pixel hoog. Zo’n afbeelding kost niets aan dataverbruik (500 bytes of minder)

    Verder ben ik het met Rino Zandee eens. Er is een bepaalde breedte die optimaal leesplezier bij de bezoeker bereikt.
    Voor elk medium (internet / krant / boek / …) is deze breedte anders, en afhankelijk van het gebruikte lettertype, grootte, kleurstelling enz.

    Voor meer informatie over je problematiek kun je eens zoeken op ‘liquid design’.

Sorry, het reactieformulier is momenteel gesloten.