I finally rewrote alexanderbecker.net in HTML5. Here is why and how I made the transition --
While the pages on the site look all new -- I wanted whitespace, and lots of it -- the magic lies under the hood.
HTML5 makes it easy to structure the code with even more semantic meaning than the previously used (and beloved) XHTML, also, the site is optimized for mobile devices using CSS, there is Microdata added with authorship-enhancing features, it's bilingual, simple, it is all coded in reusable functions in PHP, and the Showcase is written in Blogger's own template style.
The Making-Of
Why HTML5?
XHTML provides strict, and requires well-formed markup, yet, HTML5 is a more complex animal, consisting of many different aspects, among them the canvas, simple video embedding, geo-location, local data-storage, and forms on a whole new level.
If you plan to do anything sexy with a site, allowing truly interactive user-manipulated interfaces, or multimedia-rich applications, or full-fledged web-apps, HTML5 is the way to go.
Semantics
Since the beginning of using markup, for me, in the mid-nineties with HTML 3.2, I was fascinated with adding meaning on a semantic level. Naturally, I discovered XML and built my first CMS using the power of custom DTDs and reusable, tagged, and attributed data to create archives for the future. Then came XHTML, and all of a sudden, we were able to share our semantically enriched content. One thing always bothered me, though: Why don't we have a standard tag for the date of an article or blogpost? Enter HTML5: <time datetime="2011-08-22T13:37Z">Monday, August 22, 2011</time> -- isn't that beautiful?
There are some more new tags: <header>, <nav>, <aside>, and <footer> for the general areas of a webpage and <article>, <section>, and <hgroup> to structure a typical post. View the source of this site, it's quite elegant.
Microdata and Authorship
Another promising technique was -- and still is -- RDF, making statements about resources,
very abstract and apparently too scary-looking for the majority of web-developers.
Now, with Microdata, HTML5 lets you nest semantics within existing content on web pages,
the keyword being "Extensibility." Microdata adds custom attributes and allows you to markup, for example, names and addresses and other personal or corporate data to be extracted by appropriately configured user-agents. An example -- which works today, not in the future and which is not too abstract -- are the small meta-info excerpts, shown below many Google results, where they are called rich snippets. The "authorship markup" belongs here also -- hard to resist it, as a semantics freak.
Templates
Adapting previously built PHP-templates is pretty straightforward, as in updating code and integrating the newly available tags. Blogger is a little trickier; the newer Blogger templates use HTML5 themselves to interactively customize -- once you paste the perfectly valid HTML5 source into the template editor, the content-type is automatically changed to XHTML. It still works, though.
CSS & Webfonts
CSS3 support is getting quite good across browsers. While researching the current differences in displaying styles, I came across normalize.css, which doesn't simply reset styles but does something more intelligent: it preserves some defaults and enforces them for consistency.
Not too long ago, fonts were very much restricted and had literally gotten old. I never really used the various genius techniques to replace text with custom fonts -- but this is 2011 -- all modern browsers support Webfonts. And if it's only to see some new faces.
Mobile: The Return of the Monocolumn
Last but not least, everything and everybody is mobile today. It's easy with the use of some clever CSS, but instead of merely adjusting the site's layout to the mobile world, I wanted to take something from mobile. This being the day of the battle of the interfaces, the smartphone monocolumn brings back an elegance that was almost lost over 3-5 column megapages. Part of the plan was whitespace and the monocolumn, even on a 22" screen, works surprisingly well.
The bastardized 4-column giga-footer is a built in design-irony, I know. It stacks up on too-narrow mobile devices and on a broad screen, it adds a foundation of four pillars, artefactual, if you want to...
Resources
- Mark Pilgrim's Dive into HTML5
- Dive into the new elements
- Dive into Microdata
- Google's structured data
- Google's rich snippets
- Google's authorship markup
- Google's webfonts
- Normalize.css
- HTML5 shiv, introducing IE to the new elements (Here is how)
- JavaScript-driven feature detection
HTML5 Boilerplate is the professional badass's base HTML/CSS/JS template for a fast, robust and future-proof site.