Using iPhone User Interface Framework (iUI) To Create "Native" Websites for the iPhone
The iPhone User Interface Framework is free to download and use, as it is open source. Once you download the latest release, you will notice that there isn't a lot of documentation about how to use it. Your best bet is to look at some of the included samples, as they show you how the iUI is used, what it can do, and what it looks like.
Note that you will need to view the sample pages using an iPhone, the iPhone emulator that is included in the iPhone SDK, or the Safari web browser set up to emulate the iPhone. Instructions on how to use Safari for testing can be found here.
I tested the iUI by setting up a subdomain off of my test site, Rock-n-Roll.com, so that the iUI files live in a directory that is pointed to by the subdomain. I chose iphone.rock-n-roll.com, which actually points to rock-n-roll.com/iPhone/. Then I used the site's .htaccess file to detect the user agent, as we discussed in our article about detecting the iPhone user agent, and directed those visitors coming to the site via an iPhone to iphone.rock-n-roll.com. So if you visit www.rock-n-roll.com with an iPhone (or Safari set up as discussed above), you will automatically be directed to the subdomain, if you visit using a normal desktop browser you will be directed to the normal site.
Given that Rock-n-Roll.com is about music, I used the sample music page from iUI as the main page for the iPhone subdomain. Here's what it looks like using Safari as a normal desktop web browser:
And here's what it looks like using Safari as noted above:
If you've ever used an iPhone app before, and this article assumes that you have at least played around with one, you will notice that the above screen capture looks like many other apps you may have seen. It acts very similar as well, with the same type of screen movements, supports viewport orientation, and can even use special icons for bookmarks, as well as a splash screen.
How Do I Use iUI?
Inside the <head> of music document (and all documents that will be using the iUI), you will find the following meta tags and includes:
The easiest way to begin working with iUI is to just open it in Safari, with the user agent set to iPhone, and see how it works and functions (alternatively, you can view the example live on Rock-n-Roll.com). Then open up the example pages in your favorite HTML editor to see how it is created. Change some of the menu names, etc. and see how you can customize it for your own site. If you have some good examples of its use, please leave a comment below!