D-Zine - Fixed Design - 800x600 :
Vertical/Horizontal Divisions


As it was discussed in the article about screen resolution, the visual height of the page varies both with screen resolution and customized browser toolbars.

This brought us to the conclusion that:
The navigational structure of the page should be kept at the upper 300 pixels of the page.
(Actually the upper 294 pixels to be very precise.)

This is still true even though an 800x600 pixel screen resolution actually has a visual page height of 414 pixels (the rest of the screen being used by the browser toolbars, etc).

As you will see later on this page, limiting the navigation structure to fit the visual height of 640x480 pixel screens but not to fit the width, does not necessarily ruin the page - even if it's viewed at a 640x480 resolution.

In the samples below this area is shown in a dark gray color.


This is our first logical division of the page: Into the upper 300 pixels and the rest!


Many webdesigners suggest that the entire page should be viewable even on 640x480 screens.

This is certainly true as far as the main navigation structure of the page is concerned.

However, the main navigation structure and the main content of the page can be kept within the visual dimensions of a 640x480 pixel screen without limiting the entire page to a width of 640 pixels.

In a 800x600 pixel fixed design the remaining part of the screen (when viewed at higher resolutions) is left empty. However, this area can easily be used for secondary navigation options, secondary banners, secondary links, etc. without ruining the page when viewed at the lowest resolution of 640x480 pixels.

The first thing to remember is:
If a page needs a scrollbar there aren't 800 pixels available!
The scrollbar itself will take up 20 pixels, leaving only 780 pixels for the page.

Look at these examples:


Unlike a fixed design at 620 pixels, the empty space that appears on 1024x768 screens does not ruin the design completely.

The effect can be limited even more by centering the content.

Look at this example:

Centering the content definitely makes the unused space less obvious. (However, it is not as dramatic as in the case of a fixed 640x480 design)

Therefore, if you decide to design for 800 pixels width you might want to center the content, but it is not required.



     "Better Than Books - As Easy As It Gets!"