Developing an iPhone Application

Recently we had a client that wanted to take their products to the iPhone platform. This means building a web application (HTML/CSS/JS) to specifically target the Safari browser that runs on an iPhone. Additionally designing the application with the strengths and weaknesses of the iPhone in mind.

iPhone Documentation

More and more documentation for the iPhone is becoming available, a great place to start is the Apple Developer site.

iPhone Tools

Nothing is going to help you see how the application you are creating works on the iPhone better than an iPhone. However at $500 you might have not get an iPhone for every developer. There are a couple tools available to help see how it *would* look on an iPhone.

iPhone Simulator

The iPhone Simulator is extremely basic but can give you an idea of how your application would look. It’s not very user friendly because you have to drag an html file into it to view. However it does allow you to toggle between landscape and portrait and show/hide the keyboard.

iPhoney

iPhoney is much a richer testing tool. It states that it is “…the pixel-accurate iPhone web browser simulator.” It is a web browser instead of just a viewer, so you can surf around live websites. It does have portrait and landscape but no keyboard.

Aptana

Aptana is an IDE based on the Eclipse IDE, they recently released an iPhone IDE. It has some nice features such as emailing you the link to view your application, good logging facilities, and the ability to use a console to interact with the page you are creating.

iUI

This post wouldn’t be complete without mentioning the iUI developed by Joe Hewitt. This library provides a very iPhone like experience, the navigational elements look and behave very much like other applications on the iPhone.

iPhone Design Tips

Developing for the iPhone is actually easier, you are only targeting 1 browser which has 2 view port sizes.

Play to it’s strengths

• The iPhone has a very cool scrolling effect, so having a basic list of scrollable items can be fun for the user.
• Don’t forget that the iPhone is also a phone, by using the tel: prefix in your href you can make a clickable link that brings up the call dialog so the user can 1 touch dial.
• The built in googlemaps application is very slick, you are able to integrate with this simply by using a maps.google.com href

Avoid it’s weaknesses

• The iPhone viewport is small, carefully think out the UI, view the prototype before you get too far along.
• Input device, the pin point accurate mouse has been traded in for a blunt fat finger. Design the buttons with fat fingers in mind, leave plenty of space between different buttons so that the user can easily press the one they want.
• The iPhone moves at a good clip on a wireless network, however on the Edge network it’s very slow. Try to keep everything to a minimum. Optimize your images, cut out unnecessary JavaScript, cut out unnecessary CSS.
• Slow refresh, seeing the screen refresh takes away from the slick feel, use Ajax calls to pull in additional data when possible, this provides a more enjoyable surfing experience.

iFun

Developing this iPhone targeted application was alot of fun, it was exciting to have some new area to explore. Having to re-think design elements and positioning was a good exercise in thinking small and simple. We look forward to creating more iPhone targeted applications.