The Golden RectangleLast modified: 17-Sep-97
This is possibly THE most important principle of web page design (IMHO!).
- the Browser's "Golden Recrangle".
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 most important space in your browser window is that which is guaranteed to be on-screen even at the lowest resolution of 640by480 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?)
|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 topleft 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
(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!)
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.
The contents of this page are based on and inspired by an article by
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.||
Click here to start.
|Page created by: Jørgen Thelin (firstname.lastname@example.org)|