iPhoneized

Back in 2007 Joe Hewitt wrote a nice little css/javascript framework for building iPhone web apps called iUI. In addition to web apps, iUI is a great foundation for learning how to build iPhone optimized websites. The basic building blocks are already there, all that’s left is integrating your content and style.

With iUI you can:

• Create Navigational Menus and iPhone interfaces from standard HTML
• Use or knowledge of JavaScript is not required to create basic iPhone pages
• Ability to handle phone orientation changes
• Provide a more “iPhone-like” experience to Web apps (on or off the iPhone)

The framework is available as open source (link below) and even has a couple of great pre-built examples. The first is a minified Digg, seen here on the left. This uses Ajax hyperlinks for a slick slide in animation. It also uses Ajax as a better way of dealing with scrolling long lists.

The second example demonstrates Ajax form submission. Submit the search criteria and the results page slides in nicely from the right.

The last example Joe describes as a “smorgasbord of an iUI example”. It’s a music library navigator, similar to the iPod’s interface.

Download iUI here

Music Example (aka Smorgasbord)

Digg Mock-up