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
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.