This document is available on the Internet at: http://urbanmainframe.com/folders/blog/20031222/folders/blog/20031222/
Some casual browsing of Jakob Nielsen's website throws down the gauntlet as I try to add a little useability to the Urban Mainframe...
Every now and then I check out the websites of useability gurus Jakob Nielson and Bruce Tognazzini. Because of my work developing software and websites I often revisit their articles on user-interface design to ensure that I am sailing as close to their charts as possible.
Nielsen and Tognazzini are both world-renowned experts in the fields of interface design and user-computer interaction, so I take their writings seriously. If the Urban Mainframe is easy to navigate and use it's because I have invested countless man-hours in coding and designing with such issues foremost in my mind (if it isn't easy to navigate and use, then please let me know).
However, one of Nielsen's articles caused me some grief: "Let Users Control Font Size" sounds simple enough, but I discovered that it's still hit-and-miss creating browser-agnostic pages, even with today's enlightened browsers (although, I have to admit, it's easier now than it was in the "good old days").
In its previous incarnation, every item of text on this website had its size "hard-coded" in the style-sheet and "10px" was the dominant size. As I read Nielsen's article I realised two things: that 10px is awfully small for readers with poor eyesight, and that Internet Explorer's "Text Size" controls don't work as they should - failing to scale any of the text on the Urban Mainframe.
"No problem," or so I thought. I loaded my stylesheet up in my favourite editor and performed a few find-and-replace operations, replacing "10px" with "x-small" and so on.
Whenever I change anything in my templates or CSS, I immediately preview in both Mozilla Firebird and MSIE 6 to make sure I haven't "broken" anything...
I had: Mozilla rendered a beautiful page but Internet Explorer had castrated my design by rendering "x-small" at around 12pt compared with Mozilla's 8pt. Now that doesn't sound like a significant difference in itself, but when I compared the two side-by-side the fonts in IE looked to be about twice the size of those that Mozilla displayed.
As it happens, the website was still useable, so I could have just shrugged my shoulders and uttered the web-designers mantra, "IE sucks, design for Mozilla," but that would have meant admitting defeat - not bloody likely!
So I googled for a little while and learned that I could use relative values for my font-sizes. Find-and-replace quickly transposed "x-small" with "60%". Another preview and, finally, the desired effect. "Text Size" now worked as it should and vision-impaired users now had better access to the website. It's a small thing that the majority of visitors won't ever see, but it feels great to know that I've made the web just a little bit better with very little effort.
Of course, I now have to tweak my design to ensure that it degrades gracefully if the user adjusts the font sizes. That exercise will warrant another article no doubt.
Incidentally, Mozilla Firebird's text-size controls work perfectly whether font sizes are hard-coded or not. For such an important useability issue, control really should be at the browser, not in the hands of fickle web-designers.
UPDATE (9-Feb-2004): Mozilla Firebird is now Mozilla Firefox!