Tuesday, May 10th, 2005

Ajax Summit: Dustan Orchard from Apple

Category: Ajax

Dunstan shared his process for designing a website with ajax features. He says:

  1. Get the idea
  2. try to work out how to achieve the same result with no js
  3. Try to progressively enhance the idea using JS
  4. Make technology failures graceful (livesearch as an example).
  5. Make it feel right for the user — all the tiny details which make the app perfect (changing cursors, fading backgrounds, scrolling the page, showing ‘working’ animations).
  6. Ensure as much cross browser compatibility as possible (always knowing that you have the fallback of the basic version)

“I always spend forever and ever on step 5.” “I usually develop on Safari first and test Firefox afterwards.”

Dunstan showed off a few examples of this. He demonstrated livesearch first without javascript, and showed and youcan search blog archives. Without js, it works like a conventional search engine. After turning js it on, the search button disappears, and when you do the search, you get instantaneous results in the right-hand pane. A graphic cribbed from Apple shows that searching is occurring.

“Some sites do searching after you type every key. I don’t think this is a good idea. People tend to slow down their typing when you have too quick results. If you do things too quick, people don’t know what’s going on … and people change their behavior, and not necessarily for the better.”

You can however over results and get metadata about them in hover balloons. A nearby guy says, “That is really cool” and others agree. Really cool stuff.

JJG: How and when are the data in the hover balloon being transferred?

The browser is bringing a little snippet of HTML over at query time — so the balloons are cached client side at query time. CSS is used to show the stuff. As with Google, the shadow effect of the balloon is through PNG transparency.

Kevin Lynch: So you punt on transparency on IE?

Basically, yeah.

This is the guy with the blog that shows the weather at his parents house through a graphic at the top of his blog. I remember seeing this guy’s blog a while ago and being really impressed.

His blog has this OS X style drop-down pane with configurable weather location stuff. Wow. Really cool.

(can’t blog about the rest of his prezo… NDA, sorry, but it was wicked cool)

Posted by Ben Galbraith at 11:50 am
1 Comment

+++--
3 rating from 6 votes

1 Comment »

Comments feed

Dunstan’s page (which is so freaking cool in so many ways) was a big inspiration in my first attempts at implementing a live search on my site. It really works beautifully, he’s obviously spent a lot of time on step 5. If you want to check it out, it’s at http://1976design.com/blog/

Comment by Mark Kawakami — May 11, 2005

Leave a comment

You must be logged in to post a comment.