Since HTML5 exploded onto the web design scene over the last year or so I’ve seen many wonderful and varied examples, read some of the books and investigated tools such as H5bp, Modernizer, shiv/shim and Initializr. I even got started with my own HTML5 endeavours with a simple, single page client site. But now it’s come time to take my existing framework pages (which I use for client work) and re-do them in HTML5.
I don’t know about you but I learn by doing – case studies and use cases – and I never really have a full and complete grasp of a new topic until I’ve had to consider every element of it when I’m making something. So that’s where I am at the moment. I have all the background info about HTML5 in my brain and I’m slowly stepping through each page element by element, considering whether I’m using the right element in the right place and I’m learning quite a bit about HTML5 as I go through this process. Handy for me, I’m essentially translating existing pages into HTML5 so I have very clear objectives, but I don’t just want to translate these files, I want to improve them as well. For me, this means adding in roles and microformats and restructuring pages with a view to providing different styles for mobile and other user agents. Maybe even trying out the whole ‘Responsive Web Design’ fluid screen malarky (all in good time of course).
For now though, I’m sticking with the basics and ensuring that the foundation of the new version of my framework is solid and worth of production usage. I would, however like to share some useful resources with you that I’ve found very helpful in building up my new HTML5 pages. Hope you find them handy too.
html5boilerplate.com – HTMl5 for the masses. Thank you sirs.
normalize.css – not directly HTML5 related but integrated into h5bp and a much better idea than a reset. Nice work. (PS I read through every line of this, you should too and make sure you know what’s going on. You might learn a few things, I did.)
Initializr – puts together a nice h5bp baseline package for you to start your HTML5 project with
HTML5Doctor.com – really handy resource site for when you’re considering which element is appropriate for your context. Invaluable I would say considering that my overarching impression of HTML5 so far is that context is everything.
DiveIntoHTML5.org – more articles discussing aspects of HTML5 and how to mark up your content.
And for the visual among us, who like cheatsheets (like me!):
The Amazing HTML5doctor Easily Confused HTML5 Element FlowChart of Enlightenment
@boblet’s HTML5 id/class name cheatsheet
I will add more as I find them.
