Meet je scherm resoluties of beschikbare ruimte

Waarom meten een heleboel pakketten scherm resoluties? Is dat handig? Of is het een relikwie uit het verleden?

Vroeger (op internet gebied dan) was het gebruikelijk dat je al je vensters gemaximaliseerd open had staan. Dit had te maken met de kleine resoluties die toen gangbaar waren: 640*480, 800*600 en 1024*768. De metingen die je deed op basis van de scherm resolutie gaven ook een aardig beeld over hoe je site gemiddeld genomen bekeken werd.

Maar tegenwoordig is het anders, zelfs de kleinere mini-notebooks als de MSI Wind en de Asus EEE pc hebben al resoluties van 1024*600. En de normale notebooks en pc's hebben resoluties die daar ver boven liggen. Daarbij rijst direct de vraag: kunnen we er van uitgaan dat iedereen zijn scherm gemaximaliseerd heeft? Hoe groter de resolutie hoe minder vaak een gemaximaliseerd scherm gebruikt word.

Waarom meten we dan nog scherm resoluties?

Is het interessant om te weten dat veel van je bezoeker je site bekijken op een 2048*1536 scherm? Nee, je hebt er vrij weinig aan. Interessanter is om te weten wat het actuele formaat is van hun browser venster. En nog interessanter is te weten wat de afmetingen zijn van het effectief te gebruiken venster. Want met de wildgroei aan ongewild geïnstalleerde toolbars wordt deze effectieve ruimte ook steeds kleiner:

Effectieve resoluties doormeten met Google Analytics

Ik heb een aanpassing gemaakt aan het Google Analytics meetscript waardoor nu niet de resolutie van het scherm maar die van de effectieve ruimte gemeten wordt. Ik heb nu een beter beeld van de ruimte die mensen hebben om mijn site te bekijken. De resultaten van de meting zien er als volgt uit:

Wat direct opvalt is dat er weinig grote resoluties in de top 10 zitten. Dat zou dus betekenen dat die mensen inderdaad niet hun browservenster maximaliseren. Dat alle resoluties eindigen op 00 of 50 heeft te maken met het feit dat ik de getallen afkap. Anders zou je oneindig veel resoluties krijgen, en met het afkappen blijft dit overzichtelijker. Ook heb ik voor afkappen boven afronden gekozen omdat de getallen die je nu meet de afmetingen zijn waarbinnen je site sowieso bekeken kon worden.

Aanpassen meetscript

Om het ook op deze manier te meten moet je de volgende toevoeging maken in het Google Analytics Tracking Script:

<script type="text/javascript">
function roundDown(nr) { return parseInt(nr / 50) * 50; };
function getWidth() {
var w = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth));
w = roundDown(w);
return w;
};
function getHeight() {
var h = (window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight));
h=roundDown(h);
return h;
};
_gaq.push(['_setCustomVar', 2, 'echteresolutie', getWidth() + '*' + getHeight(), 1]);
</script>

Let er op dat je geen gebruikte CustomVar slot overschrijft. In mijn geval gebruik ik daarom slot 2.

Update

Ik heb gekeken wat de gegevens me inmiddels opgeleverd hebben. En het resultaat is als volgt voor de gemiddelde resoluties:

  • Voor: 1333*937
  • Na: 1227*706

Dat houdt in dat men gemiddeld 92% van de beschikbare schermbreedte en 75% van de schermhoogte gebruikt om te browsen. Dat heeft te maken met het feit dat enkelen een toolbar/sidebar links of recht van de browser gebruiken. En dat verreweg de meesten een aantal toolbars boven of onder het scherm hebben staan. Vooral qua breedte moet ik dus goed rekening houden met 700 en niet met 900.

Click to activate social bookmarks

 
  • http://www.zeo.nl/ Corne

    Wat zou je met deze informatie moeten doen ten opzichte van het advies naar je klant? Je ziet tegenwoordig veel websites die gecentreerd zijn zoals bijvoorbeeld http://www.nu.nl.

  • http://andrescholten.net André

    Een heel makkelijk voorbeeld is bijvoorbeeld een website waar de 'koop nu' knop beneden de vouw zit. Normaal gesproken denk je dat mensen die knop wel zien, maar als blijkt dat de gemiddelde bezoeker 3 toolbars heeft is de effectieve ruimte veel kleiner. En dan zou de vouw wel eens hoger kunnen zitten dan je denkt. Je hebt gewoon een beter beeld over de ruimte waarin mensen je site bekijken.

  • Sil Kogelman

    Dit is zeker iets om over na te denken! Ook de gebruikers ervaring van achter een laptop en andere 'breedbeeld ervaringen' van een site kunnen compleet anders zijn dan een 4:3 ervaring op een 'gewoon' scherm.
    Het liefst zou ik willen kunnen zien hoe bijvoorbeeld deze top 10 bezoeker varianten een site zien. Met deze toevoeging aan het Google Analytics tracking script en bijvoorbeeld een site als browsershots.org, en een meting met een fotopakketje 'van onderkant lat tot bovenkant lat' is er al vrij specifiek te bepalen hoe iemand de website geeft gezien.

    Als ik het goed begrijp is dit een vervanging van het huidige Google Analytics scherm resolutie tracking gedeelte. Ik ben nog niet helemaal Google Analytics 'Guru', maar als ik bijvoorbeeld deze huidige resolutie tracking van Analytics wil behouden, en een eigen filter met deze gegevens wil vullen. Is dit te doen? Het zou een extra stap in Analytics vereisen begrijp ik, maar omdat ik zelf mijn opties open wil laten wat betreft bruikbaarheid van huidige scherm resolutie tracking lijkt me dit handig. Misschien zijn er eventueel ook weer zinnige conclusies te trekken uit de combinatie van deze nieuwe resolutie tracking gegevens en de huidige Analytics resolutie tracking gegevens. Misschien maakt dit de keuze voor implementatie van het script misschien ook iets laagdrempeliger voor webmasters / Analytics beheerders die ook huidige statistieken willen behouden.

    Ik ga ook dit script zeker uittesten, dat zal ongetwijfeld wat effecten hebben op positionering van belangrijke informatie. Bedankt voor dit inzicht en de scripting André!

  • http://andrescholten.net André

    @Sil: het is misschien een idee om dan beide resoluties door te geven: 1024 (1000) * 768 (700). Nadeel is wel dat je lijst met resoluties dan enorm lang wordt omdat er veel combinaties mogelijk zijn. Maar dit kun je natuurlijk weer oplossen door het te exporteren naar bijvoorbeeld Excel en daar te splitsen.

    Resoluties zijn ook geen getallen die je dagelijks bekijkt maar meer eens per kwartaal. De vraag is of Google Analytics deze oplossing slikt, ik ga het eens proberen, goed meegedacht :)

  • http://markijbema.blogspot.com/ Mark IJbema

    Ik snap niet waarom je alleen de individuele resoluties meet. Eerst zeg je dat bijna niemand gemaximaliseerd surft, en dat iedereen een verschillend aantal toolbars heeft, en dan ga je een top 10 samenstellen van individuele afmetingen. Als wat je zegt waar is, heb je daar dus de enkele mensen te pakken die well fullscreen browsen, in een gangbare browser, met standaardinstellingen, en is de top10 samen maar een paar procent van de bezoekers. Wat veel logischer zou zijn is resoluties te groeperen, aangezien als er nu 100 mensen zijn met 800x799, 799x800, 798x802 etc, dan telt dan aanzienlijk minder dan 10 mensen met 1024x768. Lijkt me dus dat je iets wil doen van een afstand tussen resoluties definieren, en dan klusteren met k-means oid, want de huidige statistieken geven, als je premisse waar is, niets interessants.

  • http://markijbema.blogspot.com/ Mark IJbema

    Ik zie net dat ik toch niet helemaal goed gelezen hebt. Je groepeert inderdaad wel, maar de manier waarop is wat arbitrair. Als je in mijn voorgaande tegenvoorbeeld 10 mensen door 30 vervangt gaat t weer op namelijk, en dat is imho nog steeds raar.

  • http://andrescholten.net André

    Valt mee toch, je kunt de data exporteren naar Excel en aan de hand daarvan een meer handige rapportage opstellen. In feite zou je dan het afronden/afkappen achterwege kunnen laten omdat je toch gaat nabewerken. Toch heb ik voor afkappen gekozen zodat ik in Google Analytics bepaalde resoluties kan segmenteren.

    Daarnaast groepeer ik nu in groepen van 50, dit kan eventueel naar 100. En dat levert niet echt veel meer resoluties op dan voorheen.

  • http://www.jaapmeijer.com Jaap

    Klikt erg logisch, lijkt me geen speld tussen te krijgen. Enige vraag die overblijft bij mij: is de resolutie nu de buitenmaat van je browser (dus incl. knoppenbalken) of in dit geval de binnenmaat (dus de getoonde website)?

  • http://andrescholten.net André

    De binnenmaat, dus de echte effectieve ruimte die een website kan gebruiken.

  • http://bartvanderplas.nl bart

    he andre,

    ik heb een vraagje.. ik ben namelijk niet echt into coding maar probeer het wel te begrijpen.
    als ik je code bekijk zie ik wel dat hij alles berekend maar niet dat hij de gegevens opslaat of wel?

    als ik het mis heb lees ik het hier wel weer ;)

    gr,
    bart

  • http://andrescholten.net André

    Hallo Bart, mijn stukje code doet alleen een aanpassing in het meet gedeelte. De rest wordt gewoon gedaan door het originele Google Analytics script, dus ook het versturen van de data.

  • Website promotie

    Hiermee kom je op het punt dat je pagina's niet te lang moet maken en dat belangrijke informatie direct in 'the picture' moet staan.

    Overigens vraag ik me af hoe betrouwbaar de bevindingen zijn. Ik heb de code nog niet bekeken, maar ik heb het het verleden tests gedaan. De resultaten verschilden nogal per browser (IE en FF). Op zich geeft dat niet eens, om weer bij mijn eerste punt te komen. De indeling van je pagina is en blijft gewoon belangrijk.

  • http://andrescholten.net André

    Wat bedoel je met betrouwbaar? Ik vraag voor alle browsers op hun eigen manier de grootte van het actieve scherm op. Dit is op de pixel nauwkeurig en dus betrouwbaar ;)

  • Website promotie

    Oke :) Maar je kunt Opera laten voordoen als IE en in Firefox kun je je eigen user agent instellen. De vraag is natuurlijk hoeveel mensen dit doen.

  • http://andrescholten.net André

    Dat maakt nog steeds niet uit, de maten worden nog steeds goed gemeten, dat is niet afhankelijk van de useragent.

  • Ferdy

    De gegevens die je vermeld in je update;
    Voor: 1333*937
    Na: 1227*706

    Zijn die van deze site, of verspreid over meerdere sites?
    Het aantal lezers met een Eee-pc of PDA is hier denk ik hoger dan een website van een gemiddelde klant, waardoor dit wellicht geen goede indicatie van een werkelijk gemiddelde geeft.

  • http://andrescholten.net André

    Dit zijn cijfers van alleen deze site. Ik heb nog niemand gek genoeg gekregen dit op zijn eigen site te testen ;)

  • Ferdy

    Dan bij deze ;)
    Zal de resultaten over een week of 2 hier komen delen.

  • http://www.alice-in-wonderland.net Lenny de Rooy

    Zou het ook met de urchin versie van de GA code moeten werken? Want ik krijg een Javascript error: _gat is not defined.

  • Ferdy

    Nee, deze code gaat uit van het nieuwe tellersysteem. Als je de weg binnen javascript een beetje weet kun je de toevoegingen en wijzigngen van Andre echter ook doorvoeren in de oude.

    Dan nog de statistieken die ik beloofd had.
    Ik heb 266 verschillende venstergroottes gemeten met een gemiddelde afmeting van 966x560. Dit over ruim 120k unieke bezoekers.

    Hier zitten een aantal resoluties tussen zoals 950x150, 750x150 en 350x100 welke het gemiddelde aardig omlaag trekken. Indien ik alle resoluties onder de 400x400 of minder dan 1% marktaandeel achterwege laat houd ik 97 duizend bezoekers over met een gemiddelde resolutie van 1180x640.

    Daarbij moet ik wel zeggen de code van Andre iets te hebben aangepast zodat resoluties altijd naar beneden worden afgerond in plaats van het dichstbijzijnde 50-tal, welke de gemiddelden wat verlaagt.
    Deze waarden zijn gemeten op een social networksite gericht op jongeren (<18).

  • http://andrescholten.net André

    Dankjewel Ferdy voor de getallen :)

  • John Laagveer

    Hoi André, 1st best wishes for 2009.
    Ik zit met een probleem....

    pixels...beeldschermverhoudingen...resoluties....
    Hoe kan bv een 1024 x 768 scherm breedbeeld zijn (verhouding 19:9 terwijl 1024 x 768 toch 4:3 is?

    Groet en alvast bedankt voor een reactie,

    John

  • Ferdy

    John, als ik zo vrij mag zijn antwoord te geven. Het browservenster hoeft natuurlijk niet gemaximaliseerd te zijn. Je kunt op een 1024x768 scherm prima een (breedbeeld-)venster open hebben van 800x380

  • http://www.noonnoo.com Melle

    Off-topic: Ten eerste wil ik even zeggen dat ik het een leuk blog vind en volg nu de feed.

    Wat mij eigenlijk opvalt is dat jouw gemiddelde schermresoluties - hoe uiteenlopend de uitersten ook mogen zijn - veel hoger zijn dan het gemiddelde van smashingmagazine! Maar moeten we hier gebruik van maken door de site extra breed te maken? Als het aan mij ligt niet.

    Persoonlijk erger ik me al genoeg aan het feit dat overal langs de werkelijke inhoud menuutjes en flikkerende banners staan die ook mijn aandacht opeisen terwijl ik daar helemaal niet voor kwam. Zeker als men de 200px extra op de plus-minus 1000px breedte erbij doet kunnen er nóg meer menuutjes en dingetjes bij!

  • http://www.spenk.nl/ Jens Swelson

    Denk je niet dat als je website niet helemaal wordt weergegeven in het browservenster van een bezoeker, hij het venster vanzelf maximaliseert? Dat lijkt mij in ieder geval vrij logisch.

  • http://andrescholten.net André

    Dat zou kunnen, dit kun je ook prima meetbaar maken met het onresize event. Pas als je dat doet weet je ook zeker dat mensen het doen.

  • Hans

    Vind net dit artikel. Meteen geprobeerd natuurlijk, maar werkt niet met de nieuwste code? Ook ik krijg een '_gat is not defined'. Analytics script begint met 'var _gaq'.

  • http://andrescholten.net André

    @Hans: deze code is inderdaad al flink verouderd en moet geupdate worden naar de nieuwste versie van de meetcode. Ik zal hier binnenkort tijd voor maken, al is het niet zo eenvoudig meer om dit te doen. Er zijn betere oplossingen door deze resoluties te gaan meten met de setcustomvar mogelijkheden. Ik kom hier op terug.

  • http://andrescholten.net André

    Hans, ik heb een update geplaatst. De echte resoluties worden nu met de setCustomVar functie bijgehouden.

  • Hans

    André, heel mooi. Ik was zelf ook al aan het kijken naar de setCustomVar, maar kwam er nog niet helemaal uit. Bedankt!

  • Hans

    Script werkt prima. De 'setCustomVar' moet wel vóór de '_trackPageview' staan.

  • http://andrescholten.net André

    Hans, dat is inderdaad goed om te vermelden. De customVars worden meegestuurd met de pageview meting. Mocht de volgorede toch niet anders kunnen dan wordt het wel meegestuurd zodra iemand een nieuwe pagina bekijkt, je mist dan alleen de meting van de mensen die maar 1 pagina bekijken.

  • http://www.seo-optimalisatie.be Jacob

    Super! Bedankt voor het script André. Werkte meteen.