November 22, 2007
One of the fundamental decisions for a web designer to make when working on a new site, or updating an existing one, is what canvas size to allow themselves.
At the risk of showing my age, when I first started working on the web one of the key questions was how the site would look for those using a monitor with a resolution of 640×480 (for the younger readers: this wasn’t THAT long ago!)
Thankfully, time and screen sizes moved on.
When we updated the design of Trade Me late last year we increased the standard resolution that we supported up to 1024×768, although with code in place to ensure that the site still works well at 800×600.
If you’re interested load up the home page and try re-sizing your browser window - you’ll notice that, thanks to the magic of JavaScript, at 800×600 the logo and advertisment in the top-right corner jump up above the tabs and the font size on the category links in the body of the page is smaller.
By comparison, Xero, which has slightly more modern browser requirements, uses a fixed-width design which more-or-less fills the screen at 1024×768.
Why is this stuff important?
Well, as it turns out, people are not so quick to increase their screen size or resolution as web designers like to think.
Whenever I speak to a tech crowd I normally ask for a show of hands from anybody who is using a low-res screen (lately that has been 1024×768 or less). It’s unusual for anybody to raise their hand. But, out in the real world there are still plenty of people browsing at that resolution.
In fact many thousands of them:
Using the Neilsen Online stats for September ‘07 of the ~3.5 million unique visitors to Trade Me during the month around 15% of them were using a resolution of 1024×768 (that’s 515,000 visitors) and even more incredibly just over 4% were using a resolution of 800×600 (that’s 145,000 visitors). Many of these people will be using a monitor that is capable of a higher resolution, I’m sure, if only they could work out how to increase it!
At the other end of the spectrum there are a number of different very large resolutions now in use. I’m typing this on a screen that is bigger than could have even been conceived of in the late 1990s, which of course makes life difficult for sites like Trade Me that use a liquid design.
Where it really gets interesting is when you look a little further down the list of browser resolutions. For example, the fifth most common resolution, with 1.82% market share is 214×138. That’s pretty small!
After I mentioned these numbers at the WDANZ conference I spoke at in Auckland a few months back Harvey Kane from RagePank picked up the analysis and came up with some even more interesting findings.
He made the observation that what really matters is the number of horizontal pixels available.
He looked at the Trade Me data and found:
| Horizontal Pixels | Market Share |
|---|---|
| 400 or less | 14% |
| 800 or less | 22% |
| 1024 or less | 45% |
| 1280 or less | 77% |
That is a lot of people using little screens! Presumably many of them handheld/mobile devices?
So, there might be a role moving forward for those of us who remember designing for tiny resolutions after all! 🙂
The lesson from this:
Design for your audience, not just for yourself, and always remember that they are probably nothing like you.