Mindfly Website Design Studio

We here at Mindfly take our hCards very seriously. Seriously in a sense that if there is contact information on a website, it'd better be put in a hCard.. (If you don't know anything about hCards or microformats, Janae wrote a post about them awhile back entitled Using Microformats to Find Carmen Sandiego.) Being relatively new to hcards myself, I've made some rookie mistakes that caused me endless frustration to something that seemed so straight forward. So here are my top three mistakes in no particular order:

1. Everything for the hCard has to be contained in the same <span> or <div> or <address> or whatever you decide to wrap it in. You cannot, for example, have this in your header:

<div class="vcard">
<span class="fn">Company Name</span>
</div>

and this in your footer:

<div class="vcard">
<span class="adr">
<span class="street-address">215 W. Holly Street</span>
<span class="locality">Bellingham</span>, <span class="region">WA</span> <span class="postal-code">98225</span>
</span>
</div>

They must all be bundled together in the same <div class="vcard"></div>
Maybe that seems obvious, but it wasn't to me. I thought it just all had to be on the same page with a class="vcard'.

2. There must be an "fn" or "fn org" (meaning a name or company name) included in your <div class="vcard"></div> for the hCard to even be recognized. Again, seems rather obvious, but I did not think of it because I did not want the organization name to show up in the address block - one of the downfalls (I think) to how hCards have to be formatted.

3. The class="tel" is particularly persnickety. To get your telephone numbers to pull correctly each has to be wrapped in their own <span class="tel"></span> and not lumped in together. For example if you had a phone number and a fax you would write:

<span class="tel">
<span class="type">Work</span>
<span class="value">360.647.7470</span>
</span>
<span class="tel">
<span class="type">Fax</span>
<span class="value">360.555.5555</span>
</span>

What I find particularly annoying about the "tel" format, is the types have to be home/work/pre/fax/cell/pager. As a designer, I most likely will not want the word "work" to ever preceed a phone number. I usually prefer "phone" or "tel" or nothing at all, which leads to me doubling up on class (such as class="type work") so I can set it to {display: none} in my CSS. That's not ideally how I would like to handle that, but there it is.

*As a side note: I've yet to have been able to figure out how to get the fax number to pull as "Business Fax" in Outlook rather than "Other Fax." So if anyone knows that one let me know!

When I first heard the word "microformat", I have to admit that I thought about, well, a micro format.  Making something small and more specific, to be precise.  It wasn't until I actually sat down and looked at the wikipedia article that I got even a decent understanding for what they were, although what they were and understanding the uses of them was still something a bit out of reach.  I was, of course, working on this for a client and as Mindfly has microformats sitting on their front page there for anyone to see that we support it, I figured that it was probably something that I needed to know at least a little bit about.

It was more than a little confusing, and by the time that I was done, I felt somewhat like I was ten again, sitting in front of the television trying to put together clues on how to find Carmen Sandiego.  And let me tell you, she's a sneaky devil.  But microformats?  They're even worse!  There's so much out there on the web that trying to find how to do them.  And then trying to figure out how to use them once you have?  Yeah, it feels like you've run all over the world and back.

Perhaps that's half the point anyway, since the most common use of a microformat is for addressing things.  And good thing that Carmen never put her information out on the net, because if I did happen to have it in a microformat then I would have no problem finding her.  the hCard would look something like this:

<address class="vcard">
<span class="fn">Carmen Sandiego</span>
<span class="adr">
<span class="street-address">1234 Carmen Boulevard</span>
<span class="locality">San Diego</span>, <span class="region">CA</span> <span class="postal-code">91910</span>
</span>
</address>

I could port that information right into Outlook or better yet, plug the coordinates into Google Maps and know how to go right there.

This is, of course, suggesting that you have the appropriate addons for your web browser like Operator for Firefox or the Safari Microformats Plugin.  If you're using Internet Explorer and the Google Toolbar, you can always select the "Look For Map" button at the top of a page that has a microformat on it and it will plug it straight into Google Maps for you.

The real problem lies in the fact that we all know Carmen is far too smart to be putting her information out on the web, so like the Chief we're going to have to put the clues together ourselves.  Which means that like any crime scene investigation when searching for Carmen, we're going to need sketches.  Once we have those sketches, we can quickly put together a timeline to figure out how our villianess got into her mischief, and what route she took.

An example of an event would be something like this:

<p class="vevent"><span class="fn">Carmen Sandiego</span><span class="summary">robbed the bank</span> at <span class="dtstart">9:30</span></p>

If you were to have the Javascript Timeline Application on your website and plug in this event and the ones after it that we are not using as examples for the sake of expediency and my sanity, then you would have a neatly organized timeline for tracking our dastardly do-badder's every deed.  If you want more information on using microformats with timelines, the Opera Developer's Site has a great post about it.

Unfortunately, we have a little while to wait before we can put all our tools to use and catch Carmen to put her behind bars.  Internet Explorer 8 is going to be implementing microformats, according to ZDnet's article and quote from Chris Wilson, the new platform architect for IE:

"Mash-ups will continue to drive innovation. Componentization and semantic tagging of data will be supported," Wilson told the Ajax Experience crowd. Wilson touted the harnessing of microformats, like Microsoft has done with its Live Clipboard effort, as "real world stuff" that will "make the Web much more usable."

"Microformats add meaning to content in HTML," Wilson said.

Firefox 3 will also be supporting Microformats, according to mozillalinks.org:

Microformats support is one of the most relevant features coming to Firefox 3.

It is not one of those instant gratification features like spell checking or tabbed browsing. It’s in the league of offline web applications support, web content handling and live bookmarks.

You may be like me and feel that Carmen San Diego's crimes will long since be cold cases by the time that microformats come into their full glory, but keep those case files close by. It's coming faster than you think.