Web Design Analogy

Analogy

An analogy may help you understand the different phases of web page development.

If you were writing an essay you might decide to do it in phases:

1. First you dump your thoughts on a sheet of paper or enter them into a word processor. This is your content.
2. Next, you go back and arrange them into headings and paragraphs. This is the structure.
3. Finally, you apply the formatting (fonts, line spacing, margins, etc.) that you are required to use. This is the essay's presentation.

Let's see brief examples of each...

Content

Step 1: Determining the content of your web page is similar to jotting down your thoughts on a sheet of paper or entering them into a word processor.

Link to demo page

Structure

The next step is to organize that content via a meaningful structure, similar in the analogy to arranging the text that you jotted down into headings and paragraphs.

For this task, you use HTML tags.

Link to demo page

Presentation

Finally, you format your text so that it looks good. In the essay analogy this step is like applying the formatting (fonts, line spacing, margins, etc.) that you are required to use.

For this task, you use CSS.

Link to demo page

Benefits

There are a number of benefits associated with layered web design. Here are some that have been gathered from across the web:

• Performance boost
  • Once the script or stylesheet has been downloaded by your customer the first time, it is cached. Then every other page that is downloaded loads more quickly in the browser window.
  • The layered approach ensures that content is loaded first, then the styles, and then the behaviors. The perceived performance boost results from the rendering sequence, which in turn improves the load times as pages are displayed.
  • The overall saving in bandwidth is measurable. Since the style sheet is cached after the first request and can be reused for every page on the site, it does not have to be downloaded with each web page. Removing all presentational markup from your web pages in favor of using CSS also reduces their size and bandwidth usage - by more than 50% in many documented cases. This benefits the site owner, through lower bandwidth and storage costs, as well as the site's visitors, for whom the web pages load faster.
• Standardization
  • When you write an external CSS file or JavaScript file, you can use that file by any page on your web site. There is no duplication of effort, and whenever the file changes, it changes for every page that uses it without you making more than one change.
  • All styling is kept in a limited number of style sheets. The positive impact this has on site maintenance cannot be overestimated - editing one style sheet is obviously more efficient than editing 10,000 HTML files!
• Ease of modular web design
  • While the layered approach aids with rendering of the website for the end user, it also assists the web developer in organizing and managing the strata of technologies into discrete modules as the website persists in a distributed form of content, styles, and scripting.
  • If you have more than one person working on a web site at once, you can divide up the workload without worrying about permissions or content management.
  • You can also hire people who are style/design experts to work on the CSS while your scripters work on the JavaScript, and your writers work in the content files.
• Accessibility
  • External style sheets and script files are more accessible to more browsers, because they can be ignored more easily, and because they provide more options. For example, you can set up a style sheet that is displayed only for screen readers or a script library that's only used by people on cell phones.
  • Some users are not able to read from a screen, and layered design allows the impaired to enjoy websites with enhanced usability through text readers or screen readers, which boosts user engagement.
• Backwards compatibility
  • When you have a site that is designed with the development layers, it will be more backwards compatible because browsers that can't use technology like CSS and JavaScript can still view the HTML. Your web site can then be progressively enhanced with features as browsers support them.
• Expand transferability
  • Websites will remain effective no matter the browser, device, or platform through utilization of the principals of layered design, including media queries, CSS3, and HTML5.
  • The separation of content from presentation makes it easier for site owners to reuse the content for other purposes, such as RSS feeds or text-to-speech conversion.
• Versatility
  • Separate styling rules can be used for different output media. We no longer need to create a special version of each page for printing - we can simply create a single style sheet that controls how every page on the site will be printed.

Here are some links that discuss this topic in more detail:

• What Is CSS?
• The Three Layers of Web Design
• Four layers of web development
• Understanding progressive enhancement techniques in web design
• Three separated layers of web development

You can find more about this topic by searching for "layered web design", "layers of web design", "progressive enhancement", and "unobtrusive javascript".