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!
Dribbble What are you working on? 
Instapaper Icon design 
Sass For Web Designers Paperback + eBook A Book Apart
CSS3 For Web Designers Paperback + eBook A Book Apart
Bulletproof Web Design Third Edition New Riders 
Handcrafted CSS Book and DVD New Riders 
Web Standards Solutions Special Edition Friends of Ed
16 Comments
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.
This may help.
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.
There is also the O’Reilly Shortcut about Microformats at:
http://www.oreilly.com/catalog/microformats/
I found this article on Vitamin. You’ve probably seen it but it’s also got some good links inside. Vitamin article
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”
Wolfgang Bartelme has put together some microformat icons here.
I dig em ;)
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. ;-)
Alex Faaborg has been covering microformats in a multi-part series over at his blog. Pretty interesting stuff!
Microformats – Part 0: Introduction to Microformats
Microformats – Part 1: Structured Data Chaos
Microformats – Part 2: The Fundamental Types
Microformats – Part 3: Introducing Operator
This isn’t really a design thing – but very very cool never-the-less: new Firefox plugin, Operator.
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.
Hi,
I found this article very interesting -
CSS microformats for print.
http://alistapart.com/articles/boom
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:
http://steve.ganz.name/hcard/linkedin/
http://steve.ganz.name/hcard/paypal/
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.
Dan, I’m a big fan – you have a misspelling:
“Hightlight Microformats with CSS”
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.