Introduction to web standards

February 27, 2007 · Posted in Uncategorized 

Hello again. I’m Laurence Veale, senior usability analyst with iQ Content. This is my second post as guest blogger here on the IIA blog. Last week, I posted an introduction to accessibility. This time around I’m talking web standards.

Rather than go into the history and talk about the beginnings of HTML, the browser wars and the start of the web standards movement, I’ll direct you over to the comprehensive article, “Developing with Web Standards” on 456bereastreet.com, one of my favourite blogs on web standards and accessibility.

What are web standards?

Essentially, web standards are the best way to code the front-end of a web site. Starting with your HTML, it should be semantic. This means that any tags in the HTML should convey document structure or meaning only, and little or nothing else.

The principle behind this is that your website needs to be perceived by non-visual devices. For this reason, the meaning is far more important than the appearance. Appearance can then be easily applied later using Cascading Style Sheets (CSS).

Semantics for dummies

To explain the difference between presentation and structure, I sometimes use Microsoft Word. Within Word, I wanted to make some headings using the font size tool.

MS Word Content
changing the appearance

adding a table of contents

error in table of contents

Above, I’ve just changed the appearance of the text using the font size menu.

Then, in the third screenshot, I’ve tried to create a table of contents. However, Microsoft Word has thrown a wobbly because it can’t interpret any meaning from the appearance of my text.

So, while some of the text may appear like a heading, it isn’t, and Word can’t generate a table of contents as a result.
Alternatively, I can apply “meaning” to the same piece of text. Instead of making the text merely bigger, I’ve applied the “Header 1″ style. Then, when it comes to building a table of contents within my Word document, it works.

adding headings

successful addition of a table of contents

In addition to style, there is a third element to an individual web; behaviour, most commonly implemented using JavaScript. Commonly known as unobtrusive JavaScript, the web standards approach means keeping JavaScript out of your HTML.

separation of structure, appearance and behaviour

The end result of web standards: less code

Less code is better code, plain and simple. Less code to write means less bugs. Less code to download, meaning quicker downloads and less bandwidth costs. Less, in this case, is definitely more and can lead to tangible and quantifiable benefits.

Clear business benefits of web standards

There are clear business benefits in adopting web standards. Indeed, more and more RFP (Request for proposals) that we read are asking for web standards explicitly, and for good reason. But what are the real benefits?

  • SEO: Better placement in search engine results. Search engines like more meaningful code, the better structured your document, the better it will rank (all other factors being equal)
  • Quicker downloads for your users: less code is generally quicker code which fits nicely into the principles of universal design. Remember, not everyone is on broadband or on a PC/laptop for that matter
  • Reduced bandwidth costs for your business: less code means less load on your servers and your bandwidth. As I’ll discuss next time, even a small saving in code can save hugely on heavily trafficked websites.
  • Cheaper maintenance: Faster and easier changes can be made to the look and feel of an entire website.
  • Closer to an “accessible” website: while coding with web standards doesn’t guarantee an accessible web site, it can get you a good deal of the way towards one.

What’s next?

Next time, I’ll try and quantify the benefits of web standards, using the homepage of a major Irish institution as an example. Stay tuned.
Hopefully, I’ve whetted your appetite on web standards. If you want to find out more, then check out some of the resources and books listed below.

Further resources on web standards

Books on web standards

Tags: no tags

Comments

Leave a Reply