How important is it to make your website layout fit on low-res displays?

Question

How important is it to make a website layout fit on 640 x 480 and 800 x 600 displays? For some time I have been designing with the assumption of at least 1024 x 768, but I haven't been doing it professionally (just on my site which is just a blog that only 10-15 friends read). Does anyone have any non-anecdotal statistics about the distribution of screen resolutions from real web users?

Note 1: "Non-anecdotal" means please don't give answers like "I know lots of people using 640x480" or "my mom runs in 800x600 so it must be really common." I'd rather have actual data (or links to actual data), especially if it is data about general users (rather than geeks).

Note 2: I'm not concerned with extremely-small displays like those on PDAs and cell phones (at least not at the moment). I'm just talking about desktop/laptop monitors.

Answer 1

I think the general assumption these days is that 1024x768 is acceptable, thats certainly the route I take. A good benchmark is to look at big sites like the BBC, they recently switched to a 1024x768 design. Thats not to say every site has to be that, for smaller sites I often stick to 800x600 just so the content doesn't look pathetic :o)

Here is the source I often use for web statistics with its august 2008 stats showing 800x600 at 7%.

Answer 2

Here's an interesting blog post that gives specific statistics based on 6 million hits during February of this year to this particular network's sites.

Top two: 47% 1024x768, and 30% 1280x1024

Answer 3

W3Schools tracks a variety of browser statistics, including display resolution. You can find the display resolution here: http://www.w3schools.com/browsers/browsers_display.asp

Of course, you should use statistics as close to your target audience as possible. These statistics are drawn from the browsers of people who browse W3School's site (primarily developers). Other target audiences are likely to have a different profile.

Answer 4

Valve collect data through steam on the capabilities of machines connecting to them, you can see the results here:

http://steampowered.com/status/survey.html

bear in mind these are gamer's systems and so tend to be more powerful than the average pc in the street, as you can see there's not many systems below 1024*768

Answer 5

I don't know if this is trusted info, but: http://www.w3schools.com/browsers/browsers_display.asp

Answer 6

Here's one link, though I don't know if they pull from their own logs or get these #s from other sources:

http://www.w3schools.com/browsers/browsers_display.asp

Answer 7

I just checked the Google Analytics data for all of the domains I monitor. The screen resolution for less than 800x600 is zero and for 800x600 it is 3-6%

Maybe you can get Google Analytics setup on the domain ahead of time and gather some information about the visitors.

Answer 8

you're running in my web browser. How certain are you that my browser is full-screen even if I'm using 1024x768?

Answer 9

If you can make your website support slightly lower resolutions that's probably worthwhile. That way people can run your website in a non-full screen window and it will still look ok and won't have ugly scroll bars.

Also, "netbooks" such as the Asus EEE are gaining popularity and they typically have small (9-10" screens) with very modest resolutions (e.g. 800x480 or 1024x600).

Answer 10

Whilst I agree that 1024x768 is generally a good minimum desktop resolution, I seem to have spent an increasing amount of time of late peering at websites through smaller panels - particularly Windows Mobile devices, the iPhone, and occasionally an eeepc at 800 x 480.

Whilst the eeepc might be unusual (and undoubtedly will be replaced by 1024x768 on the machine class) access by mobile devices is only likely to increase and it would be wise - especially if you're running the sort of site which people would want to connect to away from the desktop to be aware of how your site works on handheld devices.

Answer 11

Look, Monitors are getting bigger and people are wanting more and more. People like the bigger monitors. The only people that have small monitors would be a shared computer center or some old aged people.

@All, We need to join together as developers and require to only build apps on the 1024x768. If we all join together, we will make it the standard.

Don't ask what your monitor can do for you, ask what you can do to the monitor!

Answer 12

According to Jakob Nielsen's Alertbox, as of July 2006, 60% of monitors were set at 1024x768, so optimizing your site for that resolution is his recommendation.

How important is it to style your site for lower resolutions? I guess the answer to that depends on how your site looks at 800x600 (and below) ... if it's unreadable, then it's a question of the importance of that audience to your site. If you need every viewer, no matter their resolution, then you should work on styles that will produce a tolerable experience for the occasional 640x480 person. If not, you might try styling it as you have been, and work on alternate styles only when you have a business case for doing so.

Answer 13

add Google Analytics to your site, its free, the data will only be about your audience

Answer 14

Here is another link with statistics and discussion regarding browser statistics: http://www.upsdell.com/BrowserNews/stat_trends.htm

Answer 15

I think the real answer is to design your site such that it degrades gracefully in a lower resolution. Having bars to the right and left of the main column of content that won't resize and cause your site's main content to squish isn't really a good idea.

And like has been pointed out, just because a person runs at 1280x1024 doesn't mean that their web browser will be maximized - some people insist on running everything in a non-maximized window (I think the Mac used to enforce this). And this is to say nothing of the people who have ten toolbars and only run at 800x600 because the OS won't let them go to 640x480 anymore (and then they wonder why everything looks "fuzzy" on an LCD screen and why their eyes are going to shit)

Of course designing your site this way isn't always a luxury you have - sometimes the client wants it pixel perfect to what the Photoshop designed with an enormous monitor came up with. Just do your best with what you can and be prepared to have a "this is what you said you wanted" argument later (assuming you can't explain it to them successfully beforehand)

Answer 16

Could I suggest you use a auto-sizing layout that fits the browser window, however wide that happens to be? While you might design it to look best at 1024x768, people with lower resolutions (due, for instance, to poor eyesight or a cheap computer) simply can't use a higher resolution, and shouldn't have to scroll left and right to read every line of text.

Answer 17

This in an anecdotal answer, but it something to be aware of...

We designed a web app for a client that was to be used internally (really a thin-client intranet app). We were told that designing for 1024x768 was preferred as almost all of their users had that resolution or higher. In fact, we were told to ignore any problems that users running at lower resolutions reported since their internal help desk answer was "Set your resolution to 1024x768 or better and run with the browser maximized".

Right after the app was deployed, there were help desk tickets on pages requiring too much horizontal scrolling and some things not being positioned correctly but the resolution was reported to be 1024x768. What we didn't account for was users who use browser side-bars (history, bookmarks, RSS feeds, etc.). None of our developers used them, so it never crossed their minds. The not positioned correctly parts were true errors on our part. The horizontal scrolling was because we set everything to automatically resize but to stop horizontal resize at 768 (actually the client area width at 1024x768).

Also don't forget that users may change their text size settings to bizarre settings. Actually it's not bizarre when the user is sight-impaired, but it is important to remember to test for and accommodate it. Firefox 3 does a good job of proportionally adjusting text and images, but users running other and older browsers have less control.

Answer 18

A good practice is to design the core of the site within about 750 pixels, so that the 5%-15% of our audience who still have 800px monitors can read it without scrolling. You can then put less-crucial information (advertising, non-mission-critical features) in an additional 250px column to the right that will be visible to visitors with 1024px or more.

Also as jimharries99 suggests, internet-wide statistics for screens (or browsers, or whatever) may not match your audience profile, so you should use analytics to get a handle on your specific audience. For example, some of the sites we build get most of their traffic within a certain government agency that standardizes on IE6 (other browsers forbidden) and has a lot of 800x600 displays. Wired Magazine's audience, on the other hand, probably has bigger screens and more modern browsers than average.

Answer 19

I have a 1920 X 1200 screen size so I can have multiple windows open all at once and see them all. If a site tried greedily to use all of that space for itself, I would stop going to that site.

Answer 20

Personally, I design websites so that they'll appear as I envision them on a 1024 x 768 monitor. I'm aware that there are people who will window their browsers, and people who will also have bigger monitors and have it running full screen.

I feel that 1024 x 768 is the right level of compromise at the moment. At the same time, I try to make sure that my site degrades at lower resolutions acceptable to keep the people who have their browser running in windowed mode happy too. If push comes to shove though and I dont have a choice, I'd rather exclude the lower resolutions and have my vision intact so that the impact it has is not lost.

With modern browsers though, a user is able to zoom out, so depending on the content of the site the issue of degradability can be moot - if the layout is too big for the res, the user can simply zoom out.

Answer 21

Here's two reasons to design sites at 700-800 pixels wide.

1. Text is easier to read when the columns are not too wide. If you use 400-500 pixels wide text, you have room for a 250-400 pixel side column which works well for screens of all sizes.

2. Your pages print much nicer. I run a site with information that many users may print and with the sidebar taken disabled in the print css, the pages fit very nicely on a sheet of paper.