Web Page Structure

Defining Web Page StructureJust as web site structure can be defined as the relationships between the pages on a web site, these pages must also have their own structure. Page structure describes the elements used on a page, and their spatial relationship. Page design describes the overall appearance of the page.

Successful Web Page StructureThe key ingredients of successful web page structure include:
» Ensuring the appearance of every page communicates its content appropriately
» Avoiding the need to design every page individually
» Ensuring the common elements occupy the right amount of real estate

"Real Estate"

"Real estate" refers to the space available on a web page and can be broken down into two separate instances:
Screen "Real Estate"
» The screen is the part of the web page visible to the viewer as one unit
» Used to attract the viewer
» Used to present information
» Is limited by technology and physiology
Web Page "Real Estate"
» Totality of the logical unit of information available to the viewer
» Web page and the screen interrelate through vertical scrolling
» Horizontal scrolling should be avoided for physiological reasons
» Only weakly constrained by technology

It is important to remember that web pages are not only used for online viewing, but are also printed for offline viewing. The way in which a page is used will strongly affect its structure.
Web Pages for Browsing
» Are typically highly structured
» Have potential for video, animation and sound
» Should not contain very large blocks of text
» Can have many links
Web Pages for Printing
» Should contain limited use of colour
» Will contain no video, animation or sound
» Can be long, with large chunks of text
» Should not have too many links

A "chunk" of information is a quantity which is logically consistent and sufficiently complete in itself. Information "chunking" was developed for technical writing before the web existed to allow location and scanning of information quickly and non-sequentially, but is now a key concept relating to the design and structure of web pages for browsing.
A web page designed for browsing should correspond to a chunk of information, with related chunks being accessible by links from the corresponding pages. While it is possible to have chunks of different sizes, it should be remembered that overdividing information will generate too many pages and frustrate the audience, whereas overlong chunks (typically more than two pages as printed) are difficult to browse.
Example of a "chunk" of information:
"Vaio" is the brand name that Sony uses for its portable computers. This brand name has been developed over the past five years. The present machines range from a subnotebook with a 10" screen to desktop replacements with 15” widescreen displays.
Not a "chunk" of information:
"Vaio" is the brand name that Sony uses for its portable computers. Its competitor, Dell, uses the name "Inspiron". Sony’s Vaio’s range from a subnotebook with a 10" screen to desktop replacements with up to two hours of battery life.