HTML5, CSS3, Web Fonts, and Other Fun Stuff

Posted in Accessibility, News, Responsive Web Design, Web Standards, WordPress

For the past several months I’ve been experimenting with an exciting set of web technologies. You may have heard the latest buzzword for what I’ve been doing. You know the one: HTML5. If something is new and cool, it must have been done with HTML5, right? Well, not necessarily. It’s true that HTML5 has some fun and exciting possibilities on the horizon (and some of it is indeed ready for prime time today). But there are some other fun web technologies gaining in popularity at the same time. It’s the combination of these technologies that I’ve been having fun with. If you’d like to use the general purpose term HTML5 that’s fine with me. I won’t even correct you—at least not while you’re within hearing range.

Last year I wrote a few posts on another popular buzzword: Ajax (read part 1, part 2, and part 3). Simply put, HTML5 is the latest version/specification of HTML. It’s actually still in development as I write this. There was a lot of fuss leading up to what is now called HTML5 (and why it’s called HTML5 instead of XHTML 2, for that matter), but that’s a topic for another day. What’s more interesting is what can be done with it when combined with a few of its friends. And I’ve found that the best way to learn what a new technology can do is to build something myself. So I’ve been doing that off and on over the last few weeks.

For me, this whole journey started over a year ago when I first started seeing some HTML5 examples in the wild. At the South by Southwest Interactive (SXSWi) conference in Austin earlier this year it became apparent to me that most everyone else in the web design/development industry started getting excited as well—it was everywhere! At every turn I heard people repeating the same sort of thing: “Hey, did you see that cool HTML5 demo in that last session?!” So I decided it was time to start building some demos and see what was possible.

In an effort to stick my toes in the shallow end of the pool, I started developing some small bits and pieces on some of my freelance projects. I think the first HTML5 thing I implemented—other than the dramatically simplified doctype—was the <video> element, complete with extensive fallback for browsers that didn’t support it.

On this latest project, I decided to go all out. It became a game for me to find all the cool new toys I could use to construct my new invention—while at the same time maintaining the integrity of the content in multiple browsers/platforms. It may not look exactly the same in every browser, but the content is consistently usable, highly accessible, and search-engine friendly. For Internet Explorer 6 and below, I decided to use Andy Clarke’s method called Universal Internet Explorer 6 CSS in order to avoid wasted time and effort that, in my opinion, just leads to heartache. Andy’s beautifully elegant solution delivers “just great typography for headings, paragraphs, quotations, lists, tables and forms and no styling of layout.” I think it’s a great solution to a much-debated issue. Your results may vary. Discuss amongst yourselves. Rinse and repeat.

I used a bunch of HTML5’s new structural elements like <header>, <footer>, <nav>, <aside> and others. So far so good (with some coaxing for Internet Explorer… surprise, surprise). I decided not to use the new HTML5 outline algorithm until a later date (it’s optional anyway). I added some ARIA roles for accessibility help. Then I explored some CSS3 features such as rounded corners, drop shadows for boxes as well as text, and transparency. And finally, I threw in some web fonts for good measure (on headings mostly). I’d like to come back at some point and explore web fonts in more detail, but again, that’s a post for another day.

So, enough tech talk. Let’s see the results already! Take a look at the newly re-designed Baatz Consulting site and let me know what you think. If you’re a tech geek like me, please peek under the hood and have a look at the source code. More importantly, if you’ve been having fun with HTML5 (and CSS3, web fonts, etc.), send me a link and we can compare notes about what we’re all learning together.