Web standards explained

Today I have once again been working on the new Headscape site (yes, one day it will be finished I promise). One of things I did was write a brief introduction to web standards and I thought you might want to see what I have written.

For years, web designers have been secretly holding together your site with sticky tape and string. The code that underlay many sites looks like some kind of HTML soup with random nested tables and font tags roaming wild. However, things are changing… there is now a better way to build your web site.

Enter web standards

Web standards are about completely separating content from design. This means that the content on your site is held in the HTML and your design is defined by a special CSS file. This allows the content to be described semantically in the mark-up rather than being cluttered up with design elements.

So this:

<font color="#FF0000" size="6" face="Verdana, Arial, Helvetica, sans-serif"> This is a heading </font>

becomes this:

<h1> This is a heading </h1>

Now isn’t that tidier, at least us geeks think so.

Why should you care?

It is important that your site is built using web standards because it offers you:

  • Better accessibility – Sites built with web standards find it easier to conform to disability legislation
  • Better print facilities – Have a separate print style designed especially for printing. No more badly printed sites! Try printing this page to see what we mean.
  • Backwards compatibility – Web standards ensures that your site will be useable on any browser no matter how old.
  • Delivery to multiple devices – By separating content from design you can deliver your content to a mobile phone or a touch screen kiosk just by changing the design.
  • Increased speed – Web standards produce cleaner code and smaller files. These download quicker increasing the speed of your site.
  • More flexibility – Because design is controlled by a small set of files, it is possible to quickly and easily change the look of your site without a complete rebuild.
  • Improved search engine placement – Search engines do not care about design, they only care about content. By separating the two, it makes it easier for the search engines to understand your site.

Avoid the sticky tape; make sure your web design company builds this way.

  • Well done! That is a very graphpic example of the benefits of separating content from structure.
    I’m scared to put my url . . .

  • I was wondering if you have an opinion on putting navigation on the right hand side of a web page.

  • Well as I have done it on this site Andrew I can’t really critise it :) To be honest though I think users look to the left and top first so its not the most intuitive place. However, presuming their are not other elements in those positions that might be mistaken for navigation, I guess it is acceptable.

  • Ed

    re: putting navigation on the right hand side of a web page
    On the Solent Youth for Christ web site, using a second style sheet, I have given users the option to have the navigation on the right. That is the power of web standards – you can easily change things like that, and give users a choice too!
    (To access the other style sheets in Firefox, click on the “View” menu, then “Page Style”.)

  • I have to confess I didnt know you could set up multiple styles for firefox like that. That really is quite cool… if only all browsers supported that.

  • Ed

    Thanks. Opera supports them too. There is a Style menu that will let you pick which style sheet to use. The Spoken Page style sheet is for use with Opera’s text to speech system. I guess I should mention that in the style sheet description or something – it is on the accessibility page though.

  • Ed

    I’ve found a site with a list of style switching browsers and other techniques for style switching too.

  • Ed

    Printing pages can be a real pain some times (well, if you are using IE and the designers haven’t thought about page printing — you know what I mean: when the right side of the page doesn’t get printed!)
    So using a print style sheet can greatly improve matters.
    If you have a print style sheet, you might want to encourage Firefox users to try out the “Print Hint” extension, which adds a little icon to the browser which indicates if the page has a print style sheet (and also tries to show if there is a “printable version” of the page instead).

  • good read.

  • dustin

    good read.

  • joe

    Can you tell your subscribers what the simplified steps would be to build a single page with graphics and content using web standards? Love the show. Marcus rocks!!! And Paul you rule!

  • Hi Joe,
    when I have some time I was intending to put together a video tutorial. Its not something you can explain in a podcast and would be too long winded to easily write a blog on it.

  • Laura

    Oh! A tutorial please! Heck, just write a book while you’re at it. (I have a limited knowledge of CSS, but I think I need some clarification about using it for other elements besides text?)

  • How can I find out more about web standards? Do you have any books or websites that deal with it more in depth you would recommend?

  • Hey Greg,
    if you listen to the last podcast I recorded for Practical Web Design Magazine (http://www.pwdmag.co.uk/?p=52) you will hear me recommend 4 books to get you up and running. They are also listed in the show notes in case you cant be bothered to listen to the whole show!

  • I completely agree with all that here is told

  • Very useful files search engine. http://Indexoffiles.com is a search engine designed to search files in various file sharing and uploading sites.