HTML5 - for technical folk

TAKEHOME: HTML5 is coming - know what your options are.

This post is targeted at a more technical audience. Click here for the ideas without all the detail.

Sometimes a technology goes mainstream, and everyone suddenly wants to show that they're at that cutting edge, so they MUST have the new thing. With Adobe basically jumping ship on Flash - HTML5 is that new thing.

Nothing new or groundbreaking here - just my thoughts on it, all in one place, as quickly as possible.

* What it is
  HTML5 is the next step in the evolution of the web. That's all. It's the specification for HTML - how it will look, and how browsers will deal with it. It separates concerns - making styling information the domain of CSS for instance. It defines things that are relevent and likely to be important in future - how to have audio and video, how to deal with email addresses and such in forms, things to make your site behave a bit more like applications (with their own little databases and things like that) and how to "semantically" construct your pages. A host of tweaks and imrovements that, on their own, wouldn't amount to much, but together are going to open the web up for vast improvements over time.

* What it isn't
  Mostly, HTML5 isn't ready yet!

  It's still being argued over and agreed upon. It'll be ready anywhere between 2013 and 2022, depending on who you ask. http://en.wikipedia.org/wiki/HTML5

  It also isn't:
  - Animations
  - Faster Javascript
  - Advanced CSS

  Confused? So is everybody else. Be prepared for lots of requests for "HTML 5" - without clear direction on what people are expecting.

* The FUD
  HTML5 is set to become the new Flash, AJAX and Web 2.0 combined. Understandably, people are worried that they'll get left behind. That no one will use their sites. That if they don't get "the HTML5", their businesses will crash and burn. It is your job to offset their fears.

* Why it's good
  Hopefully, websites will be easier for machines to read - making SEO easier to do and more honest. It'll hopefully do away with the need for third party plugins like Flash. It'll hopefully specify not only what browsers should do, but exactly how they should behave, even when failing - so web design should become more consistent, with less custom styling to get a site working in different browsers. Also - it should create an environment in which browser and website are able to behave in a more app-like manner.

* When to use it
  You can start using it right away. The secret here is to remember that most browsers only support parts of it. Building for complete cross-browser compatability with all the bells and whistles is difficult, if not impossible right now. http://www.webresourcesdepot.com/html5-and-css3-browser-compatibility-chart/ http://www.findmebyip.com/litmus/

* When not to use it
  Freaky animations - the high end stuff you'd do in Flash - rather keep those in flash. That said, you'll want to start avoiding doing that sort of thing - people with tablets and smartphones (iOS) won't be able to see your site anyway.

* How to prepare for it
 
Start getting used to having to take the animations down a notch.

Right now, having the best features of HTML5 available to you on all platforms is pretty much impossible, or possible, but with large amounts of dev work and duplication of functionality over multiple platforms.

  Use good Javascript and CSS to get most things done. Tweening libraries and CSS resetting frameworks will give you a lot of room to play. That said, you should still be aiming for a "progressive enhancement" approach - just to cover all your bases. Fundamentally, you want clean html, with nice, consistent and logical CSS and Javascript. Preparing your content for mobile and tablet devices is part of the battle anyway, so there's a good place to start. Either build an alternate version of your site for such devices or create them from the start to work on them as well as browsers.

  Right now, things are just beginning, so, for a while, it's going to feel like a ridiculous amount of work to get the most basic stuff done. You can expect things to get better shortly - even Adobe is spending a lot of time and effort in making HTML5 easier for everyone.

* Links
http://blogs.adobe.com/conversations/2011/11/flash-focus.html
http://www.w3.org/TR/html5-diff/
http://mashable.com/2011/11/11/flash-mobile-dead-adobe/
http://en.wikipedia.org/wiki/HTML5
https://developer.mozilla.org/en/HTML/HTML5#Technologies_often_called_part_of_HTML5_that_aren%27t