Slashdot Mirror
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."
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.
Under capitalism man exploits man. Under communism it's the other way around.
62% = 1024x768 = 947x578 average viewport
24% = 800x600 = 755x419 average viewport
8% = 1280x1024 = 1150x797 average viewport
Also, I want to note that some of our site is designed for 800x600 because of layout issues. For the stuff that does resize, we don't allow it to resize below 800x600. It's hard enough to make things look good at low resolutions, and our theory is that below a certain resolution we'd rather have people scroll than have the site look like crap.
If you don't want crime to pay, let the government run it.
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.
Slashdot: Failed Car Analogies. Amateur Lawyering. Anecdote Battles.
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.
--
Twoflower
*TEST IT* in 800x600, 1024x768, 1600x1200, whatever, but don't design it for something. It should work fine in all resolutions, not having half the page wasted on blank space, or text overlapping, or any other problem that comes from bad web developers saying "thats okay, it works in what I designed it for"
In 1600x1200, Slashdot's lines of text show up uncomfortably long. In a case such as this, should I just suggest that the user unmaximize the web browser window? And what should one do about the blank space between, say, the Slashdot logo at the upper left and the topic icons at the upper right? And what about advertisements, which advertisers typically provide at fixed pixel sizes?
- C.