Skip to content

A podcast for those who design, develop and run websites.

Boagworld is the personal website of Paul (the Wurzel) Boag who lives in the heart of rural Dorset. He produces a weekly podcast along with Marcus (pop star) Lillington on all things relating to building and running websites.

Latest shows

127. Context
In this week's show we discuss taking context into consideration when designing websites and we answer your questions about video for an elderly audience and the most influential books in the industry. 
126. Scaling
In this weeks show we learn lessons from the botched iPhone launch here in the UK. We chat to Jeff Veen about the designer / developer relationship and Marcus talks about adding jingles to your website.
125. Copy
In this weeks show we discuss how to give personality to your site copy and we talk with Elliot Jay Stocks about going freelance.
124. HTML 5
In this weeks show we explore how to create better online surveys and Lachlan Hunt joins us to discuss HTML5
123. Plight
In this weeks show we review Textmate and the Top 5 Tips for Web Designers and we discuss the plight of in-house designers.

or view all shows

Have your say

Leave a message for the show...

Buy my book: The website owners manual. A book for all those involved in designing, developing or running websites on a daily basis.

Web standards explained

Published on: November 2, 2005 by Paul Boag

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.

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.

Comments

Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email

  • Post by Andrew Smith on November 3, 2005 12:50 AM

    Well done! That is a very graphpic example of the benefits of separating content from structure.

    I'm scared to put my url . . .

  • Post by Andrew Smith on November 3, 2005 12:51 AM

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

  • Post by Paul Boag on November 3, 2005 8:20 AM

    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.

  • Post by Ed on November 3, 2005 8:43 PM

    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".)

  • Post by Paul Boag on November 3, 2005 9:45 PM

    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.

  • Post by Ed on November 3, 2005 10:26 PM

    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.

  • Post by Ed on November 14, 2005 11:25 PM

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

  • Post by Ed on November 24, 2005 5:19 PM

    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).

  • Post by diabetes on December 17, 2005 7:03 PM

    good read.

  • Post by dustin on December 17, 2005 7:05 PM

    good read.

  • Post by joe on January 19, 2006 11:58 PM

    Paul,
    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!

  • Post by Paul Boag on January 20, 2006 6:24 PM

    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.

  • Post by Laura on March 28, 2006 5:22 PM

    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?)

  • Post by Greg Coyle on May 20, 2006 4:14 PM

    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?

    Thanks
    Greg

  • Post by Paul Boag on May 20, 2006 11:50 PM

    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!

  • Post by Rapidshare on March 28, 2008 3:44 PM

    I completely agree with all that here is told

Leave a comment

Additional Information

Supporting boagworld

Boagworld only exists thanks to the kind support of the following people. Check them out.

Speaking and writing

From FeedInformer