Microformats for Designers

In a little less than two months, I’ll be heading to Vancouver to speak about “microformats for designers” at Web Directions North. It’ll be a fun topic, and I’m starting to put together the material. I’m looking forward to talking about microformats from a designer’s perspective, including a little bit about the logo development, the implementations over at Cork’d (and the unexpected cool things that came out of that), as well as applying CSS to microformats.

But I’m also looking for help. What are some interesting things happening with microformats and design? Know of any great examples, visual experiments, etc.? Here are a few to get started:

I know there’s a lot happening out there, so let’s hear about it. And thanks!


  1. Paul Jensen says:

    At our website we’ve implemented hcards for the contact details in our premium restaurant listings. What would be fantastic would be if we could use microformats to perform context-based searches.
    In our case, it could be added to the unstructured data in our system, mainly the description information about the restaurant. This would be preferable as an alternative to our current approach of using tags.

  2. Ryan Miglavs says:

    I think I found this through a link from you, but there’s a shweet Microformats bookmarklet over at Left Logic.
    I know that’s just a bookmarklet, but I’ve been toying with adding similar functionality to my sites. It provides an immediate and tangible benefit in use for an ordinary person browsing.

  3. Chris Alexander says:

    There is also the O’Reilly Shortcut about Microformats at:

  4. Kevin says:

    I found this article on Vitamin. You’ve probably seen it but it’s also got some good links inside. Vitamin article

  5. OnTheTech says:

    Check out yourminis.com for an example of a start page browser extension that
    “… if you are on a page with microformats, MP3 files and more, yourminis will give you additional 1 click options.”
    Also, Live Clipboard from Microsoft uses Javascript and Microformats “… to easily move data from one web site to another”

  6. Wolfgang Bartelme has put together some microformat icons here.
    I dig em ;)

  7. BilleeD. says:

    I love microformats not only for the added benefits but for the fact that it has seemingly gotten us to use a standard format for marking-up contact information. ;-)

  8. Darren Wood says:

    This isn’t really a design thing – but very very cool never-the-less: new Firefox plugin, Operator.

  9. Great links, thanks, folks.
    I’m still hoping to find some great design examples involving microformats — perhaps microformats that are styled in unique and compelling ways. I’m sure they’re out there.

  10. Mark Brown says:

    I found this article very interesting -
    CSS microformats for print.

  11. Steve Ganz says:

    I’m not sure how compelling or unique they are, but I’ve gotten into the habit of styling my professional hCard to replicate my physical business card for the last two companies I’ve worked for:

  12. Rian Murnen says:

    Wikidentity is a Flash client that shows you any hCards in a page you are browsing, and allows you to search for hCards that other users have helped index. You can also export hCards that you’ve discovered to use in a variety of applications, such as Address Book.

  13. Jim Knight says:

    Dan, I’m a big fan – you have a misspelling:
    Hightlight Microformats with CSS”

  14. Chet says:

    I wonder if they have an iPhone Emulator? I know for Flash they have certain templates available to test visibility, look, and feel in the emulated size it would be.