I started to look into User Interface (UI) Design and Web Development for the iPhone last week. With more and more requests for web content to be iPhone "enabled" I wanted to research some common practices and see what possibilities were available to the UI. This voyage of self-discovery lead to a whole cavern of information, an excitement of possibilities and a ton of web resources.

The Basics : Web Design
A growing trend these days is to give your current web-application an iPhone "facelift". Facebook is a great example. Not only do they have a dedicated iPhone application but they also have a re-purposed web-application dedicated to the iPhone and designed to emulate the iPhone interface. Walmart is yet another example. It's almost a 'cheat'. Rather than invest time in full-blown iPhone SDK simply affect an iPhone UI for your web-application.

With a combination of Rich-UI and some nifty Javascript you can almost completely 'fake' an iPhone application.

Probably the most important thing for me was dimensions. Safari on the iPhone will natively 'scale' a web-page, but to affect a nice UI you don't want it to scale-down, you want it to sit nicely within the constraints of the 'viewport'. With some quick PHP user-agent string detection you can easily serve up content specifically for the iPhone.

First off Safari on the iPhone makes full use of CSS3 media-queries :

<link media="screen and (max-device-width: 480px)" href="css/pda.css" type="text/css" rel="stylesheet" />

So serving up an alternate stylesheet is no problem.

Secondly we have the "viewport" meta-tag. This allows us to control the width and scalability of our content. For me, since this is a dedicated iPhone web-application, I don't want my users to be able to scale. They shouldn't need to. So I used the following :

<meta name = "viewport" content = "width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

The viewport is 320px by 356px. The "Designing Content" link below outlines exact dimensions, fonts and other CSS parameters to help affect a true iPhone UI.

Another nifty feature of designing for the iPhone is that the iPhone uses Safari. This opens up a whole new array of CSS possibilities with the -webkit-{property} CSS property. Things like -webkit-transform: rotateY(60deg); for example. (Full list of -webkit properties)

Combine these with some new iPhone Javascript events and the results are magical. Neil Roberts of SitePen has put together an awesome demonstration of the power of the new ontouch and ongesture events of Safari. Obviously make sure you're viewing this on an iPhone and have a look. Demo.

This leads me nicely into Javascript on the iPhone.

onTouch, onGesture and onOrientationChange
Just a few new JavaScript events introduced with and unique to the iPhone. There seems to be some disgruntlement about the execution of traditional JavaScript events on the iPhone. Given that your input device is no longer a mouse, instead your finger, it leads to a whole new complication of event listening and event bubbling. Peter-Paul Koch wrote an excellent article on his blog dealing with this very subject which ultimately led me to Neil Roberts blog posting about the onTouch and onGesture events.

Essentially these two events allow you to capture user interaction with the iPhone and ultimately do some pretty amazing things with JavaScript as demonstrated in Neil's demo. Combine this with other Web2.0 Libraries such as Mootools or jQuery and you can really goto town !

Further Reading