Get Unstuck: Migrate to HTML5 and Avoid Headaches

As I mentioned last week, we’re moving all our public sites over to Drupal 7 and implementing a lot of features using the new APIs and features available in HTML5. After spending some time with this process, I’ve come across some interesting shifts in how I think about the markup and web applications in general.

To make my life easier in making decisions regarding those aspects, I’ve attached a Post-It note to my monitor with these rules. Basically, I try to avoid getting stuck in a loop when deciding what to do or how I approach new problems. This mostly stems from the fact that I spent three hours arguing with myself as to where to put the authoring information on a blog post. In the end, following these rules helped me make a decision and stick with it.

Rule #1: Unlearn what you have learned

Only use these five fonts. Use divs instead of tables. Prepare all gradients, corners and text replacement images. Load the usual form validator javascript library… All of your existing rules when designing and implementing web apps are to be forgotten. With all sorts of new tools at your disposal, don’t assume you already know the best way to get it done. This leads to more thinking and research at first, but you have to take the time if you want to take full advantage of everything at your disposal. And believe me, when you realize the browser will do the form validation testing for you instead of having to code it in again and again in javascript, you’ll be thankful.

Rule #2: Break it down

Now that your mind is a clean slate, void of any past experience, time to begin again. Look at your page, make a wireframe of it and get out the markers or crayons. Draw boxes around elements and decide which element should contain them. Is it an article? An aside? An hgroup inside a header? Take the time to really analyze the parts of the page. This may take a few hours, and be sure to focus on one page at a time. As you research and make focused decisions now, moving onto other pages or types of content will be made easier.

Rule #3: Subtlety is your friend

With so many changes that need to be made, it can seem to daunting to really do a good job with every aspect of your switch. But if you make small changes at first, you’ll not only be encouraged by getting stuff done, but you’ll start to see the larger picture come together almost organically. Take any generic blog post you may have. Have a look at it. Pick one thing to change which would make the experience to the user more pleasant. Well for one, you could optimize the font. Using the @font-face in CSS3 (I know, not part of HTML5 but just go with it) you can load a better font. Every blog on the planet uses Arial, Times, Verdana, Georgia and two or three other fonts. Now they’ve served us well, but why not dig for a new font. One perfect for reading long blocks of text. Check out google.com/webfonts and try out some new fonts. Or even simpler still, take any publication dates on your site and wrap them in the <time> tag. Start making minor changes and eventually you’ll see your whole site grow into a beautifully marked up masterpiece.

Rule #4: Stay focused

We’d all love to have our sites dynamically load content through a web socket connection as the user pages through articles using the arrow keys while chatting with other users through a javascript chat window using the messaging frameworks. Believe, I know. But do you remember when javascript effects were new and everyone had sliding this, fading that while the title bounced and flashed up and down continuously? Or flash intros you couldn’t skip WITH audio? Just because you can, doesn’t mean you should. Implement what makes sense. Going back to our blog post example, adding the capacity for a user to page through using the arrow keys is an excellent idea. Or maybe using the local storage and load the entire article at once and speed up paging all together. Essentially, pick a feature and stick with it. Implement it completely before moving on.

Rule #5: Assume none of this is going to work

As it stands, HTML5 is not completely supported across any of the browsers. Sure, large portions are there and support is growing. But you can’t assume everything is going to work. Also, keep in mind of your audience. Look at your stats, are they running the latest builds of the major browsers? What happens if someone comes by with an old browser? Unfortunately, unless you want to potentially alienate a subset of your users, don’t put any critical functionality behind HTML5 functions that you don’t have a fallback for. Going back to the local storage of a blog post. If you only allow users to page through their local store of data, no one using a browser without the local storage enabled will be able to read past page 1 of your posts. If you don’t care about backwards compatibility, then go nuts! If you want to require your users to use the latest and greatest, then by all means go for it.

As I continue to migrate all our markup and sites over, I’m sure I’ll run into a few more rules to make life easier. If you’ve got a few of your own, or don’t agree with something here, feel free to leave a comment below. You’ll be able to find these rules on our HTML5 enabled site in the new two weeks along with some articles showcasing a few features we’ve implemented. Until then.