Looking over the Technorati redesign as plugged by Eric Meyer (same old stuff – nice CSS but fixed width design, fixed font sizes in IE, breaks with only a couple of font size increases in FireFox, minor validation errors) I saw that the Tags page didn’t display properly in Opera 8.01.
The relative frequency of the tags are indicated via nested <em> elements with a CSS style font-size: 1.03em to produce the increased size.
But Opera screws up and rounds the font sizes down. I’ve written up a description of the bug and submitted a bug report to Opera.
Until Opera and/or Technorati do something about this issue there’s a quick fix that Opera users can apply. As Technorati includes id="technorati" on the <body> tag it’s relatively easy to add #technorati .heatmap em {font-size: 1.06em !important;}
to a user stylesheet and restore the tag coloud to its full glory. The exact size value needed will vary depending on your particular default and minimum font size values.
Moving away from the Opera bug we’re still left with the larger issue. What’s the best way to (a) mark-up and (b) indicate relative importance in various media.
As far as the mark-up goes HTML doesn’t offer us that many options and <em> is probably the best choice. Things are slightly confused by the presence of <strong> – how does strong emphasis relate to multiple levels of emphasis created via nested <em> elements?
By default browsers don’t change their output for nested <em>s so there’s no way short of viewing the source for the user to see the level of importance. For graphical media increasing the font size is one possibility but even when Opera’s shortcomings are ignored this might break down (consider mobile devices for example). In non-graphical media the font-size is meaningless.
Volume or pitch are options in aural media but don’t make for an easy listening experience (this sort of tag cloud is designed for visual skimming and doesn’t really work the same way when listened to linearly; but if a listener chooses to listen to it they should get the same information as the reader, via some means or other).
The best solution I can think of would be to add title attributes to each tag giving the relative level of importance. So a tag surrounded with four levels of <em>s would have title="Level Four" or something similar.
Whilst not ideal (and maybe tag clouds aren’t such a good idea) this does have the advantage that it brings together mark-up, styling and metadata (the <em> elements, the font-sizing and the titles) to reinforce the same message. The message. Ah, that’s the real problem. The relative popularity of the various tags is the message and the message should be in the data not in anything else. But that means turning the funky tag cloud into a boring table. 🙁