Grab bag: UI is all around you

links for 2008-12-03

Obscure HTML element of the day: dfn

I’ve had an opportunity to do a little static HTML + CSS work recently, and have had a few educational and reeducational moments about the joys of doing basic web development–all the stuff that a good CMS like WordPress hides from you.

Today’s educational moment was a question of footnote treatments. My application had footnotes at the very bottom of its page, with nothing beneath them, and did inpage links to the footnotes. But it was linking to the footnotes from a part of the text that was close to the bottom of the page, so the footnote was already visible. As a result, when a user clicked a link to get to the footnotes, nothing happened–the footnote was already there, and there was no more page to scroll up.

There are ways around this. Daring Fireball has a lot of empty space on its pages below its footnotes, meaning that the page can scroll to place the footnote at the top. But the bug got me thinking again about why I was doing the footnotes and how I could change the user experience. What if I moved the footnote text–which was generally some sort of quick definition–into a mouseover? I knew I could do it with acronym, but the text I was footnoting wasn’t an acronym so it wouldn’t have been semantically correct. Was there a semantic way to mark up the word or phrase being footnoted so that when moused over, a definition would show?

Enter dfn. See what that does? The dfn tag is basically tailor made for what I wanted to do, and is even reasonably well supported. FF3 and IE7 even automatically italicize the term.

I made one more change to my stylesheet to make it really explicit that more information was there for the mouseover, and applied the same rule that I had for abbreviations:

dfn {
   border-bottom: 1px dotted #333;
   cursor: help;
}

With that, the user got a dotted underline on the term, and a help cursor when they moused over.

I would probably make one more change if the application was expected to be printed, which would be to introduce some styles or JavaScript in the print stylesheet that would do an inline expansion of the definition. But for what I needed to do, dfn worked pretty well by itself. Yay obscure HTML elements!

Grab bag: Agile all the time

Web birthday#8

This is my eighth birthday… since starting my blog in 2001.

Seems like it was an eternity ago. I didn’t even bother to blog on my birthday then–of course it was close to the end of my third semester of business school and I was going nuts. But then, I didn’t realize that I was starting a tradition.

I went back and looked at past birthday posts. 2001, as I mentioned before, wasn’t blogged. In 2002 I turned 30 and reflected on Bilbo Baggins’ birthday benediction (more on that in a minute). 2003 was gearing up for what turned out to be my last Microsoft Christmas party. 2004 was a reflection on over ten years of no one knowing you’re a dog on the Internet. 2005 was my quotation in Business Week over the Sony BMG boycott. 2006, a dinner with friends and reflection on mortality. And in 2007, turning Presidential and lining up my new iPhone.

This past year is definitely a year of change — new website, a shift to linkblogging, killer new job. But my birthday this year feels more like a homecoming. As my sister says, this is pretty much my first Facebook birthday, and the people I’ve reunited with over there are making it a very nice happy birthday indeed. In some ways, I think this is the first birthday in a long time where I’ve felt something like contentment. Probably a sign that vast upheaving changes are right around the corner.

Grab bag: BSO downloads