The redesign of Shaping the Page is the first full site we’ve marked up using HTML5. The new site actually started as XHTML because we didn’t think we’d have the time to really get our heads into learning something new, and couldn’t afford to have HTML5 slow us down. But after reading Jeremy Keith’s tiny book HTML5 for Web Designers, we had a new boost of confidence. And what better place to practice than on our own site?
We found HTML5 to require a bit more planning due to the additional semantic layers involved. What group of information on the page warrants its own section? When should we mark something as an aside? How many footers are actually on the page? Questions like this didn’t come up in the land of XHTML. But we found the additional semantic layers actually forced us to think about our page structures a little deeper than before, and that’s a good thing. We also feel like the proper use of certain elements are still up for debate. We can foresee the lengthy comment threads, where web developers go back and forth on whether or not a particular grouping of content should or shouldn’t be a footer. On our site we used our best common sense to make those kind of decisions, and perhaps we’ll adjust things as we learn more.
Some other resources that came in handy were HTML5 Reset and HTML5 Boilerplate. Both of these sites offer default HTML and CSS templates as a starting point for building your HTML5 sites. Very helpful.
We also took our first stab at CSS3 animations. Ours are very simple, and you’ll only see them if you’re using a webkit-based browser like Safari. Each one of our origami animals on the site perform a unique behavior when hovered over. The elephant raises his head. The butterfly spins. And the bird and kangaroo both jump up. The animations were easy to implement, although we’re trying to solve what looks like a screen flicker when the page is scrolled and the animals are hovered over. We’ve seen the same problem on other sites, and if we find a fix we’ll post it here.
We like HTML5, and didn’t come across any major snags building our site. We still need to make some tweaks for visitors using Internet Explorer, but that’s always the case. Will we use HTML5 for our client work? I think it will depend on the client, who the audience is for the site, etc. But from now on we definitely won’t shy away from it, and we’ll start looking for excuses to use it!
Tweet