How to Get Started with iPhone Dev

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 (I alone account for 3% of that…) 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.

 

Immersion

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.

Apple provides a wealth of information on its iPhone developer site:
http://developer.apple.com/iphone/

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.

They can be found here:

http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/MobileHIG.pdf

I highly 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.

 

Planning

I’m not going to go deeply into this. Planning on the iPhone is like planning for any other platform.

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.

 

Visualizing

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.

Download here: http://developer.yahoo.com/ypatterns/wireframes/


Geoff Teehan’s iPhone GUI

A Photoshop file that has a fairly comprehensive library of assets, some editable

Download here: http://teehanlax.com/downloads/iPhone_GUI.psd.zip


Sketch paper for the mobile designer

A PDF or Photoshop based ‘sketchepad’ for sketching out iPhone interfaces.

It can be downloaded here:

http://labs.boulevart.be/index.php/2008/06/05/sketch-paper-for-the-mobile-designer/

And of course, there are several others floating around.

OK. 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:

 

Do Nothing

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. it takes the format of
  • Read Apple’s guide for iPhone web sites over here: http://developer.apple.com/safari/mobile.php

 

Develop a site for the iPhone

Now you’re talking! You are going to develop a website specifically for the iPhone. You need to learn what is possible from here http://developer.apple.com/safari/mobile.php and start putting it all together.

The idea is to build a web app that lives comfortably on the iPhone, preserves the visual style and behaviors the iPhone users are used to and takes advantage of the special features of the platform such as gestures, orientation changes, etc.

You don’t have to start from scratch. There are plenty of great resources that provide a good starting point or framework to build your iPhone:

  • iUI: Allows you to create navigational menus and iPhone interfaces, with a minimal knowledge of JavaScript. It provides an ability to handle the phone orientation change and an experience that is more iPhone like. iUI is a library of JavaScript and CSS that is intended to mimic the look and feel of the iPhone on web pages. http://code.google.com/p/iui/
  • Webkit: Safari is a webkit based browser. Webkit adds a whole lot of functionality that takes advantage of unique iPhone features (database accessible to your app, understanding iPhone gestures, orientation sensing and much more) check it out here: http://www.westciv.com/iphonetests/
  • Aptana Studio: An IDE that includes an iPhone site project starter. It contains management of phone orientation and other goodies. It will even preview your site in a mock iPhone screen: http://www.aptana.com
  • jQuery plug-in for the iPhone: jQuery is a lightweight, surprisingly powerful JavaScript library. Jonathan Neal created a jQuery plugin for the iPhone which helps you put together an iPhone centric web app. http://plugins.jquery.com/project/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:

Signing up is done here:

http://developer.apple.com/

  • 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.
  • Dashcode. Not really part of the Xcode suite but it’s bundled with it. Dashcode is a development environment that was first created for developing dashboard widgets (which are actually little web applications). In its current incarnation, it can build widgets as well as iPhone web sites. Dashcode outputs web pages, so you will be making use of your HTML, JavaScript CSS knowledge.

 

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.

Dashcode saves its projects as a Dashcode project file, and when you are done you export the project as an html/javascript/css site for deployment.

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.

Fortunately there is tons of information, documentation, sample code and introduction videos available here: http://developer.apple.com/iphone/

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.

You can find them here:
http://developer.apple.com/iphone/index.action

Xcode. The nerve center of the IDE development flow




Interface Builder. The tool you use to visually lay out the iPhone app interface

 

SDK Hybrids

This last type is basically an SDK app with a twist. Sections of the app are actually Safari browser panes that are showing web pages.

This splits the development into the section that will be written using Xcode and objective c and the section that will be fetching information from the web and and presenting it in a browser view.

Basically Xcode will be used to create the application running on the iPhone and Dashcode will be used to build the web sections of the app. Your application is the combination of these two technologies cooperating.

A good reference for this type of app can be found in the user interface guidelines

 

Summary

To sum all this up, let’s look at the most important elements needed to create content for the iPhone:

  • Immersion: Get an iPhone or iPod Touch and experience the user interface. Getting to know it is the only way of creating content that fits.
  • Planning: Nothing much to add here. Make sure your content has a purpose and you know what it is.
  • Do Nothing: Chances are your site works on the iPhone as is. You might not have to do much.
  • Do a little: You can take just a few steps to make your site play nice on the iPhone. A few changes can make a huge difference and make your site feel at home.
  • Develop an iPhone site: Create a site that is optimized for the iPhone, making it look like a native iPhone app as much as possible.
  • Create a site with Dashcode: Create sites specifically for the iPhone using the convenient and powerful Dashcode IDE.
  • Full blown SDK application:Use the Xcode suite to build native iPhone applications that can be submitted and sold on the Apple App Store.
  • An SDK Hybrid application: An iPhone application can be built as a combination of a native app and a web app, where the SDK app hosts web views presenting data from the web. This allow you to use your abilities from both environments.

 

Resources


Written exclusively for WDD by Etan Rozin. He’s a user interface designer and runs his own website at: www.rozin.com

Which tools do you use for iPhone development? Please share your comments with us…


  • http://www.marcofolio.net/ Marco

    Great article – both for WebDev as AppDev. I haven’t developed for the iPhone/iPod Touch (yet), but am willing to learn it. This is a great help!

  • http://blog.insicdesigns.com insic

    this is a good start. a lot of clients ask me to do site for iPhones but I decline due to lack of knowledge.

  • http://www.kirasong.com Kira

    fantastic source – thank you!

  • ryanprice

    We created a set of wireframes for iPhone sketching as well. The files are smaller than the one’s you have suggested, and gives another option for designers. They are available here

  • Sérgio

    Very useful information once again!
    Thanks for that

  • http://www.colethorsen.com Cole Thorsen

    Nice to see both the app and web sides shown like this. The app programming is definitely a learning curve if you are used to web development but this is a nice start.

  • http://www.chucksmith.de/ Chuck Smith

    Nice article, but I need to mention that the Mobile Safari can support mouse hover to a point. My girlfriend’s website teaches the Korean alphabet and relies a lot on mouse hovers, but works flawlessly on the iPhone. Compare Lesson 1 on your desktop and iPhone at http://www.learnlangs.com/RWP/Korean/.

  • http://www.bevwaring.com Malcolm Waring

    I wanted to download the SDK a few weeks ago but every time I try to log in, I get sent to an error page:

    We are experiencing technical difficulties. Please try again later.
    Please return to the iPhone Dev Center and try again.

    I have only seen a few references to this and obviously it must have something to do with my account but I have no idea how to get it fixed. I got one useless message from apple support.

    Any ideas?

  • http://qtp.blogspot.com sachin

    very useful resource infact very inspiring to get one started with iPhone development.

  • http://eugeniogrigolon.com Eugenio Grigolon

    Nice post! Thanks for sharing this.

    This is the first good post I found over the net about this topic, iPhone development.
    Great work!

  • http://cahcepu.com oi web designer

    really great post
    usually i use web UI libraries to create web for iPhone

  • http://gargoyle.saintannsny.org/course/view.php?id=11 Mike Roam

    Thank you for the links to the graphics. You may want to add a link to Stanford University’s online iphone/touch programming classes, with videos from iTunes:

    http://news.stanford.edu/pr/2009/pr-apple-040109.html

  • http://www.24100.net Ralf

    One of the best posts about starting to develop for the iPhone. I’m also available for “real-time help”. Simply follow me at http://twitter.com/ralfrottmann and I’ll be glad to assist!

    Ralf

  • http://www.derekunderwood.com Derek Underwood

    Very nice article. Some more basic info on Apple and iPhone programming:

    http://www.derekunderwood.com/general-computer/basics-for-new-mac-and-iphone-programmers/

  • http://www.maniacdev.com Johann Dowa

    Hi, great article. I’d just like to make one small correction to above, and that is that you actually can develop apps in Dashcode and put them in the appstore, in fact you can do this with any html designed framework. There are actually a few open source frameworks that allow you to design your app in pure html/css/javascript and add native functionality. I’ve listed 3 frameworks here http://bit.ly/17LorX for just doing that on my site. Many apps in the app store have been created using these frameworks.

  • http://www.ervinter.com Ervin Ter

    Is time for me to learn up how to develop a simple iPhone web app.

  • http://www.iphonearch.com iphone architect

    great resource for everyone who want to start developing apps for iphone, thanks

  • http://twitter.com/iVinay Vinay

    Great guide.. something I have been searching for a while. Thanks so much.. thanks a ton Etan, much appreciated.

  • http://www.crearecommunications.co.uk Adam

    Interesting that you can develop websites specifically for the iPhon – I think we’re going to have to adapt regular websites for proper operation on portable devices such as the iPhone too, because the future of web apps are heading towards mobile technology.

  • john appleseed

    are the dev tools able to run on windows?

  • http://iphoneized.com Chris

    Great post….I’m especially interested in WebDev for iPhone. Take a look at iphoneized.com, it’s geared towards iPhone optimized web design.

    Cheers,

    Chris

  • http://www.claudiocugia.com claudio

    Much appreciated indeed. Thanks! Cla.

  • http://frankyaguilar.com Franky

    This seems legit. From what I experienced with iPhone UI, this looks about right. My problem is this thing called Objective C!

    My goodness, this language. Is ridiculous!!!

  • http://www.przyroda.org.pl Sklep Zoologiczny

    Finally someone wrote comprehensive iPhone Dev related post. Thanks a lot!

  • http://www.teleit.pl projektowanie stron tworzenie

    Its a fantastic post as for me. thank you.

  • Lynx

    ObjectiveC ridiculous ???

    Well maybe, but what a wonderfull things that this Cocoa framework for iPhone is ;)

    You know, you have to understand something deeply before saying something about it, IMHO

  • http://labs.dariux.com Dario Gutierrez

    Excellent guide, thanks.

  • Carlos

    Good community for iPhone programming is iDevApps at http://www.idevapps.com

  • elsa

    This is interesting because it gives you an idea of how to use the iphone, thanks

  • http://portaltoafrica.com Newbie

    Great read, awesome resource. Definitely provides enough info to get me up and running on iphone development. Keep it up..

  • http://iphonedev.be Patrick Santana

    Very good quality!
    I liked it very much.

  • Eric

    Very nice primer to getting started with the iphone. Thanks!

  • http://itrailers.info/ Martin P

    Now that was a HUGE tutorial :) nice…

    I managed to finish my first iPhone website yesterday. I’m pretty sure it’s reasonable for a first site.

    I decided to make a movie trailers site because i can keep it updated automatically.

    Give it a test if you have an iPod touch or iPhone and let me know what you think:

    http://itrailers.info/

    Cheers! :)

  • http://www.cgbaran.com Baran Cezayirlioglu

    Great post. I was planning to start mobile development these days.

  • http://twitter.com/MahdiF Mahdi Al-Farra

    I was looking for some place to start from, and I guess this is the best place to start from.
    thank you :)

  • http://shahriat.com Shahriat Hossain

    iPhone programming my one of the never end wishlist, thanks for sharing your knowledge with us :)

  • http://www.daubit-blog.org Roman

    It’s very nice overview. The hardest part of programming on iPhone is ObjC. You have a lot of engines, wich can help you. For example this one: http://www.unity3d.com/
    We use this engine for 3D applications. Check out our blog(daubit-blog.org) and youtube chanel(rombowich).
    cheers

  • Nelson

    The latest version of Aptana doesn’t have the iPhone project template and apparently the plugin has been deprecated so it won’t be available. However, if you get the winChain and open and existing Project to build the code. I’m sure there’s a way to build the code using cygwin. But the iPhone template is no longer available unless they build another (cross your fingers)

  • http://danpixley.wordpress.com Dan

    Great article here. I have worked with c++, Java, and c#, but have never developed for the iPhone or Mac before. Time to crack open the Objective C tutorials. Thanks for the GUI tips here!

  • http://www.moinid.com Most Interesting Ideas

    Powerfull functionality

  • http://www.d3i.com Ollie

    We recently released the sketch template we use to design our iPhone apps.

    The template is based on a grid which is equal to 10px height, and has tick mark indicators of status bar, nav bar, tab bar and tool bar and keyboard.

    You can download the free template at http://bit.ly/13y61H

    Hope you find it useful!

  • http://disiniadaebook.uni.cc kerja keras

    thanks for the great article, its very helpful for a newbie like me.

  • http://www.wholesalediy.com koko

    Thanks for sharing

  • http://www.phonefreelancer.com iphone developer

    Absolutely fantastic article. You go over every aspect of the iPhone development process very well. From a developers viewpoint, this article will definitely put newbies in the right direction as iPhone development is very complex! But very rewarding!

  • Jacob wang

    Thanks for pretty good information~

  • http://www.m65jacket.com m65 field jacket

    good post. thanks for the share

  • http://prasaddeole.wordpress.com prasad

    thanks a lot for sharing this with all.

  • http://www.accappellacreative.co.uk Web Design Maidstone // Web Design Kent

    Great article, very informative, wanted to dabble in iPhone apps for a while now and this makes it look a lot more simple than I was thinking.

  • http://www.hostpipe.co.uk Website Design Gloucestershire

    Hi,

    Am really pleased to have found this article, we’ve been looking into developing a couple of apps, and being PC based were a little put off by the fact Apple didn’t provide a windows port of their SDK, so many thanks for pointing out the windows based alternatives…

    I shall probably be whiling away my hours developing apps now!

    Rob

  • http://blog.michaelhohlfeld.de/ Michael

    It’s a great article for me. Never every i did things with the iphone dev.
    now i have a good overview about the possibilities.
    because i will integrate a barcode reader via the cam i need to go with the SDK.
    Best regards Michael

  • http://myossdevblog.blogspot.com/ Johan Karlsson

    Nice introduction to the mysterious world of iPhone development. Although I have been working with iPhone development for several months now, I found some new insight.

  • http://www.sosbuys.com sosbuys

    Great post. I was planning to start mobile development these days.

  • Glenn Sogn

    How to start with App Dev?

    …get a Mac, download Xcode, test demo Apps, learn Objective C, apply for iPhone Dev membership, create your dream App, get it approved, YES…
    Regards the Alive Text App, supporting SMS/Email Groups and Text Templates and much more…
    http://iTunes.com/app/AliveText
    Enjoy!