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