The Golden Rectangle Last modified: 17-Sep-97

[ Home | TP | DB | Java | C++ | Server | Script | DevtMags | Design-Pattern | Net-News | Ref-Docs ]

This is possibly THE most important principle of web page design (IMHO!).
- the Browser's "Golden Rectangle".
OK, so it may be a close second behind Bandwidth-Friendliness!
Read on to find out what this is, and how it can help you improve the effectiveness of your web pages.

We also have pages providing more details of other related Internet and Web Technologies which you may find of use.
And of course, there are also our Rules for Good Web Pages for you to agree or disagree with!

The Golden Rectangle

The most important space in your browser window is that which is guaranteed to be on-screen even at the lowest resolution of 640­by­480 pixels. This area of "screen real estate" is actually smaller than you may at first think, given the toolbars and status bars at the top and bottom of the screen. This area is further reduced if you consider that the Macintosh browser window is narrower. This is what Heather Champ refers to as the "Bermuda Rectangle" - the bit of the web page to the right of a Mac's default browser window that people who do web design on a PC seem to always fill up. If you have a Mac, the first thing you have to do is resize the browser window (or possibly not! Is your page really worth that amount of effort?)

	Available Space
Screen Resolution	Mac		PC
Low Resolution (640W x 480H)	a	470W x 300H	a + b	580W x 300H
Medium Resolution (800W x 600H)	a + c	470W x 430H	a + b + c + d	580W x 430H
High Resolution (1024W x 786H)	a + c + e	470W x 600H	all	580W x 600H
All measurements are approximate, as the final size is determined by which toolbars are displayed.

This leads to an easy definition of the "Golden Rectangle" - an area 470 pixels wide and 300 pixels high at the top­left corner of the web page.

Therefore, to maximize the impact of your web pages, the most important bits of your web pages should be in this area of the page => top-left. Quite simply, this is the only section of the page you have any guarentee that a visitor will see, and should be used to provide a "hook" to catch their interest and make them went to stay and explore the page more.
(I'm not really quite sure how well the pages on this site fare against this sort of comparison, but something must be working if you have read down to here!)

Ways to maximise the use of screen real estate

Here are a few suggestions about how to increase the real or apparent space available on a web page. There are obviously many more, so please let us know your ideas.

Relative Sizing

Always use relative sizing for page elements that can sensibly be variable size, such as table widths. Certain elements do need to remain a fixed size, most notably images, but everything should really be left for the users browser to decide on the best sizing to use. At the moment, HTML is really about specifying the LOGICAL content and composition of a page, rather than the actual PHYSICAL representation. If you really do feel you must use exact sizing and positioning, then please don't assume that everyone has a 21" monitor like yours!

Animated GIFs

Animated GIFs allow several different pictures to be displayed in the space normally occupied by just one. They are obviously most useful for allowing a series of adverts to be displayed in a very small space, although some sort of JavaScript or VBScript assistance may be needed to ensure the viewer is dispatched to the document/destination they are interested in when they clicked a particular advert picture!
More sophisticated versions of this approach are possible with Java applets or ActiveX controls, but the principle remains the same.

Frames

Frames are usually placed as a separate "navigation menu" at the top-left of the web page, so they are always on display and easily accessible. This allows a large amount of useful links to be visible in a small space, and from the context and conventions of the web the user will know how to use them without you having to waste lots of screen space explaining that.

To be continued.....

The contents of this page are based on and inspired by an article by Heather Champ in the "Designer's Corner" column in the November/December 1996 issue of Web Designer magazine. The credit for working out the size of the various rectangles rests firmly with Heather.
I was prompted to write this page by a suggestion from Arndt Schoenewald that I have always believed in, but never quite got round to adding to our "Rules for Good Web Pages" article.

	Copyright © 1997 Software Technologies Ltd. All rights reserved.	Best experienced with Click here to start.	Best experienced with Download now.
	http://www.swtech.com/articles/webdev/goldrect.html