Why web standards matter

Screenshot of web code
Screenshot of web code, as viewed in the excellent Firebug add-on for Mozilla Firefox.

These last couple of weeks I’ve spent much of time, both at home and work, puzzling over a coding project I’m currently working on at the University; which is partly why my blogging activity has been more intermittent than usual.

Baseline browsers

For this particular project we set a baseline of which browsers we would support, based in part from the visitor information we gather on the University’s homepage. This collects information about which browsers are being used, the user’s screen resolution and the number of colours their computer will support; no personal information is gathered. Having examined this data we decided to support Safari (Mac OS X), Internet Explorer 6 and 7 (Windows), Mozilla Firefox (Windows, Mac and Linux) and Opera 9 (Windows, Mac and Linux).

What happens when you have to support IE6

That we have to support IE6 — because many of the PCs at the University run Windows 2000 which will not run the newer IE7 — has had a serious impact on our coding time. Here’s what happens on a typical day as I work through our specifications list:

  1. I spend maybe 30-60 minutes coding one particular aspect of the site, e.g. page layout, using standards-compliant CSS.
  2. I test it in Firefox 2 – it works.
  3. I test it in Opera 9 – it works.
  4. I test it (by sending the code to colleagues) in Safari and Linux Konqueror – it works
  5. I test it in IE7 – it (usually) works.
  6. I test it in IE6 … and then say something like “Oh dash it!”
  7. I spend anywhere up to 3 or 4 hours ‘debugging’ it to find out exactly why IE6 won’t render the page correctly. This usually involves either adding an additional CSS statement (e.g. width: 200px;) or completely rewriting the code from scratch.
  8. Repeat with the next element on my project spec.

As you might imagine, this can get quite tedious.

Acid2 Browser Test

The problem lies in the way that different browser manufacturers have interpreted the web standards as laid down by the World Wide Web Consortium (W3C). These standards, published as W3C Recommendations, are guidelines for, amongst others, browser software developers so that they know how their products should properly render web pages.

And as you might guess, some are better than others. Some follow the rules closely; others are a little more relaxed. And to test how compliant a particular browser is the kind folks at the Web Standards Project have provided an online ‘acid test’, called the Acid2 Browser Test. Using XHTML and Cascading Style Sheets — so no graphics, just div tags and background colours, and stuffâ„¢ — it tries to display a smiley face with the words “Hello world” above it.

Acid2 Browser Test results

Here is how the four Windows browsers I mentioned before (Firefox, IE7, IE6 and Opera 9) fare with the Acid2 test:

Firefox 2

Firefox tries the Acid 2 test and almost passes

As you can see Mozilla Firefox does not too badly. At least, it looks sort of like a face, even it is wearing a mask. If it were a film it would probably be Girl Interrupted.

Gran Paradiso (Firefox 3) Alpha 2

Firefox 3 passes the Acid2 test

Thankfully the core layout code has been rewritten for Firefox 3 (currently in Alpha) which fixes the problems evident in Firefox 2′s rendering of the Acid2 page.

Internet Explorer 6

IE6 fails the Acid 2 test

The troublesome Internet Exploder 6 utterly decimates the page. It should perhaps be renamed Internet Exploder and left in a drawer to gather dust. Would you believe this is the world’s most popular browser? Look what it has done to some nice programmer’s code! If it were a film it would probably be [insert name of gore-fest horror pic here].

But worry not, Microsoft improved things and released …

Internet Explorer 7

IE7 tries the Acid 2 test and fails spectacularly

The latest (and greatest?) version of the mighty Microsoft’s browser, Internet Explorer 7, which erm … well, to be honest, fares only a little better than its little brother (browther?). If it were a film it would probably be the sequel to [insert name of gore-fest horror pic here]!

Opera 9

Opera 9 passes the Acid 2 test and shows a smiley face and Hello World!

And then Opera 9 steps up to the plate and delivers 100%. That is how the page should look. If it were a film it would be your favourite feel-good movie, one that you could watch day-in, day-out. Lovely.

Konqueror (Linux)

Konqueror passes the Acid 2 browser test

And since I know you’re all wondering the same thing: “But how well does the Linux browser Konqueror do on the Acid 2 Browser Test?” I’ll tell you. It passes with flying colours too. (Thanks to Mike for the image.)

Safari (Mac OS X)

Safari passes the Acid 2 test

And good old Apple also manage to get their browser to pass the Acid 2 Browser Test with their Safari browser. (Thanks to “a mate” of Mike for this screenshot.)

The moral of the story

Imagine if your tv did this to the programs, videos or DVDs you watched. Viewers wouldn’t stand for it. So why do web users stand for it?

The moral of the story is don’t use Internet Explorer, use something better. I can thoroughly recommend both Firefox and Opera, which I’ve been using for a good few years now.

If you like customizing your software, with various add-ons, then choose Mozilla Firefox. If you just like a fast, attractive browser that shows things the way they should look then download and install Opera 9.

If you’re using Mac OS X then you are probably using Safari already, which I believe is pretty cool. And if you are using Linux then you’ve probably already compiled the Konqueror source code and installed it on your über-geeky homemade distro yourself, and I’m preaching to the converted!

You know it makes sense.

5 thoughts on “Why web standards matter

  1. To be honest, liking Internet Explorer is like having sex with animals.

    It may feel good to you, but everyone thinks you are a big wierdo and you should be arrested and put in jail.

    As soon as I’ve actually got a job, so don’t have to worry about potential employers reading my site, I’m going to make Internet Explorer redirect to the Firefox site. Or possibly just a big box telling you how much you have failed at life for liking Internet Explorer.

    I really hate Internet Explorer. Can you tell?

  2. just so you know, i’m aware of a website that you submit a webpage to and it tests it in different browsers/os an it sends you back a screenshot. Not sure what it’s called or URL but i know it exists. The truth is out there!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>