Het is verbazingwekkend hoeveel webprofessionals niet weten met welke basisinstellingen mensen surfen.
Resolutie van beeldschermen: situatie september 2009
Deze cijfers zijn afkomstig van een website met meer dan 1 miljoen, hoofdzakelijk Belgische, bezoekers. Ze dateren van 15 augustus tot 15 september 2009. Ze geven dus een goed beeld van de algemene situatie. Uiteraard verschillen de exacte cijfers van website tot website, maar de algemene tendenzen zullen toch vaak hetzelfde zijn.
Belangrijkste vaststelling
Wat een zootje.
Resolutie van een scherm = breedte x hoogte
De resolutie van een beeldscherm bestaat uit de breedte en de hoogte. Misschien moeten we die eens apart bekijken. Voor deze cijfers heb ik de top 100 meest gebruikte resoluties opgeteld. (Om je een idee te geven: bij nummer 101 gaat het nog maar om 75 bezoeken op een totaal van meer dan 1,3 miljoen.)
Breedte
Nog meer samengevat:
- Kleiner dan 1024: 2,03%
- Tussen 1024 en 1440: 79,26%
- Groter dan 1680: 5,08%
Hoogte
Wat hier vooral opvalt is dat maar 4,08% van de mensen surft in een hoogte die lager is dan 768 pixels.
Wat moeten we daarmee aanvangen?
Niks moet. Maar als we deze cijfers zien, geven we toch graag volgend advies:
In de breedte
- Als je kiest voor een vaste breedte, zorg dan dat deze zonder horizontale schuifbalken past in een resolutie van 1024 pixels breed. Iedereen tevreden, behalve die 2,03% surfers die in een lagere resolutie surfen. Pech.
- Als je jezelf een designer noemt, dan weet je waarschijnlijk dat puur theoretisch gezien een gelimiteerde vloeiende lay-out het beste is (met een minale breedte en hoogte). Jammer genoeg is de haalbaarheid ervan door browsertechnische redenen vooralsnog soms vrij moeilijk. Niettemin ben je het aan jezelf verplicht om voor elke website na te gaan wat de voor- en nadelen zijn van een liquid lay-out (budget, haalbaarheid, voordelen, nadelen, …). Ons advies: Probeer de lay-out zo te maken dat hij mooi vloeibaar is tussen 1024 en 1280 pixels. Als je echt wil tonen hoe geniaal je bent, zorg dan voor een goede liquid lay-out tussen 1024 en 1440 pixels.
- Interessante artikels van Smashing Magazine over hoe liquid lay-out toepassen : – Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? – Flexible Layouts: Challenge For The Future
In de hoogte
- Plaats de belangrijkste content en actieknoppen boven de vouwlijn in 768. Houd daarbij rekening met de hoogte die de meeste surfers verliezen door de knoppenbalken in hun browser en minstens 1 toolbar.
- Iets minder belangrijke keuzes mogen lager op de pagina staan. De eerstvolgende 132 pixels worden zonder te scrollen nog altijd gezien door 68,23% van de surfers. In de zone tussen 900 en 1080 pixels ziet nog maar 30,51% van de bezoekers je aanbod staan. Alles wat daarbuiten valt, wordt zonder te scrollen nog maar gezien door 3,85% van de surfers.
En mobile dan?
- Tenzij je doelpubliek er echt om vraagt, of je zeker weet dat de site duizenden euro’s extra winst zal maken dankzij jouw optimalisatie voor beeldschermen met een lage resolutie, kan je het budget beter ergens anders aan besteden.
- Web goes mobile? Alleen als ik dan ook mag zeggen dat mijn bedlegerige oma mobiel is. Er staan wieltjes onder haar ziekenbed.
Karl,
bedankt voor deze update. Altijd leuk om recente, lokale cijfers te hebben.
Dit zinnetje is wel grappig om hier, op deze site, te lezen : “… als u weet dat een vloeiende lay-out altijd het beste is ..”
Ik weet ten eerste niet of dit idd zo is, esthetisch gezien, maar ook naar usability toe e.d., maar deze blog vind ik erg handig en overzichtelijk (meer dan de AGConsult-site if I might add 😉 )
Grtz,
Tom.
@ Tom
Er staat ook “om voor elke website na te gaan wat de voor- en nadelen zijn van een liquid lay-out”. In het geval van deze blog was het afwegen snel achter de rug.
Over de AGConsult website: je hebt gelijk dat er ruimte voor verbetering is, maar het ding doet nog wat het moet doen: klanten opleveren, opleidingen verkopen etc. Weinig websites die 8 jaar oud zijn (en nauwelijks veranderd), kunnen dat zeggen…
Maar eerlijk is eerlijk: we hopen al jaren de broodnodige tijd te vinden om de website een zeer grondige facelift te geven.
Wat me vooral opvalt is dat de tijd van de ‘standaard’ resoluties (1024×768,800×600 en (gasp) 640×480) echt wel voorbij is.
Het zou dan misschien ook overzichtelijker zijn als je de samenvatting had gemaakt op basis van megapixels. De verhoudingen schommelen toch altijd ergens tussen 4:3 en 16:10, dus de specifieke hoogtes en breedtes zijn volgens mij niet zo belangrijk.
Ikzelf ontwerp altijd voor een breedte van 1024. Afhankelijk van de doelgroep hou ik er rekening mee dat het belangrijkste ook op 800×600 zichtbaar is. In de hoogte zorg ik er zoveel mogelijk voor dat het belangrijkste bovenaan staat en dat je duidelijk ziet dat de pagina verder gaat ‘onder de vouw’, dat er dus een zekere verticale ‘flow’ in zit. Maar een echt specifieke ‘vouwlijn’ op, pakweg, 600px gebruik ik niet, dat varieert te veel om nuttig te zijn en het impliceert dat mensen per definitie niet scrollen. Het scrollen op zich blijkt (zeker voorbij de homepage) minder een probleem dan vroeger. Ik heb eens ergens gelezen dat dat zou te maken hebben met de opkomst van scrollwieltjes.
Het grote nadeel van fluid layouts is dat de lengte van tekstregels vaak te lang wordt om goed en aangenaam leesbaar te blijven. Tachtig tekens is ongeveer de norm. Tot er een universele manier is om met CSS makkelijk fluid multi-column layouts te maken hou ik het liefst bij fixed-width. Als je dat combineert met artikels/pagina’s die niet te lang zijn en goed voorzien van textuur is scrollen geen probleem.
De opmerking rond mobiel internet gebruik is een beetje kort door de bocht. De enige conclusie die je kan maken op basis van de cijfers is dat de site die je gemeten hebt nauwelijks door kleinere schermen is bekeken.
Onze ervaringen bij MobileWeb.be met mobiel internet en statistieken zijn de volgende:
– je moet een aangepaste site maken voor mobiele devices, anders is de user experience verschrikkelijk (voorbeeld van aangepaste site is http://m.standaard.be)
– je kan nauwelijks beroep doen op de bestaande analytics tools zoals Google Analytics voor het meten van mobiel internet gebruik; veel van de mobiele devices ondersteunen bijvoorbeeld geen cookie of java script technologie. We hebben eigen meettechnologie moeten ontwikkelen om het gebruik haarfijn in kaart te brengen.
[Allerlei links naar seminaries en andere reclame geschrapt]
@ Danny
Het is natuurlijk logisch dat je je eigen handel wil verdedigen, maar niets in je betoog toont aan dat mobile daadwerkelijk een knaller is waar je moet opspringen. Ik mis cijfers. Ik mis de harde cash return verhalen. Dat zou een meerwaarde zijn als reactie op dit artikel.
Onze cijfers zijn niet echt kort door de bocht: ze geven de realiteit weer. Dat ze niet in je kraam passen, is een ander probleem. Omdat het gaat om een gigantische website (heb jij 1,3 miljoen bezoekers per maand?) zonder aangepast mobiel platform, geven ze een zeer goed neutraal beeld. En dat beeld is: heel weinig lage resoluties, wat trouwens ook bleek uit de browsercijfers van verleden week. Een cookie is trouwens niet nodig om te meten.
We beweren trouwens ook nergens ‘fuck mobile’, maar we waarschuwen wel voor een iets te stevig enthousiasme. Ik denk dat voor minstens 95% van de bedrijven de investering om hun communicatie ook te optimaliseren voor mobile op dit ogenblik weggesmeten geld is. Dat bedrag kunnen ze ongetwijfeld gebruiken voor zaken die meer en sneller renderen.
Dat een krant of sites zoals gouden gids en resto voor mobiel gaan, lijkt me meer dan logisch. Ik ben vooral benieuwd voor de ROI voor ‘gewone’ websites.
@Danny Lein: je kan niet verwachten van je bezoeker dat hij voor alle websites eerst eens gaan proberen of m.mijnwebsite.tld of misschien i.mijnwebsite.tld,.. bestaat.
Er is technologie genoeg die toelaat om te detecteren met welk device je surft. Op basis daarvan ga je de vorm van je website aanpassen. De basisregel hiervoor is m.a.w. heel eenvoudig:
“Identieke content, andere lay-out”
Een goed voorbeeld is de (door ons, uiteraard 🙂 ) onlangs gelanceerde website van http://www.mobilemonday.be.
Verder ben ik wel akkoord met je stelling dat we niet de cijfers van 1 website, hoe vaak bezocht ook, kunnen nemen om *mobile* internet te kaderen. Voor de ene site kan dit een echte meerwaarde zijn (nieuws, community, NMBS,..) voor andere absoluut niet.
Vraagje: is de schermresolutie parameter wel toereikend genoeg voor grote displays? Hoeveel mensen met schermresolutie van > 1400 openen hun browser full canvas? Zijn er daar cijfers over. Wat ik observeer is dat mensen met schermresolutie > 1400 (meestal breedbeeldschermen) twee applicaties naast elkaar bekijken. Browser op 1000 en widgets/apps/whatever plaatsen in de overige screen estate. Wat dus belangrijk is is design voor de werkelijke breedte van de browser en die is zeker bij grote displays niet altijd gelijk aan de effectieve schermresolutie.
Zijn daar cijfers over?
Hendrik
PS: Misschien ook eens een post doen over de usability van display van tabulaire data en hoe ze in een html tabel te steken en niet in een image zodat je ze makkelijk kan copy pasten 😉
Hendrik,
Daar zijn bij mijn weten geen cijfers over. Je inschatting is volgens mij juist.
Interessante informatie Karl. Vraagje:
1/ is er ondertussen een update?
2/ brongegevens: van welke website is er onderzocht of wat is het profiel van de surfers (zijn dit bedrijfsmensen, IT profielen, consumenten?)
In september 2010 maken we een update van dit artikel. De cijfers komen van een portaalwebsite en geven dus een algemeen beeld. Het gaat zeker niet om it’ers.
Ik gebruik deze pagina nog weleens als referentie om weer even na te denken over de schermresolutie bij de aanvang van een nieuwe website.
Wat ik nog zou willen aanvullen is de overwegingen bij het bepalen van de hoogte (vooral als je een website maakt met vertikaal gecentreerde content). Houd bij de hoogte rekening met 1 a 2 menubalken (ca. 130-160 px), de statusbalk (ca 25 px) en zeker niet te vergeten de taakbalk (30 px). Dan houd je bij een schermhoogte van 768px in het beste geval 583px over (en nog eens 30 px minder als je uitgaat van 2 menubalken).