Design jij je Site nog voor Bejaarde Resoluties?
13 maart 2009 15:48 | Categorie: WebdesignenDe resolutie die bezoekers hebben ingesteld bepaalt hoe jouw website door hen wordt bekeken. Het is daarom belangrijk te weten wat de meest gebruikte resoluties op dit moment zijn.
Relevantie van deze analyse
Bij het maken van een website design dien je tegenwoordig met steeds meer rekening te houden. Waar je vroeger bijvoorbeeld maar hoefde te ontwikkelen voor één browser, blijkt uit de browser statistieken van 2008 dat dit nu niet meer het geval is. Ook in de ingestelde resoluties waarmee bezoekers op je website uitkomen is een grote verscheidenheid waar te nemen. Om er voor te blijven zorgen dat het design van je website niet zorgt voor horizontale scrollbars, maar ook geen stipje in de grote leegte van de monitor van je bezoeker lijkt, is het belangrijk om te weten wat de meest gebruikte resoluties van dit moment zijn.
Bronnen
Voor deze analyse is er gebruik gemaakt van de gepubliceerde resolutie statistieken door Net Applications. Zij geven op hun eigen website aan dat de gepubliceerde data wordt verzameld uit ongeveer 160 miljoen bezoekers per maand. De websites in de populatie representeren tientallen verschillende landen in Noord-Amerika, Zuid-Amerika, West-Europa, Australië en delen van Azië. Verder is er gebruik gemaakt van de resolutie gegevens van W3 Counter. Dit is een gratis dienst waarmee statistieken kunnen worden bijgehouden nadat er is ingeschreven. De gepubliceerde data door W3 Counter is opgemaakt uit de laatste 25.000 paginaweergaves per website, waardoor kleine sites ook bijdragen aan de statistieken.
In deze analyse zijn twee van de bronnen gebruikt bij het onderzoek naar de browser statistieken niet opgenomen. De data van W3 Schools is niet opgenomen omdat deze alleen de resoluties 640x480, 800x600, 1024x768 en 'hoger' aangeeft, terwijl er juist ook interesse in de verdeling van deze categorie 'hoger' is. De uitsluiting van The Counter is echter nog interessanter te noemen. Deze data is namelijk uitgesloten omdat hij in zijn geheel niet lijkt te kloppen! Zoals blijkt uit tabel 1 geeft The Counter aan dat 31% van haar bezoekers gebruik maakt van de resolutie 1280x1024. Dit getal wijkt sterk af van de door Net Applications en W3Counter genoemde ~14%. Verder blijkt dat The Counter geen melding geeft van het gebruik van de resolutie 1280x800, terwijl de som der delen van de resoluties bijna 100% is. Mijn vermoeden is dat er een fout zit in de meting of weergave van de resolutie statistieken bij The Counter. Wanneer namelijk in zowel de data van Net Applications als die van W3Counter de aandelen van 1280x800 en 1280x1024 worden opgeteld, leidt dit vrijwel perfect tot de door The Counter genoemde 31%.
Tabel 1: Resolutie statistieken gepubliceerd door The Counter
Tabel 2: Gepubliceerd gebruik van resoluties in procenten per bron
Analyse van de resolutie data
Uit tabel 2 en de grafische weergave daarvan (figuur 1) kunnen diverse interessante conclusies worden getrokken. Zo wordt de resolutie 1024x768 op dit moment verreweg het meest gebruikt met een marktaandeel van bijna 40%. De resoluties 1280x800 en 1280x1024 volgen met marktaandelen van ongeveer 15% op flinke afstand. Ook blijkt dat de er een stijging is in het aantal breedbeeldmonitors. De resolutie 1280x800 (breedbeeld) stijgt namelijk gestaag, terwijl de vergelijkbare 'normale' resolutie 1280x1024 met een gelijk tempo daalt. Ten slotte blijkt dat slechts 5% van de internetters gebruik maakt van een (bejaarde) 800x600 resolutie.
Figuur 1: De meest gebruikte resoluties in het afgelopen halve jaar
Wat betekenen deze statistieken voor een web designer?
Gezien de huidige ontwikkelingen is mijn advies is om geen rekening meer te houden met de resolutie 800x600 (of zelfs kleiner), zeker ook gezien het marktaandeel maandelijks verder daalt en daarom binnenkort tot het verleden zal behoren. Een focus op de resolutie 1024x768 waarbij rekening wordt gehouden met de grotere resoluties 1280x800 en 1280x1024 lijkt op dit moment de beste keuze.
15 Reacties op "Design jij je Site nog voor Bejaarde Resoluties?"
Sander Aarts
16 maart 2009 00:06
De stats van The Counter zijn sinds maart 2008 niet meer up-to-date. De periode begint immers steeds met 1 febr. 2008. Dat betekent dat de gegevens van de laatste maand een steeds kleiner deel van de totale meetgegevens uitmaken.
De stats van W3Schools lijken me sowieso niet erg representatief, gezien de doelgroep.
Jules
16 maart 2009 19:16
Houd wel rekening met het toenemend aantal internet-gebruikers op een mobieltje. Overigens, van die mobieltjes zijn de displays toch vaak kleiner dan 800x600 pixels.
Dus hoezo is 800x600 pixels of kleiner bejaard?
Theo
16 maart 2009 21:52
@Sander
Je hebt inderdaad gelijk. De gegevens van The Counter zal ik dan van af nu inderdaad maar helemaal niet meer gebruiken!
@Jules
Zelf ben ik één van die mobiele internet-gebruikers! Mijn standpunt is dat 800x600 bejaard is als resolutie om te gebruiken voor desktop/laptop doeleinden (zie bovenstaande statistieken), waarvoor verreweg de meeste ontwikkelaars nog steeds exclusief ontwikkelen.
Verder zijn in toenemende mate mobieltjes in opkomst die websites 'native' renderen (zoals bijvoorbeeld de iPhone) en renderen de mobieltjes die hiertoe nog niet in staat zijn de websites sowieso op hun eigen manier (bijvoorbeeld met Opera Mini). Hierdoor wordt de resolutie zoals gebruikt voor de 'normale' website irrelevant wordt voor mobieltjes. Of heb jij hier andere gedachten over?
Ruud Luiten
21 april 2009 00:02
Juist met de enorme opkomst van internet op je mobiel en de notebooks is het relevant om WEL energie te steken in de lagere resoluties. Overigens ben ik een groot voorstander van flexibele websites, waarmee je het resolutie probleem grotendeels al kan verhelpen.
Veel sites hebben onnodig veel informatie. Als je alleen de relevante informatie filtert, dan heb je ruimte genoeg om een gedegen site op te stellen voor een kleine resolutie.
Gezien steeds meer apparatuur overweg kan met een stylesheet specifiek voor mobiel, is het wel een stuk makkelijker geworden om ook voor de mobiele bezoekers een degelijke site op te stellen.
Neemt niet weg, dat je standaard moet uitgaan van 1024x768 of hoger. Dit moet je namelijk niet. Een gedegen opgezette site hoeft amper tot niet rekening te houden met resolutie. Daarnaast denk ik echt dat je goed bezig bent als je bij de opzet al rekening houdt met de diverse bezoekers van de kleinere apparaten. Kleine moeite, enorm grote deugd.
Simon
22 april 2009 13:42
Het hele idee van html is dat het op diverse hardware en browsers moet werken, dus zoveel mogelijk onafhankelijk van de resolutie. Mobieltjes zijn al genoemd, maar vergeet ook niet dat zeker bij hoge resoluties browsers niet altijd fullscreen staan. Nu de resoluties en beeldschermformaten toenemen komt het steeds meer voor dat gebruikers verschillende venster naast elkaar hebben, waardoor de browserresolutie maar een fractie van de beeldschermresolutie is. En met de opkomst van de netbooks zal ook de schermresolutie voorlopig weer afnemen.
Freek
22 april 2009 21:24
Vraag over schermresoluties als het mag?
Tegenwoordig komen er hoe langer hoe meer breedbeeld laptops en als je daarop een standaard website laat zien die op een resolutie is gemaakt van 1024x768 /1280x1024 dan moet de gebruiker van de laptop behoorlijk scrollen door de pagina's.
Is dat eigenlijk wel te voorkomen en zo ja, hoe dan?
Theo
26 april 2009 13:09
@ Ruud Luiten
Bedankt voor je uitgebreide reactie! Met betrekking tot het filteren van onnodige informatie, en de speciale stylesheets voor mobiele telefoons ben ik het volledig met je eens. Hierbij is Wikipedia in mijn ogen een lichtend voorbeeld.
Je punt met betrekking tot het niet uitgaan van 1024x768 of groter in designs ben ik het echter niet mee eens. Wanneer je met één stylesheet uit moet gaan van zowel de kleine netbook resoluties als 800x600 en grote resoluties als 1920x1200 loop je mijns inziens tegen problemen aan. Wanneer je namelijk gebruik maakt van een stretchend ontwerp, zal deze in theorie inderdaad kunnen passen op zowel een kleine als een grote resolutie. Het probleem dat hierbij ontstaat is echter dat er weinig content op de pagina past wil het er goed uitzien op een 800x600 monitor, maar dit er tegelijkertijd voor zorgt dat het ontwerp op de grote 1920x1200 monitor helemaal gestreched wordt. De optimale zinslengte van elf woorden ga je al snel overheen en alles zal er oprekt en uitgespreid uitzien. In mijn ogen dien je bij het ontwerpen van een website daarom wel degelijke rekening te houden met de huidige stand van zaken met betrekking tot schermresoluties.
@ Simon
Met betrekking tot de opkomst van netbooks verwijs ik door naar een discussie elders op het internet. Hierin wordt gesteld dat webdevelopers juist niet moeten gaan focussen op lagere resoluties, maar de ontwikkelaars van netbooks hun ogen moeten openen en hogere resoluties moeten gaan aanbieden (http://www.cloudave.com/link/should-you-redesign-your-website-to-800x600-or-wait-for-netbook-makers-to-wake-up-and-give-us-decent-screens). Gezien de huidige staat van het internet (met website ontwikkeld voor 1024x768+ en gewone beeldschermen van 19' of meer geen uitzondering meer zijn) lijkt dit de meer logische oplossing.
Het punt wat je noemt met betrekking tot de meerdere applicaties naast elkaar op één scherm vind ik sterk. Hier had ik zelf nog niet aan gedacht! Naar mijn mening vormt die echter geen direct probleem. Gebruikers die zich op dergelijke schermen storen aan het feit dat een website niet past in hun browser, kunnen eenvoudig hun scherm (tijdelijk) groter maken om de website correct te bekijken.
@ Freek
Dit is te voorkomen aan de kant van de ontwikkelaar, dus stretchende websites te ontwikkelen zoals hierover al gesproken wordt. Deze websites worden in theorie correct weergegeven op elke resolutie en daarmee ook op breedbeeld resoluties.
Ik zie echter niet direct in waar dit scrollen aan de gebruikerskant door zou ontstaan? De meeste laptops hebben een horizontale resolutie van minimaal 768 pixels breed, waardoor horizontaal scrollen zelden nodig zal zijn, en verticaal scrollen is iets waarinternetgebruiker normaal gesproken geen problemen mee hebben. Zou je de kwestie iets willen verduidelijken?
Freek
26 april 2009 20:27
Zeker wil ik dat! De breedte vormt inderdaad geen probleem, maar de hoogte. Als ik een website maak op mijn computer (1280x1024 hoger kan niet) en ik test die op de meest gangbare resoluties dan ziet dat er prima uit.
Bekijk ik de nieuwe website op een breedbeeld beeldscherm, dan is de footer, die keurig onderaan staat op de geteste schermresoluties, op een breedbeeldscherm zeker een cm omhoog gekomen.
Dat is niet echt mooi (ik vindt het zelfs storend) en ik kan daar (gebrek aan kennis?) geen goede oplossing voor vinden.
Helaas heb ik geen URL om als voorbeeld te laten zien.
Theo
27 april 2009 12:46
Bedankt voor je uitleg Freek! Zonder zelf te kunnen zien wat er gebeurt, kan ik hier echter alleen maar gokken naar een oplossing. Het beschreven probleem kan namelijk vele oorzaken hebben.
Wat bedoel je precies met 'de footer komt omhoog'? Zit deze 'vastgeplakt' aan de bodem? Kan het iets te maken hebben met het al dan niet aanwezig zijn van de verticale scrollbar? Past er door het breedbeeld scherm meer content in de breedte waardoor er minder content 'in de lengte' is?
Freek
27 april 2009 21:38
De website is gemaakt middels een CSS-template en heeft nauwelijks wijzigingen ondergaan, met uitzondering van kleuren, lettertype en lettergrootte en afbeeldingen.
De website wordt goed gevalideerd door W3C.
Bekijk ik de website met de verschillende meest gebruikte resoluties: geen enkel probleem.
Met breedbeeld komt de onderste footer een heel stuk omhoog.
Bekijk je de index met Safari of Chrome dan doet dat fenomeen zich ook voor, waar ik niets van snap.
Safari maakt het wel heel bond, door alles vet weer te geven terwijl daar in het CSS bestand geen verwijzing voor is.
De breedte van de website staat op 100%
Vanmiddag de website op een mini-nootbook bekeken en dan wordt het nog treuriger: de rechter afbeeldingen worden rechts onder het I-frame geplaatst.
Tijdelijk een url om het aanschouwelijk te maken:
http://www.kompozer.nl/proef/
Simon
28 april 2009 16:23
@theo: natuurlijk kun je de browser altijd nog fullscreen zetten, maar persoonlijk vind ik het irritant als webdesigners van een bepaalde resolutie uitgaan. In dat opzicht vind ik het ook vreemd om geen rekening te houden met 800x600 omdat dat 'slechts' door 5% wordt gebruikt. Het doel zou m.i. toch moeten zijn om 100% van de markt te bereiken, en voor drukbezochte sites gaat het zelfs bij 5% om aanzienlijke aantallen bezoekers.
En netbook resoluties kunnen misschien hoger, maar het lijkt me geen goed idee om dit probleem op de netbookfabrikanten af te schuiven. Feit is dat er nu eenmaal veel netbooks in omloop zijn (en persoonlijk vind ik 800x600 voor een 7" scherm meer dan voldoende).
Theo
29 april 2009 10:16
@ Freek
Het feit dat de website valideert door W3C wil nog niet zeggen dat ook de CSS perfect werkt (op alle browsers en verschillende resoluties), zoals in dit geval blijkt. Gezien de website ook op Safari en Chrome het probleem vertoond, kan het waarschijnlijk geen direct gevolg zijn van een veranderende resolutie. Tevens zou het probleem zich dan ook moeten voordoen wanneer het venster wordt vergroot of verkleind, en ook dit is niet het geval.
Gezien al de punten die je noemt, en ook de code achter het voorbeeld dat je ons gegeven hebt, lijkt het zoeken naar een nieuwe CSS-template (die wel cross-browser werkt op alle resoluties) misschien de beste oplossing?
@ Simon
In mijn ogen is het doel een zo optimaal mogelijke ervaring voor een zo groot mogelijke groep mensen. De groep gebruikers op 800x600 wordt met de dag kleiner wordt en ontwikkelen voor deze resolutie zorgt voor een suboptimale gebruikerservaring voor de 1024x768+ gebruikers. Hierom lijkt het ontwikkelen voor 1024x768+ vanuit dat perspectief de beste oplossing. Wil je misschien uitleggen waarom precies je het irritant vind als webdesigners uitgaan van een bepaalde resolutie? De kans is namelijk groot dat jij onderdeel uitmaakt van het pakket aan resoluties waarmee deze designers rekening houden en daarmee een optimale gebruikerservaring krijgt.
Verder geef je aan dat je het geen goed idee vindt om het probleem van de lage resoluties af te schuiven op de netbookfabrikanten. De reden waarom ik dit wel doe, is dat zij qua resoluties achter lopen op de huidige ontwikkelingen. Gezien er al netbooks zijn met een resolutie van 1024x768+ is het technisch gezien haalbaar en toch kiest het grootste deel van de fabrikanten ervoor om hun tijd en geld te steken in het ontwikkelen van andere features. Daarmee onthouden zij bewust hun gebruikers een optimale surfervaring op een groot deel van het internet. Wat is dan de reden dat wij als webdesigners rekening moeten gaan houden met een bijzonder klein percentage van de markt, als zij ook geen rekening lijken te willen houden met een bijzonder groot percentage van de markt? Naar mijn mening is de oorzaak en het gevolg van het probleem daarmee duidelijk en dienen de netbookontwikkelaars zich aan te passen aan 'het internet' en niet andersom, maar ik hoor graag van jou een verduidelijking waarom jij vindt dat dit niet zo is.
Freek
29 april 2009 12:18
Dank voor deze ondersteuning!
Zal deze discussie met veel belangstelling blijven volgen.
Simon
29 april 2009 12:50
Met een fullscreen browser op 1600px zien de meeste sites er niet uit. Ik vind het zelf handiger om een verkleind venster te gebruiken. Natuurlijk moet je altijd ergens voor kiezen, maar persoonlijk bereik ik liever zoveel mogelijk klanten ipv de site net iets mooier te maken voor een deel van die markt. Als de site er voor een deel van de bezoekers slecht uit ziet is dat niet het probleem van die bezoekers. Vooral voor commerciele sites heb je er niets aan om te roepen dat ze dan maar hun venster moeten maximaliseren; het kan bezoekers en dus klanten kosten. Maar zoals gezegd, het blijft kiezen. Optie is natuurlijk om via javascript (mits dat aan staat) de browserresolutie op te vragen en daar je layout en lettergrootte op aan te passen. Maar het zal wel net zo'n oneindige discussie zijn als de keuze tussen fixed en fluid ;-)
Wat die netbooks betreft: met 800 pixels op een 7" scherm heb je al veel meer dpi dan met 1600 pixels op 22", dus een hogere resolutie is niet zo zinvol, alleen maar kostenverhogend. En aanpassen aan 'de markt' is een cirkelredenering, want die netbooks maken deel uit van 'het internet'.
Ivo
21 februari 2010 15:22
Het blijft natuurlijk een interessant vraagstuk, hoe om te gaan met verschillende scherm resoluties. Een handige visuele tool om je websites te testen is www.resizebrowser.com. Daarop is ook te zien dat je niet alleen rekening moet houden met de breedte, maar tegenwoordig ook met de hoogte. Breedbeeld schermen verliezen namelijk behoorlijk wat hoogte ten opzichte van een oud 4:3 scherm.
Tweepixels webdesign