Why Bother With Web Design Standards?

This is one in a series of Presentations given by Bud Kraus, Web Design Instructor and Consultant. Contact Bud at bud@joyofcode.com or 973 25 1452 if you'd like him to present any of these talks to your business or organization.

The Evolution Of Web Page Design

Web pages sure don't look the way they used to. That's largely because browsers and design practices have changed dramatically beginning in 1993.

The reason why the world has turned to web design standards has to do with the changes to web browsers over the years - specifically, the evolving direction towards the proper implementation of Cascading Style Sheet specifications, as developed by the World Wide Web Consortium (W3C).

A Brief History Of Web Browsers

• Pre Bang - Mid 1980s

  Tim Berners-Lee and the rest invent HTML.

• The Big Bang 1993

  The Mosaic Browser era takes hold and there are probably more browser types than people using them. Style is of no import to page authors and users.

• Netscape Navigator 1.0 Released 1994

  Marc Andriessen and his band of geeks from the University of Illinois Champagne-Urbana perfect Mosaic. It becomes an overnight success and is the most widely downloaded software to date. The web is born.

  Newsgroups, email, and web content - all from a single interface featuring hypertext media.

  Experience the history of the web - the web the way browsers used to be.

• The Browser Wars 1995 - 2000

  The web bursts forth as a mass medium characterized by an incessant browser development battle between Netscape and Microsoft. Each developer is vying for the hearts and minds of designers and users, developing their own proprietary tagging system loosely based on the W3C's HTML Recommendations 2.0, 3.2, and 4.01.

  Microsoft rushes to the fray with Internet Explorer 1.0 as it ships Windows 95. Netscape pushes on with versions 2 and 3, the latter including a Gold version suite which allows content creators to make web pages easily with a WYSIWYG editor. Each developer encroaches on the other's turf. Netscape is becoming a pseudo-operating system. Microsoft embeds its browser into its operating system and touches off Federal Anti-trust action.

  The pressure for businesses and organizations to develop sites is enormous. Site developers and designers are having an epochal struggle to make their designs work as intended - in both browsers and for both major operating systems - because the two sides are hardly playing like good girls and boys.

  Rules? Standards? It's the Wild West!!

• CSS Starts As The War Wages

  CSS Level 1 becomes a W3C Recommendation in December, 1996. (As of Spring 2008, it is the only CSS to reach Recommendation (approval) status.) It would be a good five years before designers begin to embrace CSS because the major browser developers are slow to implement the Recommendation. As a result, designers come up with every imaginable bad practice to achieve design.

• Exit Netscape, Enter Firefox 2000 - 2004

  Netscape is sold to AOL and dies, leaving an indelible legacy. Internet Explorer 5 takes the lead in market share for Win and Mac users.

  Browsers are still doing a poor job with CSS until Mosaic Firefox comes along with its Gecko Layout Engine. It embraces the open source standards of the W3C (like (X)HTML and CSS). It's the world's first real cross-platform browser.

• XHTML 1.0 Is Born - 2002

  XHTML, a reformulation of HTML and an application of XML, becomes a W3C Recommendation. This compels web authors to become more precise in their coding techniques.

• Mac Hatches Safari 2003

  With the arrival of OS X, Apple debuts Safari and frees Mac users from the non-compliant and buggy IE 5. It is widely hailed by the design community as a standards-friendly browser for its time.

• Internet Explorer 7

  The movement towards a compatible CSS implementation takes a major step forward with Microsoft's release of IE 7 in January, 2006. For the first time The Holy Grail - browsers that support the use of CSS as intended - is no longer a dream. It is becoming a reality.

A Brief History Of Web Design

The history of web design tracks with the evolution of the browser. The following characterizations were lifted liberally from Web Design History.

• First Generation
  • Gray backgrounds, black font, blue links era.
  • Poor, inconsistent use of imagery and color.
  • Teletype look - left to right.
  • Monochrome monitors and slow, unreliable net connections.
• Second Generation
  • Icons begin to replace text.
  • Tile images used for backgrounds.
  • Beveled button images.
  • Use of technology for technology's sake.
• Third Generation
  • Early Javascript navigation interfaces.
  • Helper applications and plug-ins allow for greater flexibility in content presentation.
  • Design severely hampered as designers are forced to use HTML for presentation. (e.g., table based layout). Messy workarounds are developed by David Siegel (author of "Designing Killer Sites") and others.
• Fourth Generation
  • Frames become an HTML standard and are used for repeating content.
  • Users are starting to develop an expectations strategy when using sites. Some designers are responding.
  • Pages are getting search optimized for high ranking with search engines.
• Fifth Generation
  • CSS playing a more prominent role. Many sites undergo total re-designs.
  • Better design practices and the use of web design standards are coming of age as the medium matures.

What Are Web Design Standards?

There is no single, unified definition of web design standards. In fact, the name is a misnomer because people are usually referring to web page design standards. In truth, from a technical standpoint, there is no such thing as a standard for web page design.

Even the W3C does not issue standards. Their approved rules come in the form of a "Recommendation."

But there are some general principles people have in mind when talking about web design standards.

Guiding Principles

Web design standards give designers, developers and page authors the ability to create user-centric interfaces, the principle difference when compared with traditional, print design. Design which puts users in the center gives them the sense of mastery they need to quickly achieve their goals.

User-centric design is the difference between web sites that succeed and those that do not and is the guiding principle behind web design standards.

• Use of W3C Recommendations
• Separate Web Page Structure From Style.
• Feature universality, accessibility and sustainability in design practices.

Telltale Signs

When do you know if you're looking at pages that are built upon standards?

• Do they feature markup which validates to W3C specifications?
• Do they use XHTML for anything other than structural requirements of a page?
• Do they use table based layout?
• Do they use images - embeds and backgrounds - correctly?
• Are they using outdated elements, such as the Font and Center tags?
• Are they using proprietary code?

Many bad practices arose from the mid 90s when design workarounds were concocted to achieve a desired page appearance. Back then, browser support for CSS was poor to non-existent and certainly not uniform across all browsers and platforms.

Trailblazers

CSS Zen Garden Project
This seminal challenge proved to be a breakthrough in the world of web page design.

Jeffrey Zeldman
One document serves all.

Eric Meyer
The CSS King.

Dan Cederholm
Inventor of The Faux Columns technique and more.

Andy Budd
Author of CSS Mastery.

Jakob Nielsen
Supports a user interface which is usable.

Joe Clark
The emphasis is on accessibility.

Web Standards Project
That early cadre is still around

Why Are Businesses And Organizations Embracing Standards?

The use of web page design standards is indicative of a maturing medium. Like the early days of consumer videotape - 4 track or cassette/Sony beta or VHS - the commercial pressures to adopt design standards have taken hold.

Standards allow designers to work collaboratively in a uniform environment. Like creating designs from sand, much can be done, but it is all produced in one environment - the beach.

It is the one environment - the browser (or more aptly known as the user agent) that properly implements CSS - which is creating the compelling need and opportunity to use web design standards. What's more, the widespread adoption of standards in mobile devices is pointing designers and developers to use web design standards.

Businesses and organizations are using standards to reduce production costs, speed deployment, and ease the cost burdens of site maintenance.

Serving All The Masters

• browser
• search engine
• user
• designer
• client

Using web design standards inures to the benefit of everyone. This is the complete win-win situation.

Not A Style But A Method

A method to...

• bulletproof design for future compatibility;
• reduce site production costs;
• achieve sensible design management;
• provide a better user experience;
• assure site sustainability through modular construction.

Case Studies

It used to be hard to find businesses that used design standards, in whole or in part. Now, it's almost too easy. That's a good thing.

ABCNews
The code had gotten too old for renovation, so it was back to square one and a total re-design.

From Table Hacks to CSS Layout: A Web Designer’s Journey
A List Apart, the predominate collection of web design articles that support standards, practices what it preaches in its re-design.

Reference: University Of Minnesota. Standards, Guidelines, & Patterns

Sites Using Web Design Standards Gallery

A tiny sampling.

W3C Sites
A portal to countless web sites using design standards.

Wired
If they can do it, why can't you?

Apple
If they can do it, why can't you? I know, I just said that, but if a company as brand conscious as Apple can use web design standards, what would be your reason not to?

Inguna Trepsa
A small designer in Brooklyn, NY, with a big vision.

---

The good news is that the days are fading where designers will have to run from one browser to the next, testing their designs. But we're not there yet, and we will never get there unless designers push for and adopt web design standards.