Archived entries for Design

Less Than Perfect

I spend a lot of time thinking about what it means (and takes) to build a high-quality, professional web site or application. I consider the whole spectrum, from macro concepts like Graded Browser Support, Separation of Concerns, and Progressive Enhancement to micro rules like never employ href="#" and always use the label element to bind text to form controls.

It’s difficult to compose a prescriptive list of all the issues a "perfect site" must satisfy. So, lately I’ve been think from a different perspective. Instead of "what it takes to be great," I’ve been asking myself "what does a great site NOT do? More specifically, I’ve been assuming a perfect site gets 100 points initially and then loses points for shortcomings.

Here are a few examples that I could use to measure a site:

  • -1 point for each instance of href="#", (max of -5).
  • -5 points for redirecting old browsers to a "you must upgrade" page instead of letting them see the plain linear content at least.
  • -2 points for design degradation at +/-1 font-zoom level; -1 for degradation at +/-2 zooms.
  • -1 for each form element missing an associated label element.
  • -2 for a missing (or malformed) doctype

It’s too early to debate the mechanics (should it be -1 or -2 points), but I like the approach in general and am going to keep playing with it this week. One good way I’ve found to discover the list of things is to find a nice modern page, hit view-source, and start giving it a code review. Each thing that catches my eye probably belongs on the list, somewhere at least.

I’m quickly building a longish list — and will publish it before too long — but right now I want to ask: What would you put on the list?

No, Mr. O’Reilly, it’s not all back-end

Tim O’Reilly, in a nice rebuttal to the flame up of silly "Web 3.0" noise over the last few days, gets much right. I agree with everything up until he writes:

Google is the pre-eminent Web 2.0 success story, and it’s all back-end! Every major web 2.0 play is a back-end story. It’s all about building applications that harness network effects to get better the more people use them–and you can only do that with a richer back end.

Um, no. I agree with his reminder that Web 2.0 does not equal some specific technology (ahem, DHTML/Ajax), but to say that front-end magic has nothing to do with the Web’s 2.0 resurgence, or, more specifically, that front-end technology has nothing to do with Google’s darling status just doesn’t cut it for me.

[Oddpost and] Gmail reminded most of us that you shouldn’t need a page refresh to read your web mail, and that the improved efficiently is good, welcome, and here to stay. Sure, it’s cool their back-end provides unlimited storage and great spam filtering, but it’s the great interface that gets people’s hearts beating and them coming back for more. [G]Maps noted that in the real world you can slide the map left and right in front of your eyes, and that offering the same direct-manipulation interface online is better than the one-tile-at-a-time approach. Sure, Satellite and Hybrid views are cool, but without drag and drop the game hasn’t changed. (TerraServer and others offered Satellite view since the last 90’s at least, but it wasn’t a gamechanger.) Tags are cool, and he’s correct that Flickr is largely a network-effect play — but Flickr also showed that reducing the cost of adding tags (by not requiring a refresh) made for more tagging, and therefore more network effect. Google Docs (previously Writely) is all about complex front-end engineering.

I grant that these services are made possible by increasingly sophisticated back-end systems, and that other Web 2.0 systems such as Last.fm or Ad Sense are fundamentally back-end systems. But to say that the world’s Web 2.0 fascination is related exclusively to clever back-end shenanigans misses the mark. My point is that you wouldn’t recognize Web 2.0 without the glamour and power of today’s front-end interfaces and techniques..

It’s never been a better time to be doing front-end engineering. DHTML/Ajax is not Web 2.0, but it’s hard for me to imagine the recent resurgence without it.

“High Performance Web Sites” at the @media 2007 Conference in London

Opening slide of the presentation

photo by Amnemona

I’ve uploaded the slides from my High Performance Web Sites presentation at the @media conference in London last week. They are available in PDF format (3mb) as well as in PowerPoint format (25mb) as delivered.

Please note an important change: In Steve Souders and Tenni Theurer’s original three-hour presentation (which I remixed into a hour-long session for @media), and in the forthcoming O’Reilly book, “High Performance Web Sites,” there are 14 rules for faster web sites. My talk offered 12 due to time constraints. In the interest of consistency I added the two missing rules to my slides before posting them. The added rules are #12: Remove duplicate scripts; and #14: Keep Ajax cacheable and small. With these restored the numbering used in my slides will match the numbering in the longer workshop and in the book. (The new rules are #12 and #14; the dozen rules I presented have their same numbers except for #12 which became #13.)

I’d like to thank Steve and Tenni and the entire Exception Performance Team at Yahoo! for letting me bring this important content to the @media audience. Thanks also to Patrick Griffiths and the @media staff for the invitation to speak, all their help, and a great conference across the board. Most importantly I’d like to thank my wonderful audience for their time and attention, for our good round of Q&A, and for the feedback already posted on blogs across the web. Thank you.

I hope to see you all again soon. (Maybe at Hackday this weekend?)

Speaking in Singapore

I’m scheduled to present two sessions at the upcoming Webinale conference in Singapore on April 23rd and 24th.

More details soon, but wanted to give you advance notice.

Speaking in Hong Kong at @media 2007 Asia

@media 2007 - Asia I wanted to let you know that I’ll be speaking at @media again this year, this time at the Hong Kong event.

There are only a few days left for discounted registrations, so sign up quick.

All the details here on the @media 2007 Asia site.

It will be tough, but I’ll do my best to stand tall next to all the great speakers:

…the influential CSS Zen Garden creator Dave Shea, multiple book author Molly Holzschlag, the W3C’s Shawn Henry, JavaScript expert Jeremy Keith, HTML Dog author Patrick Griffiths, and Andy Budd, the author of the best selling CSS Mastery book.

See you there!

YUI Party

I blogged this over on the YUIBlog last week (You’re Invited: YUI First Year Party), but figured I’d quickly post a notice here too in case you missed it. There are still a few dozen RSVP slots open, but they probably won’t last long.

If you’re interested in giving a quick five minute demo of something you’ve build with YUI, let me know…

See you there.



San Francisco, California | Creative Commons By-2.5 License | Contact

RSS Feed. This blog is proudly powered by Wordpress and uses Modern Clix, a theme by Rodrigo Galindez.