Use µ- to Identify Microformats

I’m a fan of microformats. I think using microformats is one of the best, unobtrusive techniques we can use to make the web more practical. Typography, layout, design are all so overloaded and applying a microformat is a quiet way of distinguishing between, say, this centered block of three short lines of text that’s an address from that centered block of three short lines of text that’s a haiku.

When Google launched their recipe view it meant that some part of the long-held dream that semantic markup would help guide us though the jungles of web content was finally being realized. More recently Foursquare started requiring hCard markup for websites that want to employ a “Save to Foursquare” button (you can also use Facebook’s OpenGraph, but don’t do that). This makes sense for them since it ensures an automated way for them to harvest location data, but it’s a bit of good citizenship, too, since that data is open and available to anyone. I have a nice little Michromeformats extension installed in Chrome that alerts me whenever I’m looking at a webpage containing one of the microformats it knows about (hCard, hCalendar, hReview, hRecipes, geo) When this pops up I can click on it to see what’s there.

Michromeformat displaying hCard on the Guggenheim website

That’s great for the five microformats that this extension can handle, but what about the rest? How would you even be able to identify a microformat without knowing about it already? Since microformats just use classes applied to HTML elements, how are you supposed to know that <span class="region"> is an hCard field rather than something that a web designer just used to identify a region of the screen?

I’m working on the Guggenheim’s Collection Online and wondering if we don’t want to come up with a microformat for works of art or museum objects in general. This is probably a hopeless task and one that’s been considered before, but why worry about that? What we need is a simple way to flag markup as belonging to a microformat so that it can be recognized without any prior knowledge. Here’s my suggestion:

µ-

Just as you add classes to markup for a microformat, you can add this prefix to the main class to indicate that the class does belong to a microformat. Call it an µ-class (perhaps this reeks of Hungarian notation, but the web is certainly “untyped”). Note that this is a Unicode micro sign (U+00B5) not a Greek small letter mu (U+03BC). In some fonts they look identical, in some the micro sign looks italicized. Almost all Unicode characters are valid in a css name, and even if you don’t need the extended character set you should still be be using Unicode. You can escape Unicode characters if you (e.g., 003bc) but there are browser bugs regarding these escape sequences that make straight Unicode much more practical.

If I were to come up with a microformat called cultureObj, say, and use it to mark up a caption for Kandinsky’s Painting with White Border, why not just make the class that identifies it µ-cultureObj (NB, no actual thought when into this markup, it’s just for the sake of an example):

<div class="µ-cultureObj">
  <span class="objnames">
    <span class="objname lang-en">Painting with White Border</span>
    (<span class="objname lang-de">Bild mit weißem Rand</span>)
  </span>,
  <span class="objdate" title="1913-05">May 1913</span>.
  <span class="material">Oil on canvas</span>,
  <span class="dims">
    <span class="dims dim-standard">55 1/4 x 78 7/8 inches</span>
    (<span class="dim dim-metric">140.3 x 200.3 cm</span>)
  </span>.
  <span class="credit">Solomon R. Guggenheim Museum, New York,Solomon R. Guggenheim Founding Collection, By gift</span>
  <span class="objid">37.245</span>.
  <span class="copyright" title="2009">© 2009 Artists Rights Society (ARS), New York/ADAGP, Paris</span>.
</div>

For an already prevalent microformat, you might need to double the class. For this hCalendar snippet, the format is identified by vevent and µ-vevent is added for the sake of discoverability (a small price):

<div class="vevent µ-vevent"><a class="url" href="http://conferences.oreillynet.com/pub/w/40/program.html">

http://conferences.oreillynet.com/pub/w/40/program.html

 </a>
 <span class="summary">Web 2.0 Conference</span>:
 <abbr class="dtstart" title="2005-10-05">October 5</abbr>-
 <abbr class="dtend" title="2005-10-07">7</abbr>, at the
 <span class="location">Argent Hotel, San Francisco, CA</span>
</div>

Discoverability is important. If you knew nothing else, you would know that these two blocks were marked up according to some criteria. You would also know to at least search for “cultureObj” and “vevent” to see what you could find.

A lot of markup, especially that generated dynamically using data coming from databases, already amounts to a kind of microformat-in-waiting. This µ- prefix then serves as a proposal. It indicates that you think the markup you’ve adopted could serve a more general purpose. If, for example, you were looking for examples of how museums formatted works of art, and if museums used µ-classes to identify their ad-hoc microformats, instead of wearing out your eyes perusing a vast number of museum websites you could just spider those websites looking for µ-classes. It then becomes easier to know when enough people are using a particular format to think about formalizing it, or when there are enough different formats in use in a particular domain to think about reconciling them and developing a single standard.

(Photo: Berri by Nesster)

Online, Can a Museum Be A Person?

[This is the English version of post originally published on c/blog]

Are museums people?

What is a museum online? A website is a destination so visiting a museum’s website is analogous to visiting its building—it has an address on the internet just as it has an address on the street (assuming it isn’t a virtual museum!) The same term, “visitor,” is used to identify you both when you view the museum’s homepage and when you walk through its doors. In email, sending an inquiry to the main museum email address isn’t much different from calling the museum’s main telephone number. Email and websites were born in institutions—the first people to have either in large numbers were at universities—so models were easily found for the existing needs and practices of museums.

Continue reading

Craft the Backs of Fences


Gawker recently published (Oct 28, 2011) an article, “The Most Anal CEO Ever,” that’s a little bit myth-making, a little bit making fun of a man’s eccentricities,  but can’t quite decide if Jobs was brilliantly sweating the small stuff or tyrannically wasting people’s time. The gist is that Jobs cared a lot about things that nobody else would ever care about. His success is left on the table as some kind of argument, and the writer gives in to the temptation of letting his behavior seem pretty crazy (like tearing off his oxygen mask because he hated the design) but doesn’t dig into why this might be a good thing sometimes. On the one hand we see him taking forever to redesign the interior of his private jet with brushed-metal buttons; on the other he sends an excited engineer back to the drawing board to enable rectangles with rounded corners in the Mac interface.
Continue reading

Open in a new Window with Google Event Tracking

Tracks by Steve Crane

Google Analytics event tracking doesn’t play nice when you’re trying to track clicks on links that open in a new window.  I recently ran into this problem on guggenheim.org and found that is a frequently asked, poorly answered question on forums, etc. Here’s how I solved it with a very little bit of jQuery

Continue reading

Prediction: When will the Met have 500K fans, MoMA 1 million?

Passé / Futur by an untrained eye (via Flickr)

(Update below)

My list of Museums on Social Media now automatically updates Facebook and Twitter numbers, and even after a few days this has provided enough data to make some predictions. The two museums with the most “likes” on Facebook, The Metropolitan Museum of Art and MoMA, are close to big milestones.

The Met was less than 10,000 short of 5oo,ooo likes as of May 30, 4:15pm EDT and gaining 1 visitor every 22.59 seconds (interactive graph here). At that rate, they should reach half a million likes sometime around June 1st 11:06:33pm EDT.

Now, MoMA is the André the Giant of museums in the social media ring. As of May 30, 4:15pm EDT they had 763,454 likes. MoMA gets one new like every 18.83 seconds (graph), so they should become the first museum to reach 1,000,000 likes on July 21 at 5:41:32pm EDT.

Congratulations in advance!

Update, June 2 11:30am: The pace slackened (one new Like every 44.79 seconds) so the Met didn’t quite make it to 500,000 at the predicted time, but they’re getting very close. Revised prediction: June 4th, at 5:02:03am.

(Image: “Passé / Futur” by an untrained eye)