Using iPhone User Interface Framework (iUI) To Create "Native" Websites for the iPhone

By Scott Clark

We've learned how to detect the iPhone's user agent, use Safari for testing, detect and set the viewport orientation, use CSS and meta tags for iPhone and iPad layouts. This week we'll learn about the iPhone User Interface Framework (iUI), which consists of a JavaScript library, CSS and images for developing websites which appear and function like native iPhone apps.

One of the fundamental differences between the development of a real native app, and a app-like website lies in the ability of web developers to utilize their current talents to create effective web applications for the iPhone. There is no cost involved--Apple charges $99 a year for access to their development program, which includes access to the iPhone SDK and Apple development community (and the App Store). Also, to use Apple's SDK you will need to be using a Mac computer. There is no such requirement to use the iUI, as it is created and uses HTML, JavaScript and CSS--the web developer's standard technologies. Another nice feature is that although this article, and the iUI, were designed with the iPhone in mind, the website apps it is used to produce will effectively work on other mobile phones and even standard web browsers such as Firefox, Google Chrome and Safari.

Essentially, there are two ways to create a website that is optimized for the iPhone. You can use Cascading Style Sheets (CSS) to format the site's pages to fit within the mobile browser window of the iPhone so your site's content is user-friendly and accessible. You can detect the user agent to see if the visitor is using an iPhone, and if so, use the appropriate style sheet, which formats your site's content so that essentially the user is seeing a scaled down version of your site. The second way is to create a website that looks and behaves like a web application that was designed for the iPhone. That is what the iUI does--it enables you to create such an "app" using a JavaScript library, some CSS and some images.

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.

The iUI also includes the JavaScript and CSS which allows you to create app-like control panels, such as this simulated "Settings" page, which is included on the iPhone site (and shown below). You can select the on or off buttons, and they work as they would on an iPhone application. They do not actually function, as they are not connected to any backend processes, just like the stats button on the iPhone site.

 

How Do I Use iUI?

One of the real puzzles that seems to cross those who have downloaded the iUI is, how to do actually use it? No documentation is included, although there is some decent information on the iUI website. Author C.W. Zachary wrote an excellent tutorial on the basics of using iUI that will get you up to speed, although it can get to be fairly advanced if you intend to edit and use the control panels. The samples that are included with iUI include examples of most of the capabilities of the package, and are excellent to use for templates--again, they are made up of HTML, JavaScript and CSS.

Inside the <head> of music document (and all documents that will be using the iUI), you will find the following meta tags and includes:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> 
<style type="text/css" media="screen">@import "../iui/iui.css";</style> 
<script type="application/x-javascript" src="../iui/iui.js"></script>

The viewport meta tag sets the scale for the iPhone, while the two links are simply includes which grab the CSS and JavaScript files. All the real meat of iUI is in the DIV tags which make up the majority of the document. In these DIVs you will define the toolbar, main menu, and submenus. Additionally this is where you will define the panels and dialogs, as well as any complex panels, such as the Settings panel in the Music example.

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!



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date