Sickdesigner

Lately it seems that the interwebs have been going all out nuts with HTML5 and CSS3. Everybody’s a pioneer and everybody’s declaring NOW is the time to start using them. But has anyone actually done more than just dip in?

I’m not trying to point fingers here, but one must admit that while there is a growing interest and awareness of HTML5 and CSS3, most agencies and freelancers are just as discrete about them as before.

On the other hand, agencies and freelancers haven’t really been pioneers for obvious reasons: they work for clients. And clients don’t care about the latest and greatest, they care about revenue and WYSIWYG (most have never heard of graceful degradation/progressive enhancement). It’s all about the Benjamins, baby!

Enter the wonderful world of personal pages. I’m referring to design blogs and designer portfolios mostly. These places have, for some very long time now, been a sandbox for testing, learning and experimenting with technology that’s considered “avantgarde”. Though, one must point out the existence of the HTML5 Gallery Showcase, a place to check out plenty of websites using HTML5.

So, in our sickness, we thought: lLet’s do the redesign for Sickdesigner using HTML5 and CSS3. We did, and so much more.

It was a stroke of luck that around that time we came across a mind-blowing post by the one and only John Resig, creator of jQuery. In case you haven’t come across the article or just didn’t click the link back there, it’s all about a nifty little piece of Javascript goodness called document.createElement which John used to portray how one could create and use the new tags in HTML5.

This tiny piece of code made all the difference in our minds, when realizing the potential and usefulness of document.createElement. Here’s a bit of code from this very website:
<container>
   <header>
      <h1>
         <a class="tooltip" id="logo" href="http://sickdesigner.com/" title="The main ward">
            Sickdesigner - The sickness is spreading
         </a>
      </h1>
   </header>
</container>

At this point you’re probably scratching your head a bit. It’s okay, it’s normal. Most of you will recognize the h1 and a tags. Some of you, more familiar with HTML5, will recognize the header tag. But then, right at the very start we have  a tag called container, which doesn’t really belong anywhere.  That’s because it’s generated with document.createElement.

Well, there’s a very good explanation for this: Semantic tags. We’ve all heard of them and, unless you have tables for layouts, you’re using them.

Semantic tags = “use the right tag for the right place”. If you’ve got a paragraph, use a p tag, if you’ve got a line break, use an hr tag. This also extends to classes and ids: if you’ve got a header div, slap on an id of “header”.

We work in an environment which really thrives on progress. And in such an environment it is the opinion of this sick designer that one must always strive to challenge old paradigms. We challenge the term Semantic tag. We want it to actually mean a semantic tag, a tag that means something, that expresses it’s use.

Still not on our side? Check this out:

<container></container>
<div id="container"></div>

Isn’t the first way of writing the container cleaner, more efficient, more meaningful and easier to maintain?

So what other tags did we decide to include? Let’s see now: wrap, container, header, sidebar, twitter, rss, homepage, posts, article, category, tags, footer, single, comments, author.

HTML is a great language which does employ semantic tags in the sense described above, such as p, em, strong etc. But you’ll notice that they are all tags that relate strictly to content, not structure. For that we’re bestowed upon with divs. Ugly, ugly divs, which mean nothing but “a divider”. Sure, the W3C is trying their best to come up with semantic structural tags in HTML5, like header and nav and footer, and that’s peachy fine. But what they don’t understand is that not all websites are built the same. Not all websites have just these elements.

Pop quiz, kids:

Most blogs display their categories. What’s the appropriate tag for a category? And I mean truly appropriate, not a span. Why not have a category tag?

We’ve only used the newly created tags for structural purposes. It’s not an exercise in “look ma, see what I did?”, but an attempt to bring sense and direction to a part of HTML that lacks proper meaning.

The how to part

Now, enough chatting about this stuff. Let’s say you want to implement this kind of weirdness in your next project. How do you go about it?

First, take a piece of paper and write down all of the tags you’re going to create. This is not rocket surgery(!), but planning ahead is essential.

The Javascript

// Create elements
document.createElement("wrap");
document.createElement("container");
document.createElement("header");
document.createElement("sidebar");
document.createElement("footer");

Quite. Save that with a filename of, say, create-elements.js. Let’s include that in our HTML page.

The HTML

<!DOCTYPE html>
<html>
   <head>
      <title>Truly Semantic Tags</title>
      <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
      <script type="text/javascript" src="create-elements.js"></script>
</head>

I’ve also added the HTML5 Doctype declaration and a stylesheet to the equation. Now, let’s move on to the CSS part of the deal.

And the CSS

wrap, container, header, sidebar, footer{
   display: block; }
By default, these elements have no properties and since their use is structural, a display: block is needed for proper rendering.

And there you have it. Now you’re ready to style away at these newly created elements, without added classes/ids and with meaningful names.

But, alas

Of course, we can’t forget about that wretched “old friend” of ours, Internet Explorer.

If you’re thinking about whether this stuff works on IE6…forget about it. It just withers into a corner and starts crying at the very site of the new tags. And it should. I don’t hear any cries of grief over the inability of Firefox 1.5 to render border-radius, so there will be no tears shed for this relic.

IE7 and 8, however, do seem to comply. There are restrictions, though. It seems that IE likes to create self closing tags, instead of normal ones. But there is hope, yet.

You can use Remy Sharp’s HTML5 shiv. It’s a nice little piece of Javascript, which essentially does exactly what we just did, but using the .replace method and some nice regular expressions. Just download and add your own  elements to the list. Like so:

// For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/ (credit to @jdalton for minif)
/*@cc_on'abbr article aside audio canvas container details figcaption figure footer header hgroup mark menu meter nav output progress section sidebar summary time video wrap'.replace(/\w+/g,function(n){document.createElement(n)})@*/

This way you can include IE7 and 8 into your supported browsers list.

So, can you use this in a client’s project? Perhaps. We think it’s feasible enough, although it does take some (little) time getting used to it. And if your next project doesn’t imply supporting IE (one can only dream, right?), then this is definitely something you should try.

This whole idea may seem a bit nutty and perhaps it is. But I like to look at us web folk like doctors. We work in an ever changing, nerve wracking medium and all our professional lives we strive to learn newer, better ways of doing what we do, no matter how ludicrous and unreasonable they may seem ar first glance.

by Radu Chelariu