How commercial sites design their content so that it will be functional on most every computer monitor

                                                                                                                                                                 go back

Basic Rule: Try to get your content to fit on the screen. If you have too much information to fit on the screen, it's OK if the user has to scroll down to see it, but the user should never have to scroll sideways.

How a page fits on the screen largely depends upon the resolution of the computer monitor that displays the page. Here are some recent statistics on how people have the resolution set.

MONITOR RESOLUTION

 

   640 X 480

12.72%

   800 X 600

54.20%

   1024 X 768

25.78%

   Other Sizes

 7.30%

Many commercial web sites make their page content around 600 pixels wide using fixed width tabular structure so that it fits comfortably on the lesser resolution screens. On a 640 screen it all shows if the browser window is made to nearly fill the screen. It fits very comfortably on an 800 screen--you don't have to make your browser window huge to see it all. Finally on 1024 screens, you can have two browser windows open and see most of the content of both pages. Right now, 590 or 600 is the most commonly used page width among major commercial sites.

Here are some examples for you to check out: These were the 10 most popular sited in July of 2000.

Yahoo: (640 pixels wide)
AOL.com : (585 pixels wide)
msn (Microsoft Netowrk) : (608 pixels wide)
Microsoft : (Their headings are ste at 100% and the main content is 618)
Microsoft Passport : (608 pixels wide)
Yahoo GeoCities : (675 pixels wide)
Lycos : (600 pixels wide)
AltaVista : (100% of screen)
ebay : (600 pixels wide)
amazon: (100% of screen)

So, indeed, most of the top sites use a fixed width layout. This is especially important when you have to organize a lot of information on the screen and you want to precisely control the layout. For example, notice how the content layout of the ones set at 100% changes somewhat as you resize the browser window, but the fixed width sites retain their exact layout as the browser window is resized.

go back