Bill Burcham’s memeRocket

The Safari 3 Public Beta page has a nice little navigation list in the middle: 12 reasons you’ll love Safari. It’s kind of “semantic” markup since it uses an ordered list to enumerate the choices (as opposed to e.g. a table or something). And it’s kind of separating content from presentation with its use of CSS to style the list items — including nice visual differentiation for the active (selected) item. All this is pretty standard stuff for readers of Dan Cederholm’s Web Standards Solutions. And rather than reloading the whole page on each navigation click, the site is using XMLHttpRequest to load just a small section. Again, nothing surprising here.

What is a little surprising is the page’s departure from the common practice of using anchor tags within the list items. Instead of each list item containing a hyperlink, it contains plain old text. Since there is no hyperlink, the browser won’t provide a visual cue that the item is navigable/clickable. That’s kind of ok since most designers go to pains to undo some of the cue anyway — I’m talking about eliminating underlining. The other cue — changing the cursor to the pointer image when mousing over the “active” list item, is implemented via a CSS rule. Then all that’s left is to catch the click events in JavaScript code.  Here’s the markup:

It’s a pretty design and it works really nice. On the other hand it is not an example of “unobtrusive JavaScript” or of “graceful degradation”. I am pointing this out not to be dogmatic about these things, rather to cite it as evidence of the difficulty of applying the aforementioned philosophies.  Here you have a lovely page, built by the best designers money can buy. It doesn’t get much more high profile than this. And these guys went ahead and built a page that requires JavaScript. Made me think. I hope it makes you think too.

This feels like it’s going to be a bit of a recurring theme here (see the recent Tableful Grace post). Graceful degradation with respect to JavaScript, CSS, heck even background images; separation of behavior from content; table-less layout — these are great philosophies. But the practice is riddled with subtlety and compromise. And you wouldn’t really know it from reading the short “gee look what I can do” type articles.

I’m curious to know how you feel about these new sacred cows now that we’ve had a little experience with them. For example, are you implementing whole applications with graceful degradation or only pieces of your application? If it’s the latter, are you getting any real benefit? Does graceful degradation double your testing effort?

My sister recently sent me an (online) gift certificate to Powells books. I just love those stores but had never been to the web site. It turns out that the site, like the stores, is exceptionally cool. You can browse for books and then print out a shopping list for your store visit. And there is all kinds of useful organization such as the technical section, and the Portland local section.

So what’s my first thought when encountering such a site (well maybe my second thought — right after “can I preorder my copy of Harry Potter #7“)? Why it’s: “let’s see what Firebug can tell us about the site’s construction” of course! Here’s what I found interesting in about three minutes:

1. the site pretty much uses table-less layout — yippee! divs and floats my friends
2. elastic layout
3. font resizing works pretty well in content areas but not in navigation controls

Something I’m particularly interested in these days is that old chestnut of web design: the rounded corner. The approach on the Powells site was so, well, heinous, that it prompted me to inaugurate what I hope will become a regular feature here. Without further ado, I give you:

Heinous Corner-Rounding of the Day Award (HCROD) #1: Powells Books (div per image)

Got some content you’d like to render in a rounded box? Well then, simply wrap it in six divs — one each for: right, bottom, and each of the corners. That way you can hang CSS rules on each of those divs to apply your rounded/shadowed images. Semantic HTML my foot. Dig →

When I made this jyte claim a couple weeks ago (May 15, 2007) I believed it based solely on my personal experience of using web apps every day:

A backlash is brewing against traditional thin-client web applications. Folks are tired of the beachball. Vendors of Web-based applications like Gmail, in which users spend a significant portion of their day, will respond by incorporating client-side persistence, offline operation and synchronization. In particular Gmail will add these features in 2007.

Well then a couple days ago (May 30, 2007), Google announced Google Gears , their toolkit for offline web apps (connection detection, offline operation, offline storage) and updated Reader with an offline mode. This thing is similar in purpose to Joyent’s Slingshot which went into Beta on the Mac on April 17, 2007.

It sure seems like the stage is set. Technology answers need. Only thing standing in the way might be competing priorities or strategic conflicts. Have to think about that a little bit.