Thoughts on software and life.

Wednesday July 11

Introducing iUI

It's about time I write something here about iUI, the little JavaScript and CSS bundle I've been working on that makes developing iPhone web apps easy. Before I even had a chance to make iUI "official" it was adopted by dozens of projects, and I regret that so many iPhone apps are based on my original hack with all its flaws and glaring omissions. To anyone who is using the original iUI (then named "iphonenav"), I'd recommend reading this post and learning about the new version - it will make a big difference for you. To anyone new to iUI, here is a little overview of how it could make your life easier.

First and foremost, iUI is not meant as a "JavaScript library". Its goal is simply to turn ordinary standards-based HTML into a polished, usable interface that meets the high standards set by Apple's own native iPhone apps. As much as possible, iUI maps common HTML idioms to iPhone interface conventions. For example, the <ul> and <li> tags are used to create hierarchical side-scrolling navigation. Ordinary <a> links load with a sliding animation while keeping you on the original page instead of loading an entirely new one. A simple set of CSS classes can be used to designate things like modal dialogs, preference panels, and on/off switches.

Let me re-emphasize that all of this is done without the need for you to write any JavaScript. It is meant to feel as though HTML was the iPhone's own UI language.

Re-Inventing the Apple

At WWDC, Scott Forstall of Apple talked ambiguously about giving web developers a way to mimic the look and feel of native iPhone apps. Despite what he promised, Apple has yet to deliver anything or even mention the subject again. In the mean time, dozens of new web apps are launching every day, and many have tried, with varying degrees of success, to replicate Apple's UI. I am so in love with the look, feel, and experience of the iPhone that it kills me to have to experience anything less when I'm browsing the web. I figured it was worth it for me to take one for the team and do all the re-inventing myself so you don't have to.

iUI is about more than just visuals, it aims to make web apps as usable as Apple's own. One usability problem I kept witnessing in early iPhone web apps was a lack of support for the back button. While using these apps I often found myself hitting back and being sent two or three "pages" backwards. The reason is that most apps are using single-page navigation, which skirts the browser's own history. The single-page model is the right way to go, but it is imperative that the back button still works, because if I'm going to wait 3 minutes to load a page over EDGE and then have to load it again because the back button accidentally sent me away from your site, I'm not going to be happy.

That's why I think the best feature of iUI is that it makes single-page navigation usable. It keeps the back and forward buttons working and optionally inserts a captioned back button into your app's toolbar. It slides smoothly between pages (at least as smoothly as Safari can go, which is about 1/10th as smooth as native apps) instead of the unpleasant flicker and jumpiness that accompanies a fresh page load.

Digg and iUI

Today I was surprised to find that the new iPhone version of Digg was built using the early "iphonenav" scripts. It's a really well done site, and Joe Stump of Digg built it so quickly that he beat out the new iUI release, which would have helped a lot. To illustrate the improvements I created a miniature version of Digg which uses the new features of iUI. Below I will describe how the new features could make Digg load faster and feel smoother.

Let's talk about some of those new features...

Ajax Hyperlinks

A major problem with "iphonenav" was that it required you to include every single page you might want to display in one big HTML file. For example, Digg's home page includes the complete content of the first ten stories, and loads the next ten stories by linking to a completely new page. This fractures the single-page model, forces users to wait longer between clicks, and interrupts the continuity of the animated page transitions.

The new iUI allows you to gracefully load content into your app on demand so your pages can stay lean and load faster. All you have to do is link to an external URL the way you normally would and iUI will load it via Ajax, insert it into your app, and smoothly slide it into view. The only catch is the pages you link to should not be complete HTML documents, but rather only the fragment you wish to insert. You can use target="_self" to load external links the old fashioned way.

For an example of Ajax linking, check out the Digg demo. Each time you click a story it will load and slide right in. Unlike the current iPhone Digg, the home page in the demo includes only the headlines and is three times smaller.

Scrolling Long Lists

Another big problem with iPhone web apps is presenting very long lists efficiently. Digg has this problem with their stories and comments and they work around it by breaking stories into pages of ten and omitting all but the top five comments. Apple solves this problem nicely in their Mail app by loading 25 messages at a time and putting a link to get more at the end. Clicking it loads those messages and appends them to the end of the list, allowing you to use the joyous flick gesture to scroll the complete list at once. In my view, this is nicer than breaking the list up into separate pages.

iUI makes it easy for you to use this convention in your own web apps. Simply create a link with target="_replace" and iUI will load the URL it and replace the <a> with the contents of the URL. Again, the URL should not point to a complete HTML document, but only the fragment you want to replace the "Get More" link with.

For an example of incrementally loaded lists, look at the Digg demo again. Scroll to the bottom of the stories list and click on the "Get 10 More Stories..." link.

Ajax Form Submission

A bunch of iPhone apps start with a form on their first page. Take, for example. When you submit the movie search form it goes to a completely new page, which doesn't feel very smooth. With the new iUI, forms are submitted via Ajax and the results slide neatly into place. If your users want to go back and fill out the form again, it quickly slides back in. Like with links, if you specify target="_self" on the form it will submit it the old fashioned way.

Here is a simple Movie search example using Ajax form submission. Submit the search form and watch the results slide right in.

That's all for tonight. I'll be writing again soon about the other features of iUI. In the mean time, you can check out this smorgasbord of an iUI example which demonstrates pretty much every possible feature.

Posting your comment. Please Wait...