spaceark.net

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

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:

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:

Footer

A page footer must be on every page. This is the place for provenance: