Websites such as spaceark.net are still to be found on the Internet, with wild use of color and typography that does not follow the well-established cultural map of today’s websites.
4.1: Four working parts
As the web has matured over the past decade, the structure of web pages in text-driven information sites has become more uniform and predictable. Although not all web pages share the exact layout and features described here, most web pages incorporate some or all of these basic components, in page locations that have become familiar to web users.
— The Web Style Guide
When this class was first taught in 2001, no cultural map had been established for web pages or websites. It was an “anything goes” world, where web builders used dozens of fonts in dozens of colors, with no regard for readers. And they did it because they could.
As we approach 20 years of the World Wide Web, we now have that cultural map, a common way to use text and space that readers know and understand through years of Internet use.
The diagram below, a simplified version of one presented in Chapter 6 of The Web Style Guide, represents that cultural map. It’s familiar to anyone who has visited a business site or ecommerce site. This scheme has become the standard for sites built using content management systems, such as WordPress.
Today’s standard page
The “standard” web-page layout has four areas, each containing its own forms of content:
- The header sits at the top of the web page.
- It appears on every page, although it can be smaller on some pages.
- The header contains:
- a graphic identifier, such as a logo.
- a clarifier, a short statement of the site’s purpose.
- a standard navigation set.
- an optional search box, but only for large sites.
- The Web Style Guide authors write that the header is “like miniature versions of the home page,” providing site identity and global navigation. Headers are “the most visible component of site identity.”
Main content area
The main content area is the most flexible area of the page. It is where you can place your text, images, videos and graphics. The Web Style Guide offers detailed advice on this area, but here are a few essentials:
- Page titles. Every page should have a clear title at or near the top so the content of the page becomes immediately apparent. For many reasons, the page title should use an
- Breadcrumb navigation (optional). When your pages have a linear sequence, this navigation trail will help readers know where they are. a common practice is to put this at the top and bottom of the content area.
- Return to top link. With long pages that require scrolling, a return to top link is a nice feature. Put this right after the opening body tag:
<body> <a name="top"></a>Then use this link at appropriate locations down the page:
<p><a href="#top">Return to top</a></p>
- Subheadings. Get in the habit of using subheadings (
<h2>,<h3>,etc.) to make your content scannable. Subheadings let readers find what interests them.
Scan column, or sidebar
First things first: The scan column is optional. A common mistake in beginning web designers is to include a scan column — called a sidebar in WordPress — when the content is not there for it. Carefully consider if you really need a scan column. Some advice:
- Research supports the practice of locating lists of links, such as section navigation, in a left column. This class web page does this.
- The scan column is another possible location for a search box.
- On a site that you might use in looking for a job, think of putting your mailing address and contact information in the scan column.
A page footer must be on every page. This is the place for provenance:
- page author or, in large enterprise sites, responsible party
- copyright statement
- contact details, especially email
- links to related sites or to the larger enterprise
- a text version of your standard navigation links, for long pages
- social media buttons, such as facebook and twitter