It's OK To Break Standards

—Sunday, April 02 2006

I tend to be more of a Realist than Purist when it comes to debating semantics, web standards, progressive enhancement, and all the other topics web developers are talking about in order to educate and inform their audience. I’m an advocate for all of these things, but that doesn’t change the fact that you shouldn’t bend them or break them if the situation calls for it.

Am I saying we should go back to table-based layouts? No. Do I think we should use proprietary tags in our markup? No. Do I think font tags should be reinstated? No. Do I think alt attributes on img tags are a waste of time? No. I think we have to be smart about the decisions we make as web developers and not blinded by the false promise, that no matter what the case, standards are always the right answer. Our decisions have to be made in context to the constraints we’re faced with.

Innovation isn’t the ability to follow a set of standards, it’s the ability to bring something new to the table. Technology doesn’t advance by simply following rules and guidelines; if that were the case we’d still be reading stone walls with a lit torch. Innovation demands that we break rules, however that doesn’t mean we shouldn’t make educated decisions.

Kathy Sierra recently published a great article entitled “F*** the rules!” where she talked about rules inhibiting innovation:

A huge chunk of the implicit professional rules today are damaging because they inhibit innovation. They stop the one thing businesses need the most–breakthough ideas. –Kathy Sierra

While browsing my feeds the other day, I came across a post by fellow 9Ruler Stuart Colville titled “Don’t use Javascript to hide bad markup”. Here is an excerpt from the article:

In my opinion JavaScript shouldn’t be used as a means to hide bad code from the source. This includes using JavaScript as a way of hiding both invalid or non-semantic markup. In his re-design of Vivabit I think Patrick Griffiths made the right decision in not using JavaScript to add in the extra markup he needed to make his elastic design with all of it’s rounded corners work.

I agree with Stuart in that Javascript shouldn’t be used as a means to hide bad code. The problem here is that the word bad is relative to it’s context and two different people interpret bad differently. I think it’s bad to use Javascript to hide font tags, but why would an educated developer do this? They wouldn’t. Stuart thinks we shouldn’t use Javascript to enhance aesthetics if it hinders with semantics. While I understand his concern, I disagree completely. (Upon further discussion) Stuart thinks we shouldn’t use Javascript if our intent is only to hide non-semantic code from the source.

Most of the time this happens (injecting markup into a document via Javascript) a developer is working around an implementation problem. If developers could semantically and practically achieve a desired aesthetic without the use of Javascript, they would. Rounded corners is just one example, but it’s certainly not the only case in which this applies. We can achieve rounded corners through css and non-semantic markup. The Vivabit rounded corners implementation is not semantic:

    <li><span><span><span>Amnesty</span></span></span></li>

Is this not just as much a fix as using Javascript? The span tag has no semantic meaning. While I don’t think the markup is bad in context to the problem he was faced with, I just don’t think it’s any better than an elegant bit of Javascript. I think Patrick did what he had to do in order to fix the problem he was faced with. He could’ve used Javascript to inject the span tags in as well. It doesn’t make it any more right by using redundant span tags in the HTML source.

One could argue that those without Javascript wouldn’t be able to view the rounded corners. One could also argue that if you were browsing with a text-only browser you wouldn’t be able to see them either. Javascript always seems to take the cake as the least elegant solution when HTML and CSS can do the job. This is a blind assumption. Javascript is not the devil’s play thing and CSS and HTML are not always the answer. ECMA Script (Javascript) is a standard as well.

If we are so adamant about standards, why do we support non-standars every day. We use applications like Gmail, Backpack, del.icio.us, flickr–all of which break the rules. If you were pro-life, you wouldn’t gas-up the ride so your sister could make a trip to the clinic would you?

Take a look at Ma.gnolia.com–The social bookmarking website designed by some of the most widely recognized industry heavy weights when it comes to standards and the web. Just a quick browse through the source on the home page got me this:

    <img alt="Clear" height="1" src="/images/clear.gif" width="3" />

If you disable styles you’ll also see that there is also some empty list items. The point here is that cookie-cutters (standards) don’t always work when your facing real problems in a real working environment.

Standards and semantics are an essential part of the web, but we need to make smart decisions, not blind ones, when it comes to when, where, and how to apply and break them.