Separating structure, content and presentation: the benefits of layers

This article look at the benefits that result when we treat structure, content and presentation as three largely separate layers.

Benefit 1: Layer-based Website production

When we separate structure, content and presentation into three layers, we need to consider each layer's design independently. This turns a layers-based Website production into a systematic but simple process:

  1. Determine the needs of the audience (this will form the basis of the design for all three layers)

  2. Design the structure, based on audience needs

  3. Define the content, based on the structure and audience needs

  4. Design the presentation, based on the structure, content and audience needs

This systematic approach is obviously valuable when large teams collaborate on monster projects. It also benefits individuals and small teams, because it helps them focus on one layer at a time, effectively allowing them to wear one design-type hat at a time.

Benefit 2: Problem-free updates and redesigns

When the structure, content and presentation of a Website exists in separate layers, we can update, change or redesign any layer without affecting the others.

In 1999 the design of a typical 30-page Website would have been controlled by numerous embedded tables, font tags and spacer images. The markup for the Website's menu would also have been embedded in each page. If the menu indicated the active page, the markup for each page's menu would have been unique. As you can imagine, adding, deleting or moving a page (normally a simple structural change) would be a tiresome process of editing each page that referred to the old or new page. Making small changes to the presentation was not trivial, and you had to be careful not to inadvertently alter the presentational markup when adding or deleting content on a page. Talk about getting context, presentation and structure mixed up.

When we separate structure, content and presentation into separate layers, we can change the structure without altering the presentation; we can create a major redesign of the whole website's presentation, without touching either structure or content, and we can delete or add content, and update the structure within seconds.

Benefit 3: One page that works for all browsers - and cellphones too

We have more browsers today than ever before. Blind visitors browse using screen readers. Cellphones, cars and PDA's are online, and who knows, it might be your fridge next year. Now that is cool, but how do we move forward with our Websites? Do we need to determine the type of each of these browsing devices, and send them unique markup and scripts that they can understand?

Rather not. Remember the browser wars of the late 90's? Netscape and Microsoft tried to lock users of their browsers in, by dishing up propriety markup that only worked in their own browsers. In an effort to get consistent presentation in all browsers, ever-resourceful code-writers created browser-optimised markup and scripts. Websites that contained complicated, buggy markup chewed up even the biggest budgets, but they became obsolete whenever a new version of the browser became available. Ouch.

To handle the requirements of different Web browsing platforms and devices efficiently, you need to separate structure, content and presentation into layers and use Web standards to encode them. In English, that means you write your pages in XHTML, use CSS to take care of the presentation, and be disciplined and consistent in your implementation. For more information, read "Designing with Web Standards" by Jeffrey Zeldman, or find a Web designer that is passionate about Web Standards and considers Eric Meyer's books to be bed-time reading.

If Websites conform to Web standards, and are designed in layers, they will be understood by PC and Mac browsers (war heros and modern ones alike), and even the online toys favoured by geeks and yuppies.

Benefit 4: Faster and Cheaper

Well-designed Websites provide faster download times and cost less to operate, simply because they contain less code. It was not uncommon for half of the code of a typical 1999 Webpage to consist of redundant font tags, table cells and spacer GIFs, not to mention scripting code intended for various browsers and browser versions.

Today we can structure our content with streamlined semantic markup, and a style sheet that goes into the browser's cache after the first page view, which takes care of presentation. As the size of the files goes down, the Web server's load goes down also, turbo-charging the visitor-experience.

The Website also becomes cheaper to operate, because the majority of service providers charge for the bytes that visitors download. For an image-rich Website, it could be a 20% saving; for a mostly-text site, about 50% could be saved.

Benefit 5: Search-engine friendly pages

Search engines crawl Webpages to index elements such as headings, definitions, lists, pages, descriptions and keywords, links and even paragraphs - but only if they can these elements. When the content of a page is embedded within presentational markup, but without a clear structure, how do we expect search engines to make any sense of it?

On the other hand, if we use semantic markup to encode the structure of our pages - markup that describes the content rather than trying to present it - a crawler can easily process the structure of the content (heading levels, lists, definitions, etc). If the meta-tags of the page correspond with the headings and content, the page will get a higher rank than otherwise, and the page will float towards the top of the search engine's results.

Summary

The advantages of separating structure, content and presentation into three distinct layers are:

  • Systematic and simple Website production

  • Problem-free updates and redesigns

  • Compatibility with all browsers, screen readers and Web devices

  • Faster Websites that cost less to operate

  • Better search engine rankings

I wish we knew in 1999 what we know now. Don't you?