The iPhone is a fantastic phenomenon. It’s a communications device, a multimedia platform and much more all rolled into one single tool. Everyone wants in on this device. The Apple store has just passed the one billionth application download and there is a wide array of applications from the amazingly useful to the bizarrely redundant. With millions of iPhones out there, it makes sense to have your content, or application available on that platform, but how do you go about doing this? Where do you go to get started? And what are the steps you need to take to get there?
This article is an introduction to the various ways of getting content and applications onto the iPhone. It is by no means a full guide, but hopes to point you in the right direction and give you an overview of what is involved in the process.
The first step in writing for the iPhone is understanding how things really work on the iPhone. I think it is virtually impossible to develop for the iPhone without being a solid user for a while. The iPhone has a certain way of doing things and if your content does not adhere to that it will stick out like a sore thumb. It is very different to what happens on a desktop.
The only means of interacting with content on the iPhone is your fingers. This dictates a lot of the way the interface works. The other major differences are that the screen is small, only one application runs at a time and there is very little opportunity to provide user help. The iPhone uses animation extensively to provide a fluid, responsive interface that feels almost physical (as if the screen’s contents are really moving off, jumping or collapsing). You really need to get a feel for this to be able to create something that lives comfortably on the iPhone.
You could potentially use the iPhone simulator on a Mac instead of an actual iPhone or iPod Touch, but… that doesn’t really do it. The iPhone has a set of accelerometers that can sense the orientation and movement of the device. You really need to hold it and feel it. There are introductory videos, documents and sample code. Besides all the introductory material, a great document to start with is the iPhone user interface guidelines.
It can be recommend starting out with this document. It has examples and sets you out on the voyage. Familiarize yourself with the way things are done on the iPhone and the arsenal of controls and functionality at your disposal.
You need to be clear about what you want to achieve and explore what functionality you want to expose with your project. Strive for a solution that is clear, understandable, visually pleasing and of course… cool.
Once you know the game plan the search starts for the design. With the unique iPhone look, it is essential that you use that look in visualizing your project’s interface. Recreating the iPhone interface for wireframe or sketch purposes is a lot of work. Fortunately people have already put in that effort and it is available for you to use. These are collections of graphical widgets in various formats that can be used to assemble what looks like iPhone screens. You can use them to put together sketches and wireframes for your projects. Here are a few:
Yahoo Design Stencil Kit
Part of the Yahoo UI Kit. This is an excellent resource for any kind of UI design visualization. The Yahoo! Design Stencil Kit version 1.0 is available for OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG). It is a set of graphics in different formats to be used in various applications and help you put together UI sketches.
Geoff Teehan’s iPhone GUI
A Photoshop file that has a fairly comprehensive library of assets, some editable
Sketch paper for the mobile designer
A PDF or Photoshop based ‘sketchepad’ for sketching out iPhone interfaces. And of course, there are several others floating around. So now you have an idea or some content, you thought of the game plan, you sketched out an interface that would look at home on the iPhone. What’s next? Well…there are several approaches you can take to get your project on the iPhone:
The iPhone has a remarkable web browser for a mobile device: Safari. It has a few tricks up its sleeves and does its best to present any website in a readable fashion. So… if you have a website that is up and running, you might get away with doing absolutely nothing.
Safari is able to present nearly any website in a readable way. The user can double click on any section of the web page and Safari will zoom in to a readable scale and present that page.
Things that are to be avoided for iPhone compliance are:
- Flash. There is currently no support for Flash on the iPhone
- Segments of the site that rely on mouse hovering. Since there is no mouse, or cursor, the hover event is never triggered and therefore any behavior you designed will never show on the iPhone.
- Wide, rigid layouts with no columns. iPhone does not handle those well.
So if your site/app works well with Safari on the iPhone with no changes, that is your path of least resistance.
Do a little
The next step up is to keep your site, but make a few adjustments, so that viewing it on an iPhone will be a better experience for your visitors. Here some some simple tips and trick that will make your site work well for an iPhone visitor.
- Use columns. This is quite basic but it makes a huge difference. Users will double click on a column and will be able to zoom in and read your content easily.
- Organize complementary information so that it is placed in the same column. That way the user can read a whole chunk of related material by scrolling, without having to hop around.
- Don’t use absolute font sizes. Use percentages instead.
- Use the metatag. This is the most fundamental concept in any iPhone web work. It defines the size that the page should be resized to before scaling it down to fit the iPhone.
Using the Aptana Studio iPhone template / Code view
Aptana Studio showing iPhone preview
Various sites developed specifically for the iPhone
Various sites developed specifically for the iPhone
The following options involve the Apple Developer tools. To access them you need to be a registered Apple developer. The suite of tools is collectively called Xcode. Xcode includes a number of tools, each tackles a different part of the puzzle:
- Xcode. This is the central piece of the Xcode suite. It is where SDK projects are created, managed, edited and run. It’s a very powerful IDE that has many features to help you put together the application including code completion, refactoring and links to relevant documentation.
- Interface Builder. Is a powerful graphical editor in which you interactively create the user interface for your SDK iPhone application.
- iPhone Simulator. This is used by Xcode and Dashcode to run applications on the Mac desktop for testing purposes. It presents a running iPhone in a desktop window. A very convenient and time saving tool.
- Instruments is a program that helps you to debug, profile, and trace your program. This is how SDK programs are debugged and finely tuned for performance.
The Dashcode Route
Dashcode is a strange beast. It’s part of the Xcode suite, but does not really interact with the other components (except for the iPhone simulator it uses to run projects you develop with it).
Dashcode is an IDE geared to building iPhone web apps. It has a number of templates you can use as a starting point for your app (Navigation based application, Tab bar based application etc) and take it from there.
There is a control library that you can use, dragging out controls onto your interface and then assigning properties and logic.
It isn’t built for very elaborate complicated apps that have a lot of backend code, but if you have a straightforward self contained idea. There is nothing faster than Dashcode for putting it together.
The user guide to Dashcode can be found here
The Dashcode IDE, providing a library of controls a layout area and code editing section
Previewing a site developed in Dashcode on the iPhone simulator
Using all that webkit can offer along with one of the frameworks, or building your site using DashCode allows you to create something very close to a native iPhone app that is sensitive to orientation changes, uses animation for transitions and displays the iPhone UI widgets. What you will be missing is this:
- No access to features like camera, recording or location services
- Cannot get rid of the browser toolbar on the bottom
- Your site is shown in a browser and not as a separate app
- And the biggest drawback: it cannot be sold at the app store, so if you are planning on making money off your content it will need to be handled by you, rather than using the app store model and getting the exposure.
Using the SDK
To gain the full leverage of the app store and to take full advantage of all the iPhone has to offer, you need to use the iPhone SDK. Creating an iPhone SDK app exposes the full potential of the iPhone. The SDK provides an incredibly rich collection of frameworks each responsible for a particular area of functionality. The big picture is like this: You create an application in Xcode, build the user interface in Interface Builder and run it in the iPhone Simulator.
The main framework that you most likely will become most familiar with is Cocoa Touch. Among other things it contains the UIKit framework and the address book UI framework. It also supports windowing, events and user-interface management plus much more. There is a lot of heavy lifting to be done here and a lot of information to be absorbed in order to take advantage of the richness the iPhone provides.
The main concepts that you need to wrap your head around are:
- The basic flow Xcode uses for producing an app
- The frameworks available, what is responsible for which type of functionality
- Objective-c. The language used to program in Xcode
Xcode provides many project templates that you can use as a starting point for the major categories of applications: Navigation based application, Tab Bar Application etc.
The first step to starting with SDK development is to download the SDK and install it. The SDK is a hefty 1GB download and requires registration as an Apple developer.
The second step is to figure out what’s going on and get your bearings within this environment. The introductory videos are a good place to start and get oriented.