ben syverson

Graceful Degradation

I recently launched a web update for Susan’s business site, up in the air somewhere, and I took it as an opportunity to improve the semantics and aesthetics of the HTML and CSS.

We were having problems with the Blackberry web browser, because I had her product images loading into the background of a div via CSS. Blackberry just ignored the CSS, so the product images wouldn’t come up. Also, all of the navigation menus would come up first, so every time you loaded a page, you’d have to scroll down to see the content. It was also annoying if you listened to it on a screen reader; you had to listen to every menu option before you could hear the content, for every page.

The first problem was solved by loading the product images with a standard img tag, as it should have been all along. However, on pages where the image is just a background (such as the “info” pages), the image remains a CSS background, so it doesn’t load the unnecessary image on non-CSS browsers.

The second problem was solved simply by rearranging the HTML so that the image comes first, then the product information, then the product menu, finally followed by the less-used menu items like “info” and “links.”

This is essentially how the site is supposed to look, as rendered in Firefox. You can make the browser window as large as you like, and the image will appear to go on forever. (Click for large image)

Here it is on the iPhone. Under duress, I added a meta tag to the HTML to change the viewport width. Apple, I’m speechless. This should so obviously be a CSS property instead.

When Netscape 2.0 came out in 1995 and introduced background images and tables, I could not have been more psyched. I spent eight hours listening to Live Through This and experimenting with tables. To this day, when I hear any song from that album, it makes me think of cellpadding and border widths. ANYWAY. By doing some simple object detection to disable Google Analytics’ JavaScript code in older browsers, and by using HTML comments to hide CSS from non-CSS browsers, I was able to get the site to load in Netscape 2.0 in Mac OS 7.5.5 (1.0 doesn’t seem to like my emulator. Or 7.5.5?). The 1995 version of myself would be furious (“What, no background pattern?!”), but here it is. And this is about how it should load on the Blackberry.

Finally, here’s how it looks in elinks, a text-based browser. The site remains understandable and navigable. elinks is even listening to some CSS, floating the right-side menu items to the right!

This is my favorite site I’ve designed. It feels like a full, rich experience, with big images and a catalog feel. Yet the entire site—all 51 pages and their images—takes up less than 2MB (it would fit on a floppy!), so it’s quick to browse, even over slow mobile connections. I love it.