Screen Resolution Statistics

[David]

Screen resolution statistics are very important for decision-making when designing or redesigning any website. It's important to ensure that the vast majority of visitors can see the site as intended without horizontal scrolling and without things looking too squashed.

Many of the commonly used server-based stats packages (AWStats, Webalizer) do not collect screen resolution stats by default, so I use Google Analytics (www.google.com/analytics/ (http://www.google.com/analytics/)). It's easy to sign up and you can monitor as many websites as you like by simply including a bit of JavaScript in your site pages.

Here are the screen resolution statistics for CADTutor.net over that last 30 days:

14

These stats will be skewed in favour of higher resolutions because visitors to CADTutor.net are likely to be using higher resolution screens than the general population. Nevertheless, it gives a general idea of what is currently being used.

CADTutor.net was designed for comfortable viewing on 1024px wide monitors and for optimal viewing on 1280px wide monitors. The statistics suggest that only 4.3% of visitors are using monitors with a lover resolution than that. However, since the content (middle) column of the design is flexible, it can also be viewed at lower resolutions without the need for horizontal scrolling and although it looks a bit cramped at 800px wide, all the content is visible and the relationships of one design element with another remains intact.

The best way to preview your site designs at different resolutions is to use the Firefox Web Developers Toolbar. You can add as many different resolutions as you like and when an option is selected, the browser window automatically resizes to the given resolution.

15

[James]

Here are my stats over the same period:

FreeDigitalPhotos: 5.5% on 800x600. These visitors will get a horizontal scrollbar as I decided to make 1024 the minimum when I last re-designed the site.

http://www.websitearchitecture.co.uk/barker/forum/res.gif


I thought I would also post some figures for a beauty clinic website I manage. Its 800x600 visitors are also low: 5.19%. I expected it to be higher for a non-graphic/design site. So 800x600 really is a minority configuration now.

The best thing is to research the target audience as much as possible and decide whether to use a 800 layout.

http://www.websitearchitecture.co.uk/barker/forum/res2.gif

[David]

Thanks for the stats James. I must admit I didn't expect so few using 800. That's good news for us. In general, it looks like 95% of our visitors are using screen resolutions of 1024 or higher. Maybe that's the new standard we should be working to.

[Mia]

I'm suprised too. But very pleasantly - certainly worth considering using that extra space and designing for 1024.

Thanks for that.

[Matthew]

Suprise, surprise, looks like my comment in last weeks lecture about screen resolution was heading in the right direction. :)

Thanks James for your input on this topic.

Not sure if anyone will use these now but I have a link to some "block compostion templates" found in Osborne The Complete Reference Web Design: http://www.webdesignref.com/chapter2/ Here you can find a 640 x 480 and a 800 x 600 template for doing page mock up work. Need to bear in mind these are not exact size as David pointed out to me, there is a difference in the sizes of the dots on different monitors, they should be good as a guide though.

[Tom]

My stats are
1024x768
45.58%
1280x1024
15.79%
1280x800
13.92%
800x600
6.78%
1440x900
4.93%
1152x864
2.66%
1680x1050
12.64%
1280x768
0.29%
1000x1000
1.19%
1280x960
0.85%

And I am surprised to have more 'small screen' visitors than James!

Tom

[David]

And I am surprised to have more 'small screen' visitors than James!

Even so, 93% of visitors to the gardenvisit website are using a screen width of 1024px and above.

That seems pretty conclusive to me. The four websites for which we now have stats are a good cross-section and I think it's safe to assume that 1024px is a design standard that can safely be adopted providing that the content is at least viewable at 800px wide - in other words, wider pages should be flexible and not fixed width to avoid horizontal scrolling for those few visitors still using 800px wide monitors.

[Trudi]

Just checked my site and 99.55% of my visitors are at 1024x768 and above.

[Mia]

Can I ask how these stats are calculated: by visitors who are able to view at 1024x768 or who are actually viewing at that resolution?

I ask because I have noticed that in my organisation quite a lot of people have decent sized monitors but are still using 800x600 resolutions because they feel it is easier to read things onscreen.

Just checking because it might skew the figures...

[James]

Good question. I'm 95% sure it's "actually viewing" not "able to view". The data is gathered using javascript which has the ability to detect the screen resolution that is being used at the time of capture.

[Mia]

That's great, thanks James