Skip to main contentSkip to section navigation
Web Style Guide

Page headers and footers

Many Web authors surrender to the giddy thrills of large home page graphics, forgetting that a Web page is not just a visual experience — it has to function efficiently to retain its appeal to the user. Remember that the page builds its graphic impact only gradually as it is downloaded to the user. The best measure of the efficiency of a page design is the number of options available for readers within the top four inches of the page. A big, bold graphic may tease casual Web surfers, but if it takes the average reader thirty seconds to download the top of your page, and there are few links to be seen until he or she scrolls down the page (causing even longer delays), then you may lose a big part of your audience before you offer them links to the rest of your site.

Page headers: Site identity

Careful graphic design will give your Web site a unique visual identity. A "signature" graphic and page layout allows the reader to grasp immediately the purpose of the document and its relation to other pages. Graphics used within headers can also signal the relatedness of a series of Web pages. Unlike designers of print documents, designers of Web systems can never be sure what other pages the reader has seen before linking to the current page. Sun Microsystems's many Web pages and subsites all include a signature header graphic that includes basic navigation links:

Screen shot: Sun Microsystems page header

Even if you choose not to use graphics on your pages, the header area of every Web page should contain a prominent title at or near its top. Graphics placed above the title line should not be so large that they force the title and introductory text off the page on standard office-size display screens. In a related series of documents there may also be subtitles, section titles, or other text elements that convey the relation of the displayed document to others in the series. To be effective, these title elements must be standardized across all the pages in your site.

Page footers: Provenance

Every Web page should contain basic data about the origin and age of the page, but this repetitive and prosaic information does not need to be placed at the top of the page. Remember, too, that by the time readers have scrolled to the bottom of your Web page the navigation links you might have provided at the top may no longer be visible. Well-designed page footers offer the user a set of links to other pages in addition to essential data about the site.

The pages in the IBM Web site all carry a distinctive footer graphic with a consistent visual and functional identity:

Screen shot: IBM page footer