D-Zine - Screen Resolution :
TOOLBARS








Whereas the width is pretty much the same no matter how the browser is set up, the height varies a great deal.

The actual height left for the webpage will vary, depending on which menus, buttons, etc. the user has activated.

On a Windows 98 PC using MSIE 4.0 (version 4.72 to be precise), if only the menu bar is activated, the web page gets full window size less 80 pixels.

On the contrary, if all toolbars are activated the page gets full window size less 186 pixels.




Look at this example:

Only menu bar activated:

640x480
800x600
1024x768


All toolbars and status bar activated:

640x480
800x600
1024x768


As you can see, the visual height of the web page is an
elastic measurement.

On low resolution screens, the toolbars may use close to 40% of the entire screen. On high resolution screens, they will use at most close to 20% of the screen. In either case, the number of pixels used by toolbars, etc. is 186.

Therefore it is hard to make a fixed design with respect to the visual height. The result simply varies - not only from users with different screen resolutions but also from users with the same resolutions but different browser setups.

The main point in this is the fact that customization of browsers affects the visual height of the webpage -
but not the visual width!

This means that the width of the screen only varies with the resolution, while the height also varies with the customization of the browser.




It is strongly recommended that none of the navigation tools are designed to be outside the visual area of the opening screen - even in the worst case (640x480 with all toolboxes activated).

This means that the navigation structure of the page should be kept at the upper 300 pixels of the page. (Actually the upper 294 pixels to be very precise).

When designing pages you should therefore keep this division of the page in mind: The upper 300 pixels - and the rest!

The upper 300 pixels of a webpage is often referred to as being "above the fold". All newspaper editors know the importance of what is kept "above the fold" - it's what sells papers. On a web page the "above the fold" area sells the rest of the page.




In the samples below the "above the fold" area is shown using a lighter color than the rest of the page.

640x480
800x600
1024x768


 << PREVIOUS
READ MORE >>  
















DEVELOPER TIP!





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