A Blog Not Limited

to web design, standards & semantics

Oomph Microformats Toolkit

Oct 24, 2008

Published in

I'm taking a short (I promise) break from my Getting Semantic With Microformats series because I need it, and I wanted to spend some time playing with and reviewing the Oomph microformats toolkit from MIX Online that I discovered this week.

This way, you (my beloved four readers) still get some microformat goodness, and I get a much-needed break from the intense research and writing I've been doing.

Let's get started, shall we?

Oomph? What Is It?

Oomph is a toolkit intended to make it easier for designers and developers to implement microformats. It not only has a cool name (well, more cheesy than cool), but it has some cool stuff:

  • Cross-browser jQuery overlay that aggregates and exports microformats
  • Internet Explorer Add-in that aggregates and exports microformats
  • Sets of CSS for styling microformats
  • Windows Live Writer plug-in for generating hCard information

And in the spirit collaboration and extensibility, the toolkit is on CodePlex, Microsoft's open source project hosting site.

All of this sounds pretty good, right? Yeah, to me too. So, I just had to spend some time with Oomph and really see if it is something I would use myself.

Cross-Browser jQuery Overlay

The first part of Oomph I wanted to check out was the jQuery overlay, which couldn't be simpler to add to a site.

Just two lines in the <head> of pages that contain microformats if you are already referencing the jQuery library (which I am):

  1. <script type="text/javascript" src="https://visitmix.com/labs/oomph/1.0/Client/jquery-1.2.6.min.js"></script>
  2. <script type="text/javascript" src="https://visitmix.com/labs/oomph/1.0/Client/oomph.min.js"></script>

What does this give you? Well, if you are reading this article on my blog (opposed to the RSS feed) in a browser, take a gander at the upper left-hand corner. That's the Oomph "gleam" (yeah, the naming is seriously cheesy):

Oomph jQuery microformats icon

That little icon is generated by the jQuery and indicates there are microformats (hCard and/or hCalendar) on the page. If that icon is selected, the overlay kicks in:

Oomph jQuery microformats overlay

The overlay displays hCalendar information on the left and hCard on the right. If it detects more than one hCalendar or hCard on the page, it provides "Next" and "Prev" links to progress to the other sets of information.

Update: 2/19/2009

I've decided to remove Oomph from this blog due to a known bug/issue that causes conflicts with other jQuery calls on this site.

I still support Oomph and hope to get it back on my blog soon. But until this is fixed, I shall remain Oomphless.

Export Microformats

It also provides a wide range of export options (all of which work) for hCalendar:

  • Google calendar
  • Apple iCal
  • Yahoo! Calendar
  • Outlook
  • 30 Boxes
  • Windows Live

As well as for hCard:

  • Apple Address Book
  • Outlook
  • Yahoo! Address Book

Mapping

Another interesting feature is that the overlay provides an option to view adr information contained within hCalendar or hCard on a map via Microsoft's Virtual Earth:

Oomph jQuery microformats map

Not Entirely Cross-Browser

I tested the Oomph jQuery overlay across all the browsers to which I have access:

  • Firefox (Mac/PC)
  • Safari (Mac/PC)
  • Chrome
  • Opera (Mac/PC)
  • Camino
  • IE7
  • IE6
Safari on the PC Gets No Love

It is functional across all browsers except Safari for the PC.

The Oomph icon would appear, but I couldn't trigger the overlay in Safari on my PC.

IE6 Is a Bitch (Of Course)

If you happen to be viewing this article in IE6 (but why on earth would you be doing that!?), you have to scroll all the way to the bottom to see this little icon.

And it totally fucks my footer layout.

Why? Because IE6 blows and you must upgrade. Now.

However, the Oomph developers have noted that the possibility of display conflicts (not explicitly related to IE6) that can be resolved by modifying positioning in the Oomph CSS (or maybe overriding it with greater specificity in my own CSS).

A Few Issues

While playing with the jQuery overlay, I noticed a few issues. These are relatively minor and will probably be resolved as the project evolves. Worth mentioning, nonetheless:

Email in hCard

For hCard microformats, the jQuery aggregator doesn't grab the right information for email link (<a class="email">) in an hCard. It appears to pull the content that displays on the browser, rather than the href="mailto:" value.

So, if you have something like this in your hCard (which I do):

<a class="fn email" href="mailto:emily@ablognotlimited.com">Emily Lewis</a>

The jQuery hCard aggregator grabs "Emily Lewis" as my email address, rather than "emily@ablognotlimited.com".

URL in hCalendar & hCard

For both hCalendar and hCard microformats, the jQuery aggregator appears inconsistent with URLs. It recognized the URL value for one hCalendar event on my site, but not for a different hCalendar. Same with hCards.

I validated all instances of hCard and hCalendar on this blog, and also confirmed that other aggregators recognized the URLs consistently.

I'm not entirely sure what the differences are that cause this issue. And I don't really have the time or interest to figure it out.

Page Load

Since adding the Oomph jQuery to my pages, I've noticed an additional 2-3 second delay in my page loads on my high-speed cable connection. Sounds negligible, but I noticed it, and that's not something I normally pick up on.

I am calling the Oomph JS from the visitmix server, which then calls the Oomph CSS from that server. But I have no idea (and it isn't even close to an area of knowledge for me) if the page load speed would increase if I was hosting it myself.

Internet Explorer Add-In

Now, on to Oomph's IE add-in.

Before I messed with the add-in, I first removed all of the Oomph jQuery from my site, so as not to get the two mixed up. Because, according to Oomph, the functionality would be the same.

Next, I downloaded the install file and ran it. Took about a minute. Simple.

Then I launched IE7. Voilá, the Oomph gleam icon appeared in the upper left-hand corner, just as it did with the jQuery.

When I clicked the gleam, the overlay appeared, and all the aggregated content was the same as it was with the jQuery:

  • Both hCalendar and hCard information was aggregated
  • Export links for both hCalendar and hCard were available and worked
  • Mapping information was available for adr content

The Problem Child: IE6

Because I like to torture myself, I checked out the add-in on IE6. And just as with jQuery, the add-in renders at the bottom of the page on my site.

And just as with the jQuery in IE6, the add-in screwed up my footer layout. However, not nearly as much as the jQuery did.

Fortunately, for me, these are non-issues, because I think of IE6 as a non-browser and I don't support it for my blog.

One IE6-specific issue that is annoying from a usability perspective: if there are multiple instances of hCard on a page, selecting the "Next" or "Prev" links reset the focus of the page to the top of the viewport. So the user must then scroll all the way back down to see the overlay information.

Issues

Other than the IE6 issues, the add-in functionality was fine. Although, it has the same issues I noted the Oomph jQuery has:

  • Incorrect aggregation of email information for hCard
  • Inconsistent aggregation of URL information for hCalendar and hCard

CSS Sets

One of the more clever things, I think, about Oomph is that the toolkit includes sets of CSS for styling hCard and hCalendar information.

This is really quite brilliant, because microformats use a standard set of class values, making them ideal for CSS sets and frameworks.

Here are some shots of the various styles in action, with hCard example on the left; hCalendar example on the right:

Light Rounded Corners

Oomph CSS - Light Rounded Corners

Dark Rounded Corners

Oomph CSS - Dark Rounded Corners

Blue Rounded Corners

Oomph CSS - Blue Rounded Corners

Notebook

Oomph CSS - Notebook

Grunge

Oomph CSS - Grunge

Basic Dark

This one comes in fixed- and auto-width options:

Oomph CSS - Basic Dark

Issues? Not Really.

I peeked at these examples across all of my browsers and they all render relatively consistently (with the expected issues in IE6).

From a slightly negative perspective, I can't say I'm a huge fan of how the CSS itself was written. Not enough short-hand for my preferences.

That said, though, the CSS is well-commented, so would be very easy to work with and manipulate.

The only other thing that bugs me ever so slightly about the CSS sets is that they rely on a common/consistent way of marking up the microformats.

Personally, I apply microformats across the entirety of my blog (especially hCard), so the markup varies according to context. In this type of situation, the CSS sets couldn't be used as-is. There would have to be some modification.

But, even if you don't use these styles, they provide some very nice inspiration for what can be done with microformatted content.

Like I've always said, styling microformats is only limited to your CSS skills.

Windows Live Writer hCard Plug-In

I don't use Windows Live Writer, but I wanted to see how the Oomph plug-in worked, so I set it up (the lengths I go to for my four beloved readers).

Not even going to comment on Windows Live Writer, but the Oomph hCard plug-in was easy to add and easy to use. I just downloaded and ran the install file, and the option appeared in my list of plug-ins:

Oomph Live Writer hCard Plug-In

The plug-in gives you a form to enter contact information:

Oomph Live Writer hCard Entry Form

And upon submit, adds it to your Live Writer page:

Oomph Live Writer hCard Generated Content

I took a peek at the source:

<div class="vcard"><img class="photo" style="float: left; margin-right: 4px" alt="photo of Emily Lewis" src="http://www.ablognotlimited.com/images/emilyLewisThumb.jpg"><span class="fn n"><span class="given-name">Emily</span> <span class="additional-name">Paige</span> <span class="given-family">Lewis</span> </span> <div><a class="email" href="mailto:emily@ablognotlimited.com">emily@ablognotlimited.com</a></div> <div class="adr"><span class="locality">Albuquerque</span>, <span class="region">New Mexico</span> <span class="postal-code">87106</span><div><a class="url" href="www.ablognotlimited.com">www.ablognotlimited.com</a></div></div>

Perfectly acceptable and valid.

Though, I'd personally prefer indented and formatted markup, not to mention more semantic. And I'd prefer that it not generate the inline styles. And I don't like the "divitis."

But that's just me.

So this seems like a great tool for Live Writer users, though I'm not too sure how many of them are out there. I didn't even know what Live Writer was until I had to test this plug-in.

Final Say

At the core of it all, I love microformats, so I'm a fan of Oomph.

I believe anything that attempts to not only spread the word about microformats, but to make it easier for people to implement and use is a good thing.

hCard Plug-In

Personally, I don't see myself ever using the hCard creator. Primarily because I don't use Live Writer.

But even if I did, I love hand-coding. I don't use any of the creators out there. So it isn't a knock against Oomph.

CSS Sets

I also don't see myself using the CSS. But, again, this is because I have a tendency (one which I'm trying to break) to want to style things myself. I don't even use the CSS frameworks out there.

This says more about me as a stubborn front-end developer than it does about the Oomph CSS (or CSS frameworks, for that matter).

IE Add-In

As for the IE add-in, I'm going to keep it installed on my work Dell laptop. Doesn't seem to hurt anything, and it tells me when microformats are on a page. Since IE lacks most of the cool browser add-ons I use to tell when microformats are present, this is useful to me.

jQuery

Finally, the Oomph jQuery. I'm going to keep it in place for now. At a minimum, if you are reading this article on my blog, I'd like you to be able to see it in action.

I also think I could easily mess around with the Oomph CSS to get it to look a little nicer and maybe even get some IE6 cooperation.

Oomph = Useful Toolkit

It is definitely a useful addition to my blog, and tells all users that there are microformats present. This is especially cool for those users who don't know what they are and don't use the browser add-ons that tell them when microformats are on a page.

And, at the end of the day for me, it is all about promoting microformats.

Oomph achieves that.

HTML5 Cookbook

Interested in HTML5?
Get the Cookbook!

I was a contributing author for HTML5 Cookbook, available for sale on Amazon! Get yours now! (I hear chapters 1, 4 and 5 are particularly good.)

P.S. Don't forget my book Microformats Made Simple is still for sale!

Tags:

Share the Love

Joshua Allen's Gravatar

Joshua Allen opines:

10/24/2008

Thanks for reviewing Oomph!  We’re glad you liked it, and we really appreciate the detailed feedback.  I’m logging individual work items in the codeplex site for the issues you pointed out in the live writer plugin and the e-mail/url handling.  We’ll be updating the toolkit with some bug fixes, and will take care of those.

Regarding the speed issue, we did notice that the overlay loads faster if you pull jQuery from the Google CDN, so we will be investigating whether it’s faster to put the files on our own CDN.  It’s also going to be a bit faster if you host it yourself on HTTP instead of HTTPS—we host via HTTPS since we want to protect people against DNS poisoning attacks, but that’s not an issue for self-hosters.

Comments about the CSS are spot-on.  We hope the CSS library and plugin can bootstrap people who are beginners and who tend to copy/paste and follow examples, and then after they gain experience they’ll graduate to customizing and hand-coding.  Really good feedback about “divitis”; I’m raising work item to look at it.

And what can I say about IE6?  You pretty much summed it up.  IE7 has bypassed IE6 share finally, and we expect IE8 to be the most popular browser in the world by end of 2009.  And of course Firefox, Opera, Safari and Chrome are all more modern than IE6.  Having said that, we are accepting community source code submissions (and everything is Ms-Pl, a BSD-style license), so there’s no reason we couldn’t see IE6 support going in if the community felt it important enough.

Anyway, thanks again, and keep the feedback coming!

Emily's Gravatar

Emily responds:

10/24/2008

@Joshua - More than happy to provide the feedback.

I should be thanking you for providing something fun for me to mess around with. Not to mention, for creating a toolkit that helps increase the ease of implementing microformats.

Thrilled to hear you are going to be implementing some changes on the (very minor) issues I noted. So nice to see such responsivity.

Great work and don’t hesitate to let me know if I can provide any other feedback/testing/etc.

Meitar Moscovitz's Gravatar

Meitar Moscovitz opines:

11/11/2008

This is a fantastic review of Oomph. Thanks so much for writing it out and for helping me to so quickly get my head around all it offers. I first saw Oomph in action right here and, for the reasons you describe in this quote:

I believe anything that attempts to not only spread the word about microformats, but to make it easier for people to implement and use is a good thing.

I decided to wrap Oomph inside a WordPress plugin for any non-developer laymen who like the idea of using its functionality to compliment a microformatted WordPress theme.

As an aside, I am seriously impressed with the detail you’ve shown your own site’s code. I suffer from an incredibly powerful affliction of cobbler’s children syndrome….

Emily's Gravatar

Emily responds:

11/11/2008

@Meitar - Thanks so very much. Always nice to hear what I’m producing is helping people.

And ever nicer to hear from a fellow proponent of microformats :)

I don’t use WordPress, but am thrilled you developed something for that community to hopefully encourage broader use of microformats.

And thanks, too, for the comment about my code. I take a fair amount of pride in clean, valid and semantic markup. So it is nice to hear that is appreciated by someone other than me ;)

Cheers!

Karsten Januszewski's Gravatar

Karsten Januszewski opines:

11/25/2008

Hi: Thanks for your write up of Oomph. I’ve been looking at fixing some of the issues you found. I fixed the mailto: parser problem (will be pushed out in next build) but I can’t seem to repro the URL problem, which we’ve logged at http://www.codeplex.com/Oomph/WorkItem/View.aspx?WorkItemId=769. Can you provide a link to the repro? Thanks, Karsten

Emily's Gravatar

Emily opines:

11/25/2008

Karsten - I tried to access the link you provided to log the “URL problem,” but kept getting an error. Hoping you signed up to be notified of comments ...

Anyways, here’s what’s happening (sorry I wasn’t more specific in this post):

There are 8 hCard references in this article.

If you launch Oomph on this page, you can see the URL information displayed for all 8 hCards, but only two of the hCards (Andy Clark’s and mine) show the URL as an active link.

I also see this inconsistency with hCalendar instances on my blog. This article displays the event URL as a link.

However this article does not.

I just quickly double-checked my markup and it appears everything is correct.

Hope this helps!

Jiří Stárek's Gravatar

Jiří Stárek opines:

03/15/2009

I read this and i have question… why it is so complex.. microformats are as dump of diferrent codes

.carolinecblaker.'s Gravatar

.carolinecblaker. opines:

12/29/2009

Hey Em, I’m reading this trying to use OOMph in a not-yet-live project - I checked the bug above, and they said it is resolved as of JQuery 1.3.2 - would you consider re-OOmphing and documenting here? xo .ccb.

PS - what’s that nifty comment previewer?

Emily's Gravatar

Emily responds:

01/04/2010

@Caroline - That bug may be resolved but there is some other conflict with the jQuery UI I’m using on the site right now, so I don’t want to re-implement Oomph on this blog yet, until I figure out exactly what the issue is.

Once I do, though, promise to update this post with details and maybe a new post.

As for the comment preview, it is a total hack job, but I did a post after I implemented it: http://www.ablognotlimited.com/articles/live-comment-preview-for-expressionengine/

jesudas's Gravatar

jesudas opines:

04/24/2011

Hi its really nice addon for microformat..

i have implemented in my calendar page..

its also showing expired events… its should not publish expired event.. i guess ?

Nour Akalay's Gravatar

Nour Akalay opines:

11/01/2011

Hello, I just wanted to comment on what you said about emails: “It appears to pull the content that displays on the browser, rather than the href=“mailto:” value.”

Actually I see it as a good thing because my href value is not a mailto, it’s an anchor to a form that will appear in a lightbox. I tried to use other services and because they look for the mailto they always get the email wrong. I would have no choice but not to use my form.

Although I know it is not strictly semantically correct; given my situation i think oomph is doing it the right way by allowing some linking flexibility.

Commenting is not available in this channel entry.

The Coolest Person I Know

Emily Lewis

Yeah, that would be me: .

I'm a freelance web designer of the standardista variety, which means I get excited about things like valid POSH, microformats and accessibility. I ply my trade from my one-person design studio in Albuquerque, New Mexico 87106 USA.

A Blog Not Limited is my personal blog where I pontificate about web design, web standards, semantics and whatever else strikes my fancy. Head on over to Emily Lewis Design if you'd like to see my work or, even better, hire me.

More

I Tweet, Therefore I Am

Follow @emilylewis on Twitter!