So, I can use this now?

Actually, yes, with a few extra steps. And it will work in all modern browsers. It can even work in IE6. There are only a few little quirks we need to get past if we’re going to start using this today.

First, because most browsers don’t understand the new HTML5 doctype, they don’t know about these new tags in HTML5. Fortunately, due to the flexibility of browsers, they deal well with unknown tags. The only issue here is unknown tags have no default style, and are treated as inline tags. These new HTML5 tags are structural, and should obviously be block level elements. So, when we style them with CSS, we need to be sure to include display:block; in our attribute/value pairs.

Include this simple extra piece of CSS, and these new tags are immediately usable. Starting today. And of course, once HTML5 is more widely supported, the superfluous display:block; can be removed, as it will be included in the browser default styles.

Supporting IE

There is one more issue if you require IE support. Turns out that the IE rendering engine will work with the new tags, but will not recognize any CSS applied to them. Well, that’s no good. Fortunately, IE just needs a good swift kick with the help of a very simple bit of JavaScript. All we need to do to kick start IE is to create a DOM node with JavaScript for each of the new tags, and suddenly IE will apply styles to the new tags with no problem. The code will look something like this, and can be placed directly in the head of our document, or the contents of the script tag placed into an external file and included.

<script>  document.createElement('header');  document.createElement('footer');  document.createElement('section');  document.createElement('aside');  document.createElement('nav');  document.createElement('article');  </script>

Before we leave this code, there’s one thing to mention about the script tag in HTML5. HTML5 will assume type="text/javascript" on any script element, so it need not be included. Once again, making things simple.

Wrapping Up

So we can begin, right now, to structure our documents using the new tags provided in HTML5. With a few simple tricks, they’ll work today, and be compatible in the future. So next time you start a new site, consider going with HTML5, and give your markup a little more defined structure.

This resource was last updated January 11, 2010 by Steve Smith

Copyright © 2004 – 2010 Ordered List Inc. ISSN# 1555-7928. All Rights Reserved.

Readers became friends with your characters, so understandably, they grieved — and are still grieving — when the strip ended. What would you like to tell them?

This isn’t as hard to understand as people try to make it. By the end of 10 years, I’d said pretty much everything I had come there to say.

It’s always better to leave the party early. If I had rolled along with the strip’s popularity and repeated myself for another five, 10 or 20 years, the people now “grieving” for “Calvin and Hobbes” would be wishing me dead and cursing newspapers for running tedious, ancient strips like mine instead of acquiring fresher, livelier talent. And I’d be agreeing with them.

I think some of the reason “Calvin and Hobbes” still finds an audience today is because I chose not to run the wheels off it.

I’ve never regretted stopping when I did.

Bill Watterson is somewhat of an artistic hero of mine. As much as I loved and truly miss Calvin & Hobbes, I think he made the right decision. Especially considering the shameless throwaway garbage that other strips continue to flog over an over, when they should have exited gracefully long ago. Calvin and Hobbes was a strip with, not only great artwork, but quality writing, and a core of integrity. I think this is why it remains so beloved today for so many fans.

Epicenter Design

Start from the core of the page and build outward

Epicenter design focuses on the true essence of the page — the epicenter — and then builds outward. This means that, at the start, you ignore the extremities: the navigation/tabs, footer, colors, sidebar, logo, etc. Instead, you start at the epicenter and design the most important piece of content first.

Whatever the page absolutely can’t live without is the epicenter. For example, if you’re designing a page that displays a blog post, the blog post itself is the epicenter. Not the categories in the sidebar, not the header at the top, not the comment form at the bottom, but the actual blog post unit. Without the blog post unit, the page isn’t a blog post.

Only when that unit is complete would you begin to think about the second most critical element on the page. Then after the second most critical element, you’d move on to the third, and so on. That’s epicenter design.

This is such a key aspect of software and UI design, I can’t promote it enough.

Stated simply: Start with the content -> then add the stuff that helps people get around the content.

Don’t forget to read the entire book. It’s free.