I often see people go head over heals trying to make sure that the very minimal specs are included, the only problem, the minimal specs have changed, drastically! When I design a website or create graphics I need to remember that we want to be inclusive of the majority of the internet audience, if possible, all. The website needs to be usable to those running older versions of browsers, and lower settings. How do you determine which will work best for your site?

For starters, ask yourself “Who is my target audience?”. If they are pretty web savvy on the technical side they probably have more advanced settings, higher res and plugins. Is your target audience the average user? Or is your audience compiled of beginners? Maybe it’s a mix of all 3. You can choose to focus on one group or you can choose a web layout that’ll be mostly compatible with all 3. I recommend trying to include as many as possible if your site content allows for it. Of course there are times when the site content and target audience just don’t allow for this, there are exceptions to every rule.

So where am I going with this? Not long ago the average user had a screen size of 640 x 480, then the average upped to 800 x 600. Now the average is 1024×768 or higher! What does this mean? For a long time designers were told to design for 640 x 480, I still see designers doing this. Imagine what that 640 wide website looks like on a 1024 setting, you’ll have half a monitor of dead space! But you don’t want to design for 1024 wide and have the rest be ignored either. If you design for 1024 x 768 and have a right side menu, what happens if a 800 x600 user visits your site? Yup, that menu is cut off. Sure they can scroll over to see it, but will they notice it? So where is the compromise? For the most part you can ignore the 640 x 480 because as of 2006 almost no users actually use that setting anymore. A good percent still use 800 x 600 so let’s not veto them yet. So how do we make a website look good on both 800 x600 and 1024 x 768?

Your first option is to have a site that automatically expands to fill the screen. This is the ideal layout option, you can cover all the screen resolutions. The draw backs? If you have content that relies on a minimum width for text or graphical layout this can get tricky. When squeezed, graphics may stack, divs may move, or things start to overlap. (depending on your browser) So you use a minimal width, right? Wrong, not all browsers read the minimal width correctly forcing you to write workarounds to get it to work. So think ahead. Create the layout for the minimal and let it expand. Don’t layout graphics and divs to fill a 1024 x 768 space if you are going to let it contract to 800 x600. And don’t create a 800 x 600 expanding layout if it looks like poo once it’s expanded to 1024 x 768. Make sure it expands proportionally and doesn’t leave big gaps in your layout. If your layout just doesn’t work with expanding, the second option may be a good one to consider.

When you want a fixed width, what width do you decide to use? My recommendation is to stick with 800 x600. This way you aren’t going to have those users scrolling horizontally to see your page if its too wide. But what about the blank space left over for the 1024 x 768+ users? Make that space work for your site aesthetically! Some sites will look fine and the blank space will flow with their layouts. Others, need a bit more there visually. A pet peeve of mine is a page that is left open and not focusing the user’s attention to the content. The biggest culprit is unused, unproportioned white space. You have a bunch of text or pictures in the middle and a ton of white space all around, or to just one side. It leaves the user wondering what *should* be there, or attempting to scroll to see if there’s more content. On some sites this layout works fine. But on most, there needs to be some indicator of where the site starts or stops. On a 800 x 600 layout this is important when displayed on a 1024 x 768 screen. One way to achieve this is by adding a simple border, background color/pattern or both. Finding something to set the background apart, still compliment the site and not distract can really focus the user’s attention effectively. The use of blank space on your site is just as important as the content layout itself. Don’t let your users get lost or lose focus on your site.

What about graphics? Time and time again people state “Must use web safe colors”. What does web safe mean? When referring to web safe this means the 216 colors that are the web standard all browsers support. This was from a time when monitors were displaying only a 256 color palette. Now days most computers are set to 24 or 32 bit and can display 65,536 to 16,777,216 colors! How cool is that? The colors we use in graphics and websites are limitless! Only %3 of web users actually use the 256 set up. If you want to limit yourself to the 216 colors to make sure those %3 can view the colors correctly, then by all means, have at it! I’m sticking to the wider variety of colors to create an endless possibility of colors combinations and aesthetic beauty.

I hope this has helped you understand the affects screen resolution has on web layout and the options available.

Another great resource with even more statistics is: http://www.w3schools.com/browsers/browsers_stats.asp