Web pages do not look the same on all screens!   The main reason is that different screens can show different numbers of colors and details.   The details a screen can show are determined by the number of pixels (dots) on the screen. The more pixels the more details.   It is important to understand that the number of pixels is not related to the physical size of the screen.   Two 15" screens can have different screen resolutions.
 
Look at this example showing the same web page viewed on the same monitor at two different screen resolutions:
     

800x600 pixels  

1600x1200 pixels

Current Screen resolutions to date:-
Resolution Name Widescreen Resolutions
512x384 852x480
640x480 1280x720 WXGA
800x600 1280x800
1024x768 XGA 1365x768 WXGA
1152x864 XGA+ 1440x900 WXGA+
1280x960 1600x900 WSXGA
1400x1050 SXGA+ 1680x1050 WSXGA+
1600x1200 UXGA 1920x1080 WSXGA
2048x1536 QXGA 1920x1200 WSXGA+
3200x2400 QUXGA 2560x1600 WQXGA
4000x3000 3840x2400 WQUXGA
6400x4800 HUXGA 7680x4800 WHUXGA
   
Resolution % of Internet Users
Higher than 1024768 85.1%
1024768 13.8%
800600 0.6%
Lower than 800600 0%0.5%
Unknown  
One of the most limiting parameters in designing for the web is screen resolution. The average web user may not even realize it, but we are well aware that websites do not look the same on all computers. How do we design sites that look acceptable on many different resolutions?

The standard screen size that we used to design for was 640 pixels wide by 480 pixels high. Several years ago, this was the standard screen size. Today, newer monitors support higher resolutions than this -- some going as high as 1600 pixels wide! How are we supposed to know what size screen to design for?

It's hard to get a handle on what the majority of users have their resolutions set at. There are statistics sites, server stats and polls -- most of these report that 800 x 600 is the average resolution people are using. Then again, it's hard to get a handle on how reliable web statistics really are. Some people feel that as more time passes, we'll be able to take advantage of this screen space. 

Or will we? Just because people have hardware that supports hi-res imaging doesn't mean they are going to have it set high. I know several people who have 20" monitors set at 640 x 480 because they have trouble reading the text at higher resolutions.  I have a 19" monitor which will support a maximum of 1280 x 1024. Most of the time I have it set at 800 x 600 simply because I know this is what most of my audience is using.

It always makes me shake my head when I'm surfing at 800 x 600 and come across a website with a scrollbar running horizontally at the bottom of the screen. It's a common mistake made by new web developers who either feel the world is using the same high resolution that they are, don't know there's a difference between screen resolutions, or worst of all, simply don't care.

Before we go any further, let's look at the differences between resolutions for one of my sites, Dad's Porno Mag. (No, it's not an adult site, just a Los Angeles band with an evocative name.) We recently redesigned their site to optimize it for 800 x 600 at their request.

The clients wanted to take advantage of using more of the screen area -- our job was making sure that while the people with larger screens may see some "bonus" information, people surfing at 640 x 480 and with WebTV, a resolution of just 544 x 372, would be able to see everything they needed to see -- in other words, the site needed to degrade gracefully.

Before we go any further, let's look at the differences between resolutions for one of my sites, Dad's Porno Mag. (No, it's not an adult site, just a Los Angeles band with an evocative name.) We recently redesigned their site to optimize it for 800 x 600 at their request.

The clients wanted to take advantage of using more of the screen area -- our job was making sure that while the people with larger screens may see some "bonus" information, people surfing at 640 x 480 and with WebTV, a resolution of just 544 x 372, would be able to see everything they needed to see -- in other words, the site needed to degrade gracefully.

 

SCREEN RESOLUTION EXAMPLES

 

800 x 600

 
 

1024 x 768

 
 

1152 x 864

 
 

1280 x 800

 
 

1400 x 900

 
 

1600 x 1200

 
 

1900 x 1200

 
 
Throughout the entire site, anything in the right area of the screen is a graphic effect not crucial to the entire site. Because this site is graphic-intensive, all sections beyond the homepage are in frames to reduce load time (the navigation bar stays onscreen and only needs to be loaded once.) Frames are a discussion for another column, but you'll note that the frames are also optimized similarly -- nothing outside the width of 640 pixels is information crucial to navigating the site. 
 
Do I design for 800 x 600 most of the time? Yes and no. If a client specifically requests it, we do -- but I never put any information in that area that is crucial to navigating the site. If they do not specify, we design something at 640 x 480. In the case of this site, I used tables to lay out the content in a way that's flexible at all resolutions, including WebTV.
 
Nobody likes the dreaded horizontal scrollbar. Even more importantly, most of them are not going to scroll over to the right to see what it is you've hidden over there. If you are going to design for any resolution higher than 640 x 480, keep this in mind. 
 
Nobody wants to be told how large their screen should be. "Best viewed at 1024 x 768" is just a euphemism for "I was too lazy to consider how all of my audience might view the site and designed it for my monitor." I assure you, no users are going to change their screen resolution just for you. Most of them don't know how, don't want to, or don't even know what that terminology means.
 
Another scenario which more people are taking advantage of is multiple browser windows. The browser Opera allows several windows tiled within the main browser window. Users may split their screens between two sites, or more simultaneously. And yet another issue, which has only begun to come into play, is that of other devices surfing the web. People are now using handheld devices and cellular phones to view web content. How will your site look on a 2" screen?
 
I saw a website recently which had all of the content right-justified, and the developer appeared to have built the site at 1280 x 1024. Even at 800 x 600, I had to scroll almost two screens to the right to see any content! The site had a message board, and users were being very vocal about the poor design. The developer was responding vehemently to their posts, clinging tight to his notion that what he had done was "an artistic effect." No, it wasn't. The users recognized this, why didn't the developer? So many developers fail to look at their own work the way a user will, or better yet, sit down with some users and get their opinions on the site -- their honest opinions.
 
Besides, the web isn't about art. It's about presenting information in a way that can be seen and utilized by the majority of your users. If it happens to be presented attractively on top of that, you've done very well.
 
Summary:
  • Consider all screen resolutions when designing your sites, not just the one you happen to use.

  • Sites that take advantage of extra screen space must degrade gracefully for users with lower resolution.

  • Above all else, usability of your content should be your main focus.