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.
Oh my god… I’ve been waiting for this moment for years!
Goodbye Islip, hello LaGuardia!
Saying the 5D Mark II is the best digital camera I’ve ever used is like saying it’s the best canned food I’ve ever tasted.
So, I’m working on a project that involves a web application. Do I use Apache and Python or ModPerl? Oh no, that would be far too easy! Instead, why not write a high performance kqueue-based web server from scratch in Objective-C? Yeah, that’s the ticket!
Oh hey, you know what would be nice in that kqueue server? Regex parsing, so I can handle complex requests. Do I use any of the open source regex engines? Of course not! They’re all too big and complex! Why not write my own bare-bones Traditional-NFA regex parser? Yeah, that’s what I’ll do!
Hey, it turns out parsing all the possible variables in HTTP/1.1 is a little tricky! Oh well, I have that regex parser!
Then nine months pass… I go to work on other parts of the project. When I return to the server code, I find myself staring at things like this:
In conclusion, I now want to punch myself in the face.
Inspired by 18 month-old emerging photographer Hudson Blanck, I started putting fingerprints all over the UV filters on all my lenses. I’ll never go back. Modern lenses are too contrasty, and it’s almost impossible to get them to flare.
Of course, given his art pedigree, it’s no surprise that Hudson is already schooling me
