What Everybody Ought to Know About Web Design

An Introduction to Standards Based Design Theory

If you are a web designer you have no doubt heard by now about the benefits of semantic mark-up, separating content from presentation, and using valid XHTML. If, however, you are part of the 99% of the population who has no idea what I am talking about then stick around because this article is for you.

The above web designer jargon is part of a web site construction method commonly known as standards based design or web standards. The overall concepts of standards based design affects far more than just the designers and programmers who use them. They affect everyone who uses the web including site owners and visitors. Understanding web standards and why they are so important is critical to anyone who wants to own, operate, or build a modern web site.

Standards exist in every industry. Why not web design?

Imagine building a web site as something similar to building a house. When building a house certain standards and conventions exist to ensure the structural durability, quality of work, and compatibility of the design with other products. However, these standards did not always exist and even when first introduced the standards took a few years to gain widespread acceptance.

If you have ever lived in an old house (like I have) then you can see first hand what I am talking about. No modern contactor would dream of using old newspapers as insulation or just “eyeing it” when constructing the frame. The resulting room would be a not-quite-square fire hazard that was almost impossible to keep warm. But that was exactly how houses were built before modern standards were introduced.

The web today is just emerging from its wild-west phase where designers were forced to use a “do whatever it takes” mentality to get a web page looking right. This resulted in a creative use of resources (think newspaper insulation) that served their purpose, but created other problems for the site. The old techniques that were used to create web pages during this Dark Age were a necessary evil. There was literally no other way.

The W3C - Bringing Order to the Chaos

Eventually a working group known as the World Wide Web Consortium (W3C for short) was created to standardize the way in which web pages were created. The W3C created a series of recommendations that specified how a web page should be coded and how a browser such as Internet Explorer or Firefox should display the pages. These collective recommendations are known by the web developer community as web standards.

The Reason Standards are Important

So what’s the big deal anyway? A web site designed using old-school techniques can look exactly the same as a site designed with web standards in mind. Why should I, as the owner of a web site, care what methods were used to build it when the end result is the same? The answer my friend is in the following:

• Content integrity
• Future-proofing
• Surprisingly easy updates and changes

A non-standards compliant web site is notoriously difficult to change or update.

Let’s go back to our house analogy for a second. Imagine that I have ordered a house to be built. I want that house to be red with fancy molding on the walls. I don’t care how it’s built as long as I get my red walls and fancy molding. One month later I get a call from my contractor saying that the house is finished (it was a small house). I inspect the finished product and sure enough the walls are red and I have my fancy molding. The house looks the way I wanted, serves the purpose I need, and I am happy.

Now I am a fickle person so one week later I decide that red is too angry of a color for my taste and the fancy molding is so 1999. So now I want the walls of the house to be purple and the molding to be art-deco inspired. But as it turns out, the contractor did not follow the standard house building methods. Instead of painting the walls he installed wood that was dyed red and instead of applying factory made molding he carved it straight into the wall. The only way to change it would be to rip off every board and replace it with a new one. Not an easy task. The contractor built the presentation of the house directly into its structure.

Now replace the word “house” with “web site” and the problems remain the same.

A non-standards compliant web site is notoriously difficult to change or update.

Let’s go back to the analogy for one last example. Let’s say that after two weeks I hear numerous complaints from my guests that the house is too dark. I want to add a skylight to fix this issue. Adding a skylight is not an overly complicated task on a standard house, but on this non-standard house the roof was built out of large solid wooden blocks shaped like a roof. Adding a skylight will require a large amount of work and time. The problem here is that the roof was built out of materials never meant for roofing. The roof looks right but causes problems later on.

This predicament is exactly what happens with non-standards compliant web sites. Code is used in places that it was not meant to be used to achieve a purely visual effect. For example: The HTML table was designed to be used for tabular data such as a multiplication table. Unfortunately the table has been misused over the years as a means for forcing page layouts, resulting in bulky and hard to modify code.

A non-standards compliant web site costs unnecessary time and money to maintain.

The bottom line is that it will save you time and money

The Benefits of Standards-Based Design

So what are the benefits to you as a site owner/operator? Why should you insist on a web site using the W3C’s recommended standards? The bottom line is that it will save you time and money.

Presentation is Separate from the Content

A standards based design separates your actual content from the visual presentation completely, which allows for greater flexibility to change colors, fonts, and even the layout with only a few lines of code.

Browser Compatibility

A standards compliant web site also ensures the greatest usability across the largest number of browsers. The modern browsers (Internet Explorer 7, Firefox 2.0, Opera 9, Netscape 8 and others) all support the W3C standards to a large extent. Older browsers do not support them as well, but still use them. A well designed site will utilize the abilities of newer browsers while retaining basic functionality and appearance with older browsers.

Future-proof Design

And finally, a standards compliant site will remain useful for far longer than a non-standard site. Future changes can be easily integrated and new technologies can be implemented with far fewer headaches. When it comes time to redesign your site in 2011, the underlying content will be easily migrated to a new design.

The Dark Ages of web design are over. Now we enjoy the Renaissance. Be part of the modern web and insist on a designer that uses the W3C web standards. Designing with web standards is no more difficult than the old techniques. They just require a little extra knowledge and bring with them a lot of extra benefits.