Standard Screen Resolution

.. is it me or is the world getting bigger?

This is an update to an older post of me: A new Standard in screen resolution?. In which I state that you should design your pages for different media (by serving the correct stylesheet using the media attribute) and that you could also serve different stylesheets by detecting through JavaScript the user agents viewport size (in normal language: the height and width of the browser window).

That's all very clear. I think.

But ..

Yes, there is always a but. You have to be unobtrusive with JavaScript as we all know.

If JavaScript is turned off we still need serve a reasonable styling. (If CSS is turned off as well we better have design a semantic page!) So, the best approach imho is to design for a screen resolution that will suit the most users.

That means you need to find the size that will fit most visitors. Through some web statistics this can be achieved quite easily.

Give me the data, Data

I have checked the statistics of a Dutch insurance company for this year (2007 until 20th April) and that means a total of 846,278 visitors with a shocking number of 436 different screen sizes!

When put these in a bubble graph width screen width and height as axes we see the following picture. For the sake of argument we'll forget about handhelds for now.

What we see is that the biggest slice of visitors have 1024x768 screen, 56% of them. So that seems like reasonable standard screen size. But there is still that blob of 800x600 screen users. So what happens if use the 1024x768 size as a basis. We'll make it a bit narrower to cater for the browser chrome. We'll use a screen width of 960px.

If we use this number we'll miss out about 6.5% of our visitors. Well, not exactly miss them. These users will most likely see a horizontal scroll bar. Some people say that's not done, but it still is the approach we took at the insurance company. Our design is such that we have a sidebar on the right and the main content on the left. This main part is less than 800px wide so we decided that even though the visitors with narrow screens would still see the most important bit of the page. The sidebar is extra, optional content.

Originally we had designed the site for 800px wide which would potentially be too wide for 0.09% of the visitors. These would mainly be handheld visitors. They would get a different stylesheet anyhow.

So, what's the conclusion?

I would say that it makes perfectly sense to design for a screen width of 1024px. Only a small portion of the visitors will suffer from that. But the other way around if you design for an 800px width you will serve the vast majority of your audience a lot of wasted screen real estate.

On top of that if you would implement the JavaScript screen size detection as referred to in my previous post of the 6.5% with a small screen would only suffer if they have JavaScript turned off. My numbers for that are that only about 5% have that turned off. So most likely less than 1% will suffer from your decision to use the width of 1024px as a design parameter.

Final note

Maybe one day we will all have these huge screens like two visitors that we had: 5120x2048! I would sure like one or is it a stack of 10 monitors?