Posts from June 2005

John Gruber just posted a great article on how to take the Weather Dashboard widget in Tiger and hack it to add a “last updated” time. It’s not only useful, but it’s also a wonderful introduction to the simplicity of widgets. If you can hack on XHTML, CSS, and JavaScript—as I expect most visitors to this site can—then you can alter or create a Dashboard widget.

However, there was one thing I didn’t like about John’s hack: he converted the 24-hour time already stored by the widget into 12-hour AM/PM time. I prefer 24-hour time, as do most people outside the United States (which I am not, but never mind that now), and sticking to 24-hour time makes the script addition even simpler. So here’s my quick modification of John’s JavaScript to result in a time like “1450” instead of “2:50 pm” or “0307” instead of “3:07 am”.

What I want to know is whether Disney security protecting the people who provide the voices of Winnie-The-Pooh, Eeyore, Owl, Gopher, Kanga, Roo, and the rest—or is Disney security, or possibly rogue elements within it, actually behind it all?

The problem is that screen readers are just that: they read what’s displayed on the screen for a sighted user. In other words, they let Internet Explorer render the Web page, scrape the visual result, and read that. I will acknowledge that in the tables-and-spacers era of design, this made a certain amount of sense. That era is ending; in an important sense, it’s already over and we’re just cleaning up the mess it left. Which is not to say that table markup is never and should not presently be used for layout purposes, nor is this to say that such markup should be used. Okay?

What I’m saying is that screen readers need to become speaking browsers: they need to ignore how the page is visually displayed, and read the content. Use semantic markup when it exists, and otherwise ignore the markup in favor of the actual words, whether it’s plain text or alt text. Go from the beginning of the document to the end of the document, and ignore the CSS—at least that CSS which is meant for visual media, which these days is pretty much all of it.

You might wonder how a speaking browser should deal with a table-driven site, of which there are still quite a few, he said with some understatement. One distinct possibility is to do what I just said: ignore the non-semantic markup and read the content. I can accept that might fail in many cases, so I’ll present a fallback: DOCTYPE switching. If a document has a DOCTYPE that would put a visual browser into standards mode, then be a speaking browser. If not, then be a screen reader.

DOCTYPE switching has been, despite a few hiccups, incredibly successful in helping designers move toward standards, and allowing browsers to permit standards-based design without sacrificing every page that’s come before. The same, or at least a very similar, mechanism could help audible-Web tools.

The WaSP has done great things in their efforts to show vendors why Web design tools should produce standards-oriented markup and CSS. I sincerely hope they can produce similar results with audible-Web vendors.

Along with many other people, I’ve been talking about microformats over the past several months. Now they have a home: microformats.org. It’s primarily a community site, a place where people interested in microformats can congregate and share ideas. It’s also a central point from which new microformats can be created and advanced. There are pointers to mailing lists, an IRC channel, a weblog, and more.

If you’re interested in a quick introduction to microformats, I highly recommend the leadoff comment in the weblog. It’s a great introduction to the what, whys, and wherefores of microformats. The collection of links it’s carrying around is pretty nice, too.

I don’t know for certain how the whole microformats effort will turn out, but more to the point I don’t feel I have to know. Right now, the low entry barrier and amount of promise shown by microformats makes them extremely compelling, as I think the information on the new site demonstrates. To echo Tantek, I’ll let the market decide how they’re used, whether they’re a good idea at all, and what shape they take over the long term.

All I know is that I feel the same way about microformats as I felt about CSS, back when I first encountered it. My instincts tell me, as they did then, that this is important, that it has almost undreamt potential, that it can change the way we build and use the Web.

It’s the time for redesigns, I guess—CNN did it over the weekend, and now Technorati has taken its beta design final. I’m proud to say I had a part in making Technorati’s new look possible. The graphic design was done by Derek Powazek, and from his graphic comp files I produced the XHTML and CSS. Then I had to run the Tantek gauntlet; the job wasn’t done until he approved of the code I’d produced.

If you dig under the hood of the new design, you’ll probably find things you’d have done differently. I’m not going to go into a detailed post-mortem here, but suffice to say that every choice was made within the project’s defined constraints. So when you see, for example, a bunch of b elements used to create the corners, that approach was the best choice for the project: it best satisfied the concerns and demands of the various people involved.

This is not to say that my choices were the best for other projects with similar design demands but different technical demands. They aren’t. At a certain level, there are no canonically right answers. There may be a whole spectrum of related solutions, where one variation is better for this project and another for that one. And people like me, despite all their experience and knowledge, don’t always hit the right answer on the first try. My initial approach to the corners is not what you see in the final markup.

That said, I am pleased with how I combined positioning and sprite-like styling to get the corners to work. I know each technique has been done before, but I’m not aware of previous combinations of the two. So that’s definitely a point of pride. I hope to find time to document the details of this particular corner solution, along with variant approaches.

I’d like to thank Derek and the rest of the Technorati team for letting me be a part of the redesign project, and for giving me a chance to flex my creative and technical muscles.

I pretty much agree with both pieces. I’ve missed upates more than once on Ajax pages, just because I’m too used to how pages usually work. I’ll click on something and then my attention will, out of habit, instantly go elsewhere—another window, another application, another computer, whatever—and keep subconscious track of what was happening in the window where I clicked, monitoring it in my peripheral vision for the flicker of a page reload. Eventually there will be a little tickle in the back of my brain that says, “Hey, didn’t that site ever do anything?” When I finally look straight at it, I realize that it did something quite a while ago, probably a split second after my mental focus moved away. Instead of being efficient, I was wasting time waiting for a refresh that never came.

One might think it’s time for an “Ajax enabled” badge on pages so we know “better pay attention, ’cause this ain’t your father’s Web page”. I don’t think that’s the way to go, however. I think what’s needed is a more mature HCI design sense. Web design has long relied on the page-update refresh to tell the user something has happened; this was such a part of the Web’s fabric that designing around it was almost unconscious. There hasn’t been a need for sophisticated HCI considerations… until now.

In other words, Web design is going to need to grow up, and become more HCI-oriented than it has been. The usability of a Web site will become as much about how you let the user know they’ve done something as it is about getting them to the thing they want to do. In addition to getting the page to look inviting and present the information well, it will be necessary to obsess over the small details, implement highlights and animations and pointers—not to wow the user, but to help them.

In this endeavor, it’s worth remembering that there is a very large and long-standing body of research on HCI. For years, many HCI experts have complained that the Web design field is making all sorts of errors that could be avoided if we’d just pay attention to what they’re telling us—a criticism which was not totally inaccurate. Some Web design experts shot back that the Web was a different medium than the sorts of things HCI people studied, and anyway, the Web was not an application—and that rejoinder was also not totally inaccurate. But with Ajax, the Web-application dichotomy is disappearing. The retort is becoming less accurate, and the criticism more accurate.

I don’t claim to know what should be done. The simplest update notification would be to set the visibility of the body element to hidden for half a second, and then back to visible, thus visually simulating a page refresh. Crude, but it would play directly to users’ expectations. The fading yellow highlight in Basecamp gets a lot of attention (and imitators), and that’s a good way to go too. We could envision tossing a red outline onto something that changed, or animating a target-reticle effect on the updated content, or any number of other ideas. Again I say: the decades of work done in HCI research are a resource we should not ignore.

From my perspective, there are at least two good things in the Ajax world. First is that the need for understanding and using CSS, XHTML, and the DOM has never been greater. Okay, it’s a slightly selfish thing, but it leads directly into the second good thing: that the need for standards support has never been more critical. If a browser wants to play in the Ajax space—if it wants to be a serious platform for delivering applications—then it’s going to have to get along with the others. It’s going to have to support the standards.

Everybody’s favorite fringe news organization, CNN, has updated the design of their Web site. Unlike the last three changes of design, I actually like this one out of the gate. Yes, I always got used to the old designs and quickly at that, but at first I disliked them. This time I’m impressed. It’s a little bit sparse, but the restrained use of whitespace is a refreshing change from many news sites (*cough*Fox News*cough*).

In part, this may be because the design isn’t a redesign so much as a tasteful makeover of the old design. By that, I mean that everything’s basically in the same place as before, just with a more serious look. However, it’s the addition of extra functionality that really appeals to me. For example, most section boxes now have the title followed by unobtrusive links to the main section page, video or other media, and then partner links. These links add a lot without upsetting the apple cart, as it were.

I also note with a good deal of interest that CNN’s video clips are now free; previously, you had to pay money to see their video. What forces led them to drop the subscription fee, I wonder? I can think of some likely candidates, but it would be interesting to hear from CNN why they did it.

Of course, they’re only free if you have the Windows Media Player 9 plugin installed. Otherwise, they’re simply unavailable. Gah!