Designing Websites for 1024x768 Screen Resolution

Home

January 25, 2007

The very first thing you need to do when beginning the graphic design of a Website is to make two related decisions:

Will the Website be a fixed size, or will it stretch (or shrink) to fit the visitor's screen resolution and
What screen resolution will you optimize for?

For a while, 800 x 600 at fixed resolution has been very popular. And for a while, 1024 x 768 has been the most common screen resolution used by Web surfers 'round these parts. Take a look at my stats from last week:

	Screen Resolution	Percent
1	1024x768	63.81%
2	800x600	10.81%
3	1280x1024	10.30%
4	1280x800	2.70%
5	1152x864	2.67%
6	1440x900	1.57%
7	1680x1050	1.17%
8	1280x768	1.17%
9	1600x1200	1.06%
10	1280x960	0.95%

So, if that is anywhere near typical, most of the visitors to those 800x600 fixed width Websites are seeing a lot of unused real estate on their screen. That probably accounts for the recent comeback of fancy page background patterns I've noticed over the past couple of years.

Just as 640x480 bit the dust, it looks like 800x600 could be nearing it's demise in the next couple of years. Not yet though. Ten percent of potential customers is a lot of people to give the finger to by placing crucial content outside of their 800x600 comfort zone. Here are my recommendations:

Use a page design that fills the screen at 1024x768, but has no crucial content outside of the 800x600 box.
Look at the page design at the different screen resolutions listed above that have a visitor percentage of 2.5 or more.
Optimize the page for 1024x768, but make sure it still looks good, and displays crucial content at 800x600 and 1280x1024.
Make sure the page design doesn't fall apart at 1280x800 or 1152x864.

I expect that all those people surfing with 1024x768 screen resolution are getting pretty bored of seeing that 800x600 stripe down the middle of their screen, no matter how pretty the background pattern is. Designing for 1024x768 will make your Websites stand out, and give at least the appearance of better use of screen real estate.