Today's Average Screen Resolution?

ShadowDawn asks: "I'm looking to develop a website for average computer illiterate users and I'm just curious what the average users screen resolution is, now a days? I know 800x600 used to be the main size to develop for, but last I had seen 1024x768 was taking over. I was just wondering if anyone out there ran a 'normal' site that 'normal' people visit and would have some insight."

Comments

Based on your audience

[MrResistor]

If your intended audience is the average computer illiterate, you should probably expect plenty of people still operating at 800x600. I know a lot of people who are perfectly happy with their old K6-2 and crappy 15" monitor, and have no plans to upgrade while it still functions. It sounds like those people are your target demographic.

That said, here is my opinion on the metatopic of which this is a part: If you don't clutter up your site with a bunch of unnecessary formatting crap, flash nonsense, menus, table, frames, etc., it won't matter what resolution your users are running at. HTML reformats itself to fit the display quite nicely as long as you web developers allow it to function as it was meant to.

The vast majority of the time, "good design" means less stuff, not more.

Please test with different font sizes

[Matt Perry]

As others have said, you should design for any size screen. I would also like to encourage you to test your site with different browser font sizes. For people such as myself who are visually impared, being able to change our font size to something larger is very imporant.

When sites are designed using a fixed width such as 800x600, the layout aften depends on assuming a small font size so that elements align properly. My banking site is one such web site. When the font size is increased, elements can overlap to shift to the next line, losing some of the contextual imformation of their placement. At worst the elements may be overlapped by other elements thereby obscuring whatever it is that you needed to see. I see this happen often with navigation items.

My recommendation is that while you are designing your site, use the keyboard shortcuts for font increase and decrease in Firefox to test and make sure that the page looks as expected. Another option would be to create another Firefox profile with the font set to 20 points and the minimum font size set to 14. This is what I use in my Firefox settings. I have a small laptop screen with a resolution of 1400x1050 which, when combined with my poor eyesight, has made a font size like this required for easy reading.

I also want to stress that if the layout of the page breaks a bit, that is fine. Most users that browse with a large minimum font size are used to seeing the page mess up a bit. There are sites such as Slashdot and Wikipedia that continue to look fine at any font size. Others might be using absolute positioning for DIVs and may have navigational and other elements obscured when the font is large. The important thing is to make sure that the elements on your page that make it functional still work. If something isn't aligned correctly but it's not a big deal, don't worry about it. If the navigation is only partially visible because of the larger font size, then you should fix that. For example, last.fm has some display problems when a larger font size is used, but nothing that impeeds navigation or general usability.

Finally, let me stress that you should avoid specifying your font sizes using a fixed method such as pixels or points. Instead, please use a relative font size such as "x-small", ems, or a percentage. There are still many users that use IE. IE will not resize fonts that use a fixed specification such as pixels and points, even when the font size option in the browser is changed from the default.

Re:The answer is ...

[twoflower]

Surely the question isn't totally unreasonable. For example, say you have a 3072 x 2048 photo of a storefront that you'd like to have on a page. What's a good size for that to be reduced to?

As large as it needs to be, and no larger:

If that picture is not providing any useful information to the user (i.e., it's window-dressing, pun intended) and is merely a logo or other fluff, make it a few hundred pixels wide (200-400) and be done with it.

On the other hand, if this picture is intended to show how meticulous your building-exterior-cleaning service is, it would make perfect sense to to default it to 800 pixels wide so that is has sufficient detail. A little clever CSS can even show a smaller version to viewers with smaller viewports than that.