Last week the good folk over at Carson Systems launched Vitamin, a new and thoroughly modern magazine-style training resource for web professionals. I think the site’s gorgeous, and the content so far appears to demonstrate that there’s more to Vitamin than just a pretty face.

Something struck me about the site as soon as I saw all the list of advisors. It’s the perfect candidate for exuberant use of the hCard microformat, so I dropped Ryan Carson a line and made the suggestion. Ryan’s interest was piqued, and he took me up on the offer to work through some examples.

Retrofitting

Retrospectively working a microformat into someone else’s page is quite a enlightening experience, as it turns out. The main thing I was reminded of was that clean, well structured markup (which thankfully is what I was working with) makes any future amendment or maintenance job tremendously more efficient. I think in nearly every instance, the content I was needing to attach a new class name to already had a strong, logical container that I could reuse. Good markup pays, people.

The second big lesson from a microformats point of view is that it helps to be familiar with commonly used class names from the start. I came across a number of well-chosen class names like company already being used for CSS, which I then had to supplement with hCard’s org class name. This felt a little redundant. In my own work, I think it would be useful to try and use sanctioned class names wherever possible, even if I have no intention of applying a microformat at the time. Should my needs change later, this would help me keep the markup tight without having to go back and make big changes to my stylesheets.

Joining disparate data

One practical issue you sometimes come across, particularly with hCard although it applies to other formats too, is that the information you need to wrap up together is spread around on different parts of the page. This was the case for the general contact information on the About page – I had all the contact details, but the word ‘Vitamin’ which I needed for the name of the card, wasn’t anywhere close by.

A technical solution for this is provided in the form of the include pattern, which uses an OBJECT element to reference one partial code block from another. I can see that this is a workable idea, but to me it feels like too much of a hack. Or if not a hack, it just feels like an inelegant solution. Certainly in this case it would have been a rather unwieldy sledgehammer for a distinctly puny nut. Instead, I opted to slip the name into the content and hide it with CSS. So “Contact Details” became “Vitamin Contact Details” with the first word wrapped in a span and given the old display:none; heave-ho.

All in all it was a very painless exercise, which is one of the objectives of microformats, after all. You can see the hCards at play on the Home page, the About page and on the Advisory board page too. Obviously it’s quite a big site, but this is a strong start on some key pages.