Journalists' Toolkit

Icon

A training site for multimedia and online journalists

Page Design Basics

By Mindy McAdams Updated 1 Jan 2011

This page is not about HTML or CSS (see the HTML and CSS Resources page). However, these simple principles can help you use CSS more effectively for Web page design.

Certain distinct regions, or areas, commonly appear on Web pages:

  • Header
  • Footer
  • Main Content
  • Sidebar(s)

To some degree, these regions have been inherited from print design. However, some elements from the print world (such as table of contents, page numbers, and indices) are not as useful in digital design.

The simple list above should be useful if you are designing a new site. Ask yourself if you need all of the regions. Then determine what each region should contain.

Main Content

The only region on the list that is essential is the Main Content area. Every page on the site has it.

However, the contents of the Main Content area (or container) will be different on each and every page. One task for the designer is to determine how much variation there will be in the unique contents of all the pages. For example, if some pages hold very long text articles, the designer will be concerned about line length and font size so that the text is very legible in spite of the quantity. On a page displaying a map, we are concerned about displaying the map at a size as large as possible while still accommodating the wide variation in users’ viewing environments (i.e., Web browser window width and height).

The Main Content area can contain a lot of very different assets, including videos, fill-in forms, interactive graphics, games, photographs with captions, lists of links, and all kinds of text items.

Header

In general, this area (or container) will hold the identification of the site — such as The New York Times nameplate, the title of a Weblog, or the Microsoft corporate logo. It might also include a tag line (as recommended in Steve Krug’s invaluable book Don’t Make Me Think) and the search box (ideally in the upper right corner, for languages that are read from left to right).

It may or may not hold the primary navigation for the site (see Sidebars, below).

Will the Header be exactly the same on every page in the site? This is a question to answer during the design process.

Can the site work well without a consistent header? It’s a very rare site that can function well if it’s “headless.”

The Header area usually extends across the entire top edge of the HTML page.

Footer

The Footer area usually holds copyright or Creative Commons information, identification of the author(s) of the site and/or identification of the corporate owners of the site, and links to the site’s privacy policy, “About Us,” and contact information.

Ask yourself the same questions that you answered for the Header region: Will the footer be exactly the same on every page in the site? Can the site work well without a consistent footer?

Usually we DO NOT duplicate the items appearing in the Header region. The footer contains different items.

The Footer area usually extends across the entire bottom edge of the HTML page.

Sidebar(s)

A Sidebar is a vertical region that is distinct from the Main Content area.

On sites that use a vertical stack of navigation links, or buttons, the primary navigation appears in a sidebar. If your navigation is in a horizontal array, then it belongs in the Header region.

A news site, for example, might have primary navigation links in a sidebar on the left side of the main page. The same navigation sidebar will appear on the left side of all story pages too. Story pages might also have an additional sidebar on the right side of the page. The right-side sidebar contains links to related materials, including videos and background information.

The Main Content area on such a news story page appears between the two sidebars.

Some sites use two parallel sidebars side-by-side; some use one sidebar; some sites have no sidebar at all. Sidebars can contain a wide variety of different assets, and their contents might change (thanks to script operating in the background) based on what is appearing in the Main Content area on the same page.

Using the Four Regions in Web Design

When you set out to plan and design a new Web site, or content package, your task can be simplified if you start by thinking about these four divisions of the page. For simple content packages, or for a micro-site, it is often possible to create one single page design that will work well for every page in the package. Only the arrangement within the Main Content area will need to change.

´╗┐In creating the CSS for the site, it is common to designate these regions as DIVs with the IDs header, footer, main, and sidebar. Of course, you may choose any ID names you like.

In HTML5, these regions will be designated with new tags, which can then be styled with CSS. See: Tips for HTML5, part 5: A closer look at selected tags.