Lucid Green

This is the third letter in my series of advice to a fledgling website designer.

By now you are well on your way to becoming a master of HTML and CSS, the two foundations of great website design. This time I want to explain why you should care about web standards. Designing according to accepted standards will, in the long run, make your life easier. It may not seem so at first, but hang in there and you will come to thank me.

First, what are web standards? In the simplest terms web standards are a set of best practices that make the web a more accessible and enjoyable experience for both designers and users. Generally when web designers talk about web standards they mean that a website’s code “validates”. That is, the HTML, CSS and Javascript adhere to the W3C’s guidelines (you can check any publicly available page simply by plugging it into the W3C’s validating service).  But, in my opinion, validation is just the starting point. Truly designing with web standards in mind is an entire philosophy.

A little history will help you understand what I mean. Back in the late 90′s Netscape Navigator was the dominate browser. It was great, you could display basic text-based web pages quickly and easily, but ultimately it limited your creativity.  So, when I first got my hands on Microsoft’s Internet Explorer 4, I was really excited. Ironically, Internet Explorer had adopted many of the W3C’s standards recommendations which meant it supported CSS, among other things, better.

Internet Explorer 4 also had several proprietary HTML tags that performed fun tricks. If you wanted to be cool, and do “neat” things like scroll or blink text, you had to use IE. For amateurs it’s no surprise then that IE gained dominance in the browser wars. In a more sophisticated way IE also gained browser dominance with active x controls that made advanced business applications easier to produce.

Of course, I was just a hobbyist at the time, so I didn’t really understand, or care, about accessibility. Many of my sites, proudly carried the badge: “This site works best in Microsoft Internet Explorer”.  Everyone used IE so what was the big deal?

The big deal was that, without competition, Microsoft’s browser development stagnated with IE 6 which was windows-only compatible, while at the same time operating system and browser usage diversified. Microsoft never released Internet Explorer 6 for the Mac OS, and this crazy new operating system, Linux, was gaining steam. Apple developed Safari, the default browser for all Macs, and the archaic Netscape Navigator was reincarnated as Firefox, which was available for all major OSs. Both Safari and Firefox (and a handful of other browsers) were far more standards compliant.

It was inevitable, everything that goes up must come down. It was impossible for IE to be the ONLY browser forever. The people demanded choice. Today it is impossible for any real website to depend on proprietary technology available only in IE. Doing so means about 40% of web users who can’t or won’t use IE cannot access your site. Obviously, that is terrible for business. Imagine if Walmart made it impossible for 40% of the population to enter their store!

So, you might think that today the accessibility problem is merely academic, right? Wrong. For various reasons the big companies are still trying to win browser dominance by developing proprietary technologies (flash, silverlight, etc.). And small web designers are often uneducated or just plain lazy. Consequently, they build websites that are inaccessible to nearly half of their desired audience. You need to be different.

The benefits of the web standards philosophy:

Accessibility is clearly the heart of the web standard philosophy. That means using technologies and practices that will work the same in all (or nearly all) browsers, on any system. Sometimes this means you will have to make design decisions that seem to limit your site’s functionality, or at least make achieving the same functionality more difficult. But what you sometimes seem to lose in functionality you more than make up for in accessibility.

Usability for the visitor is another huge tenet and benefit. This aspect of the web standards philosophy extends beyond just code that validates. It also means designing the way your site functions in a standardized manner.

For example, links should always be underlined and nothing else should be, unless it is completely impossible for any user to be confused about whether something is a link or not. This obviously restricts the designer. Especially if he or she really doesn’t like what the navigation element looks like with underlined links. But think about it from the users perspective. We see hundreds of websites everyday, without consistency across all of these sites the web is very confusing. It should be incumbent upon a good designer to try to simplify a users experience rather than make it more difficult. If most users expect to see links underlined and navigation on the left side of the page… then out of respect for them you should give the people what they expect.

Usability for the designer is a corollary to both of these. Instead developing different code for every  os/browser setup that a visitor might happen to be using, it’s in your best interest to learn what works the same way in all of them. Adopting a web standards philosophy ideally means that you only have to learn one way to accomplish something.

In truth, however, this ideal is far from a reality. In fact, striving to make your site consistent across all browsers often means you have to make things more complicated in the design process. Until all browsers are themselves standards compliant you will inevitably have to learn the quirks of each.

Yet, web standards support in browsers have come a long way in the last 2 years, and with the release of IE7 and upcoming release of IE 8, pretty much everything a beginner web designer will want to accomplish can be done in the same way for all browsers. (Now, if we can just kill off IE 6 our lives will be much more pleasant.)

Long term maintainability is another good result adopting a web standards philosophy. This benefit is more immediately perceived by the designer, but it also helps visitors in a trickle down way. Sometimes this idea is referred to as “future-proofing” your site. If you design your site based on standards then, theoretically, your site won’t break when a new browser comes out. Of course this assumes that those browsers will be standards compliant, but at least for the foreseeable future browser makers have no reason not to be so and every reason to be so. So even if it is not guaranteed that a standardized website will work in the same way in the next browser versions, your chances are very good.

More choice, and less cost is the final benefit of embracing a web standards approach. Basically this is my plug for using and supporting Open Source technologies like Linux, Apache, PHP and MySQL. By using technologies that only one company has control over you tie your own fate to that of the company’s. You are at their mercy should they decide to stop supporting or developing the technology. Open source technologies on the other hand can always be carried on by anyone, and the are free.  This means that more people can have access to them. Ultimately this fuels competition which drives down cost and drives up features.

The practical advice.

Assuming you are convinced that adopting a web standards philosophy is beneficial, what do you need to know to implement it?

1. Learn and code well-formed XHTML and CSS. XHTML is a strict language, there are few rules, but they must be adhered to carefully. Especially learn about creating documents with the correct doctype. (The classic resource for learning about doctypes and their importance is A List Apart’s doctype article.)

2. Eschew proprietary technologies. Flash has legitimate uses, but building an entire website in flash is a sure-fire way to NOT be accessible. Unless you have one these legitimate reasons for using some proprietary technology then just make a personal vow to steer clear of it. Most of the basic uses for Flash, for example, can be accomplished with Javascript.

3. Learn basic usability guidelines. (another great resource is usability.gov). You don’t have to be an over-the-top usability loony, but please strive to be considerate of your users.

4. Finally, don’t look for shortcuts. Do your homework and research standards compliant ways to accomplish your goals. If something is worth doing, then it is worth doing well.