Web Page Layout

For each of your web pages, ask yourself "what is the purpose of this page?" That is to say, why does the page exist and what distinguishes it from the other pages on the site. The "primary content" of the page is whatever contributes to this.

The primary content should occupy the bulk of the page, and be the most prominent thing on the page. This should be obvious, but there are way too many high profile news sites where the news item or story is in a small font in the middle third of the page, with navigation and other items occupying 60 or 70 percent of the screen space.

The most prominent heading on the page should identify the primary content on the page, so users can determine at once if it is what they are looking for.

Specifics and Examples:

• With documents, the text/images are the primary content. With "index" pages, the links are the primary content.

• The primary content should never be in a small font. I strongly recommend that you don't set the font size on any extended blocks of text - you have no idea what the user's eyesight, monitor, or lighting are are like, so you should not try to second-guess their configured defaults.

• The primary heading should always be an <H1>, even if it is an image (for search engines, other automated systems, and users with voice synthesis interfaces). If the primary "heading" is an image, it must not look anything like a banner ad.

• Don't use animated gifs or moving special effects (unless they are the primary content on the page): they make it hard to focus on other page elements.

Who created the content and who put it on the web? In a world where nearly anyone can publish professional looking material, it's impossible to tell from general appearance alone how credible information is, or how trustworthy a service is. So it is important that every page contain information about who created and published it, or a link to such information.

How does the page fit into the rest of the site (or site section)? Unless the page is completely independent, it will usually connect with other pages on the site. It is important to show these connections, both to help provide context and to provide navigation. This does not mean a massive array of links to everything else on the site - it means connecting each page with related pages and with the larger sections into which it fits.

Every page should be self-explanatory. The headings and the contextual information together should provide adequate background information to someone who has seen no other pages on your site. Search engines will dump people straight to deep pages. (NB: this is separate to ensuring that every page has a good TITLE.)

Specifics and Examples:

• An organisation (or company or individual) logo or name is the obvious way to provide information about the publisher.

• Avoid "cute" page headings. Catchy headlines that don't actually describe the article may work ok in newspapers, but they are lousy on the web.

• Put a date on every page with substantial content.

• I'm fond of hierarchical menus like the ones at the top and bottom of this page, showing the "nesting" of content on the site. These provide navigation and context together, handle the addition of new pages easily, and scale to large sites.