Okay, so quite often I find myself in the midst of a discussion about screen resolutions and web site display widths. The screen resolution is the setting of each individual person who uses a computer, and based almost solely on their own preferences. (Of course, sometimes, you run into a person who doesn’t even know that they can change their screen resolution, why they’d want to, or much less, how…)

On most modern computers (yes, this is important… “modern”), the screen resolution options range from 800×600 pixels all the way up to 1280×1024 pixels. The first number relates to the width, the second to the height. The (somewhat unfortunate) thing is that by default, many systems come with the lower-resolution 800×600 - which makes viewing designs that are specific for higher resolutions pretty annoying, as you’ll have to use the scrollbar at the bottom of the window to see everything…

(Information on changing your screen resolution settings in Windows XP or Windows 98)

My personal preference? My settings are at 1024×768, and you’ll find that the majority of people who are familiar with the benefits of a higher screen resolution will have this setting - some go even higher, but again, it’s personal preference.

So here’s the thing about designing for resolutions: If you already have a website and a good stats tracker, and you know for a fact that the majority of your site visitors use 800×600 screen resolution, then by all means, design a fixed 800-pixel wide site for that crowd. (Example: Sites that are built for residents living in countries with less than “modern” levels of technology, or sites that are designed for those with visual impairments.)

However if you’re not sure, or if there’s an even balance, my vote will always lay with the fluid width design scheme. Fluid widths will automatically resize based on the end user’s display settings (screen resolution) and in almost all cases, you’ll find that the site will look fantastic on any computer with any screen resolution setting.

If you’re stubborn though, and you want to stick to a fixed width layout, please limit yourself to no wider than 800 pixels, including any and all padding, margins, and borders. Even the slightest scrollbar at the bottom of a browser window is unsightly and annoying. Oh, and don’t forget to make the background color or image flattering, if not interesting… us “1024 users” really can’t stand a site that has a black background for the content, with big white borders on either side. It’d be much nicer to see all black, or all white, or what have you!

Here’s an example of an 800×600 layout:
(click image to view on full screen - you may have to click the image again to get it to full size when it opens in a new window, regardless of your resolution settings)

Now, here’s that SAME layout, but fixed, and inside a 1024×768 resolution monitor (the yellow space is there to represent the default background color - it’s NOT a recommendation! ):
(note, if your settings are at 800×600, you will have to “magnify” the image and then you’ll see that “scroll effect” at the bottom of your screen - again, you may have to click the image again to get it to full size when it opens in a new window, regardless of your resolution settings)

Popularity: 57% [?]