Optaros Labs

Microformats FTW (For the Win!)

Microformats are “a set of simple, open data formats built upon existing and widely adopted standards” – essentially small html markup standards for representing specific kinds of data, like contacts, events, and relationships between people.

In this post we’ll look at three microformats tools for popular browsers:

1. The Operator plugin for Firefox
2. The Safari Microformats Plugin
3. The Microsoft Oomph! Add-in for Internet Explorer

Because microformats are designed “for humans first and machines second” and are unobtrusively embedded in html, it is often easy for people to overlook their presence, unless they’ve specifically enabled a microformats plugin, or otherwise made their web browser microformats-aware.

For example, the address information on my user page on optaros.com is marked up with the hCard microformat, but to the average browser there’s no clear indication that anything is special about that address (as seen here on the right).

Well, there is the “add to address book” link – which uses a technorati service to translate the hCard markup into a downloadable vCard – but otherwise there is little to suggest that this is any more than a standard html block.

To really get the benefits of Microformats, users have to use a browser which is “microformats enabled” or “microformats aware.”

For Firefox, this is most easily accomplished by installing the Operator toolbar. It’s a firefox add-in, developed by Mike Kaply, and available for Firefox 2 or 3.  It’s got two display modes: one focused on “actions,” which shows you how you can act on the microformats found in the page, and one focused on “data formats,” which shows you which microformats are available in the page, and then what actions you can take.

For example, on the same page shown above, Operator’s “actions” mode shows the following:

While the “data formats” mode shows the following:

In either case, the Operator toolbar is signaling to the user the presence of specific types of data on which the user can act. (For more on Operator and its capabilities check out Mike’s page on it, including Operator User Scripts, which enable people to extend the functionality inside the plugin for existing microformats and add support for additional microformats).

For Safari users, there’s a similar add in called (descriptively if not imaginatively) the Safari Microformats plugin.It displays the microformats icon in the location bar whenever microformats are found, and when you click on that icon you get a dialog like this one:

Note that I switched to johneckman.com here – for some reason (having to do with the fact that my user page also loads via javascript some blog posts after initial page load) the Safari Microformats plugin isn’t currently recognizing the hCard on optaros.com. The Safari microformats plugin does hCard and hCalendar, and is free (as in beer) but not open source.

Finally, Microsoft recently announced their own microformats plugin. Released under the Ms-PL (Microsoft Public License), the (imaginatively if not descriptively named) Oomph Toolkit includes an Add-in for Internet Explorer as well as “a set of CSS styles that can be used to make Microformatted content look great.” When IE with the Add-In installed comes across a page which includes Microformat content, a microformats icon appears in the top left corner of the page, and when clicked reveals a hovering div containing the microformatted info and the actions the user can take. Expanded, it looks like this:

The actions at the bottom allow you to export the data to Yahoo!, Outlook, or Mac address books. When I first saw this I was a bit confused, since this is an Internet Explorer Add-in, who’s going to use the export to Mac formats?

Interestingly, however, the way the team approached the problem could be useful even for non-IE using folks:

Architecturally, the Add-in actually injects a line of Javascript into web pages with Microformats. This Javascript can also be manually added to web pages, providing a cross-browser experience. You can see an example of this here.

In other words, sites could embed the necessary javascript to expose their microformats, and alter the display to suit, creating an experience appropriate to their site design. (Not everyone will opt for the hovering microformat logo in the upper left). Get it here on codeplex.

Related links worth reading:

Alex Faaborg at Mozilla posted a four part series back in 2006-2007 about the challenges of making microformats visible and accessible to the browser user:

• Introduction to Microformats
• Structured Data Chaos
• The Fundamental Types
• Introducing Operator

Tags: addin, design, firefox, hcalendar, hcard, internet explorer, microformats, microsoft, plugin, safari, user experience, ux, web browser

This entry was posted on Saturday, November 8th, 2008 at 12:10 pm. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.