It wasn’t that long ago since our last major site rebuild, and yet here we are at it again. This time it’s both a redesign and an overhaul of the underlying structure.

Now with HTML5

While I’m no fan of Flash, the intent behind rebuilding the site using HTML5 isn’t meant to stand in opposition. We try to stay as close to the leading edge of of the web dev world as we can, and HTML5 is clearly the future. The beauty is that it’s the same HTML we’ve known and loved, but now includes even more elements. It’s a simplification of the standard while at the same time offering up an entirely new playground when combined with CSS3 and JavaScript.

We didn’t dive too deeply into all the more fantastical portions of the language, such as the canvas element, offline storage, or some of the other new API’s – but we are using the new markup. If you view the source of this page you’ll see <header> rather than <div id="header">. Subtle, yes – but the future none the less.

Responsiveness via CSS3 @Media

We’re also experimenting with optimizing the site for screens beyond the desktop. iPhone, iPad, Android – these are the screens of the future, and sites need to be viewed well on them. For the most part, they all render sites very well – sometimes just smaller. Take a look at the front page of this site and try resizing the browser window. Or check the site out on a phone or tablet. The layout should be as equally viewable as on the desktop. I don’t have an iPad yet, so hopefully I’m not blowing smoke there.

What about Internet Explorer?

In researching the proper way to implement HTML5, I came across quite a few that I really liked, but when viewed in Internet Explorer, a few popped up messages like this:

Spelling errors aside, this kind of thing is unacceptable. We cannot simply blow off the 45% that use IE. Thankfully I came across http://ryanscherf.net/ – well designed and coded in HTML5. It also looked awesome in IE, and had no browser warnings. Once I knew it was possible to do, there was no looking back.

HTML5 ★ Boilerplate

The only way I’m able to do these things is by standing on the shoulders of giants. People like Paul Irish and the rest who’ve taken the time to show us the way with tools like HTML5 ★ Boilerplate and Modernizr. These tools help to ensure that using HTML5 today doesn’t mean leaving older browsers in the dust – we can progressively enhance, while remaining backwards compatible.

The rest of the tech

The site is still powered by WordPress, and I’m as excited as ever over Justin Tadlock‘s Hybrid Core Framework.