So you’re going to write an iPhone app…

Welcome! Many people arrive at this page while searching for information about developing iPhone applications. The ideas from this article are expanded upon in my book, iPhone App Development: The Missing Manual.

As we’re all waiting with bated breath for the release of the iPhone SDK later this month, now would be a good time to pass along some of things I learned while working on MobileTwitterrific. Read this now and you’ll save yourself some headaches when diving into the SDK.

Code reuse

Don’t expect to reuse much of your existing code. If you’re using a standard MVC design (which is pretty much inescapable if you’re using Cocoa) then about 2/3rds of the application will require major rework.

From my experience, your models and the infrastructure that support them can be reused without much effort. On the other hand, the multi-touch interface obviates the need for your existing views and controllers.

As an example, the code I use in Twitterrific to download the data from Twitter using NSURLConnection, parse the XML into an NSDictionary and store it in a sorted NSArray was largely copied without change from the desktop application. The controller and view code was all new.

Memory usage

There are some very tight limits on memory usage. You’re given approximately 64 MB of space to work with (about half of what’s available.) If you go beyond that, Springboard shuts you down unceremoniously. That combined with the fact that there isn’t any swap space where unused objects can go to rest, makes for some design decisions that you haven’t had to consider in the desktop environment.

For example, let’s explore how I manage the scrolling list of tweets in MobileTwitterrific. In the desktop version, each tweet in the list is an NSView, while on the phone each tweet is a UIView. The big difference is when these views are instantiated and freed.

On the desktop app, views are created whenever there’s a new tweet and they occupy space in memory until removed from the list. The views don’t have a very large footprint and the supporting infrastructure (NSTableView) works much more smoothly with real objects (rather than some sort of proxy.)

The iPhone, on the other hand, uses a UITableView. This subclass of UIView has delegate methods that ask for a view to display for each row in the table. Of course, you could instantiate a complete list of views and just use the row index to pull the view out of an NSArray. But think about this delegate design pattern a bit: it’s there so you have a chance to instantiate views when they are actually needed. If you have 2,000 names in your contact list, and are only displaying 8 at a time, why do you need to have 1992 views wasting memory?

Basically, you’ll find yourself being as lazy as possible when it comes to object allocation, and being as ruthless as possible when it comes to freeing those same objects.

NIB-less

Try to imagine developing a Cocoa application without Interface Builder. Try really hard. Really, really hard. Seems like a nightmare, huh?

Guess what? This nightmare will become a reality as soon as you start building your iPhone application. There are no NIBs. None.

I don’t think this is one of those “let’s skip it for version 1.0” design decisions. The process of unarchiving the objects in the NIB takes CPU cycles and memory: both things that are in limited supply on the phone. And, as I stated above, you’ll find yourself creating and destroying views much more frequently than you do in your desktop application. (And anyone who has tried to deallocate objects from a NIB knows that’s not so easy.)

Creating views, placing controls as subviews using NSRects, and then setting a bunch of properties isn’t the most glamorous coding in the world, but it’s the price you pay to run on a mobile device. Just be very happy you’re working in Objective-C and not some other crappy language, OK?

Another thing that us Cocoa developers have gotten spoiled with: bindings. You’ll find that all the normal KVC and KVO infrastructure is present, but it saves much less time when you have to establish all the bindings manually with code. If you’re like me, you’ll end up just targeting controls at methods and be done with it.

Complexity

The good news is that the user interface is much less complex. The bad news is that the user interface is much less complex.

If you have a rich desktop application with hundreds of features, you’ll find that it’s hard to pick what you absolutely need. Culling features isn’t easy, but it’s absolutely necessary.

One mental exercise that I’ve found useful is to ask myself “Will I need this feature while walking down the street or sitting in traffic?” Both are situations where there are significant distractions to the task at hand. Does the feature make it easier to interact?

Luckily, not having NIBs and bindings gives you some motivation to get rid of unnecessary complexity. When it’s not easy to add that view with hundreds of controls, you’ll think twice.

Look and feel

Don’t think that your desktop and mobile application will share any look and feel. There may be slight resemblances with regard to branding, but that’s about it. Does Safari look like MobileSafari? Sure it has the same icon, but…

While I was developing the look and feel of the MobileTwitterrific application, there were two areas which were problematic: display contrast and button placement.

Being able to read the display in all kinds of lighting conditions means you’re going to need high contrast. In your office environment, it may seem a bit garish to have a lot of dark elements on light backgrounds (or vice versa), but once you actually try to use these elements in the “real world” it makes complete sense.

This “real world” usage also makes you think about where to place controls. In one case, I placed two buttons too close to one another and found that when I used one hand to drive the UI, my thumb would often hit the wrong control by accident. When I was doing development in my office with the phone on my desk, I used two hands to control the UI and didn’t see this problem.

It’s likely that there will be a simulator in the iPhone SDK. Don’t believe for a second that you’ll be able to use this simulated device for all your development and testing. You have to literally live with the application.

That’s all for now. Let’s go back to waiting impatiently.

Put your content in my pocket

Sometimes it takes awhile to fulfill a promise.

One such pledge was made last century to my good friend Jeffrey (he was only a prince at the time.) I said that I’d love to write something for his fledgling mailing list: A List Apart. This past month, I finally got around to writing that piece: Put Your Content in My Pocket.

If you’re visiting this site for the first time, you might be interested in the original article that prompted our collaboration. I’ve also written some articles that explore some of the problems, performance and less than obvious features on the iPhone. For the hard core geeks, there are also some explorations into the specifications.

So enjoy your visit and please make sure to join in the discussion forum at ALA if you have any questions or concerns about my article. Thanks!

Postscript: I mentioned some nonsense in the article: here it is, the Eric Meyer Memorial iPhone Blocker.

Why stop at the Dock?

If the changes to the Leopard Dock are a good idea, shouldn’t Apple go all the way and do the same thing to the Finder? And then applications, too! Hell, I can totally see these windows flying around with Spaces and Exposé and Core OMFG!

The Finder of the future?

Forget about October, I’m stoked about 10.6! Let’s hope they add more reflections and transparency, too!

Does your app icon suck?

Yeah, I see a lot of icons in my business. I often get asked what makes for a successful desktop icon. And I’ve answered many times—but never in public. This essay also gives me a chance to write about something other than the iPhone :-)

Let me begin with this disclaimer: this discussion is directed at independent software (”indie”) developers. Our corporate clients, like Adobe, Apple and Microsoft, have very different needs and objectives when dealing with iconography for software suites. Please also remember that I’m a software developer by trade, not a designer (although, I’m not completely clueless when it comes to the arts.) This discussion will cover a lot of things designers already know—and things that developers need to know.

Before I talk about the specifics of icon design, it’s important to realize what your application icon represents. It’s your brand: it shows up in the Dock, on your download page, and in product reviews. People may remember your app icon more than they remember your product name. A strong icon design results in an equally strong brand.

What do you think of when I describe an icon that’s a truck sporting a yellow cab with a purple cargo?

That’s Transmit’s brand. It’s so good, other people want to use it.

Would you believe that people actually thank us for making that little truck icon? It’s true—an icon can have a huge impact on people’s perception of your product. If your app is a joy to look at in the Dock, people will be in the right frame of mind when launching the application.

This effect of good design is contagious, too. The Twitterrific icon is an example; the strength of the icon has carried over into other applications either directly or indirectly. People associate a blue bird with Twitter now—at the time we created the application, Twitter’s only brand was the word mark.

It’s also important for your design to be unique. The world doesn’t need another globe icon for a network application. Be careful about using the “document and tool on the desktop” metaphor; it may be recommended by the HIG, but it also means you’re playing on a field crowded with other similar designs.

Of course there is still room for creativity when working with familiar metaphors. If you look at Bryan Bell’s icon for NetNewsWire or Jon Hicks’ work for Firefox, you’ll see that the globe is a secondary element in the design. The complementary colors of the satellite and the fox are what draw your eye and make the image memorable.

One of the most unique icons to come around in a long time it the Coda icon. (I feel fine making that claim because I had no substantive involvement in its design—I’m just happy to have it in my Dock.)

There’s a interesting story that went along with this icon’s creation. This story illustrates how much thinking and rethinking goes into a successful design. It also shows that you shouldn’t work in a vacuum when dealing with something as important as defining your brand.

The early concepts for Coda’s app icon was a forklift; a natural extension to the Panic truck. But the release of a similar application that used this metaphor forced us to consider a new direction. In retrospect, that was one of the best things that happened in the project.

So without a forklift to work with, some more brainstorming ensued. Gedeon Maheux came up with the idea of using a leaf or seedling to represent the continual care and growth that a web application typically receives. Dave Brasgalla started developing this concept with a series of hand drawn sketches and simple vector artwork.

Coda concept artworkOriginal concept sketch for Coda

Cabel Sasser, who did the UI design for Coda, liked the concept sketch, but was hesitant about its use in their product. Ged convinced him it was a good idea because of its uniqueness.

Once we got the go ahead from Cabel, David Lanham started developing the icon. As with any design job, there were multiple revisions before everyone was happy. I first saw the icon toward its final revision (before the addition of trichomes and the rearrangement of water droplets.) Like Cabel, I had doubts about the icon’s simplicity.

Coda icon before final releaseCoda icon before its final release

The deciding factor was that it stood out on product website and in a list of other icons. Its simplicity and uniqueness was its greatest strength.

Comp of Coda icon on Panic websiteComposition showing how Coda icon would show up on Panic website

And the punchline for this story: a conversation with Cabel at this year’s WWDC revealed that he and Steven Frank originally had the idea of doing a leaf to represent their web studio application. But they discounted it and never mentioned it anyone. I guess that means that great minds really do think alike :-)

Note: There’s more that I’d like to show about this project, but I don’t want to steal any thunder from Cabel and his presentation at C4. Hopefully this post will whet your appetite as much as a link to Gina’s. It would also be safe to assume that this post will be updated sometime after our little get together in Chicago :-)

So what should you look for when developing your own application icon? It’s really pretty simple when you get down to it—the key elements are:

  • Color
  • Shape

When dealing with these elements, strive for simplicity and clarity. How the icon looks at 16×16 pixels is just as important as its representation at 512×512. Complexity in the larger sizes will not work well at the smaller sizes. A vibrant color that looks great at 16×16 might be overpowering at 512×512.

To get an idea of how these two elements are important, let’s do a little experiment. (Regular readers will find that I love doing “real world” tests to back up my statements.)

Open your Applications folder and set the list view to the smallest size (16×16.) Now scroll down through the list and pick out which icons jump out at you. Now ask yourself why—the answer is color and/or shape.

Here are the applications that caught my interest, their strongest design element, and some thoughts I have about each one:

Adium (color & shape)
A green duck makes a strong statement, although I think making the color a preference is taking customization a bit too far.

Firefox (color)
Circular icons tend to be overused, but the fox’s “C” shape overcomes this.

GarageBand (shape)
A unique shape that draws the attention of people who like music (like me.)

NetNewsWire (color)
The complementary colors in this icon are particularly strong and make for a very dynamic icon.

PhotoBooth (color)
Unique in that it successfully uses a gradient—ranges of color typically get lost in smaller sizes.

Skype (color & shape)
One of the few icons that incorporates the word mark clearly and successfully.

Parallels (color & shape)
I have no idea what the shape represents, but it’s unique and clearly represents the brand. Without the gold coloring, the shape would be reminiscent of the brand used by DC Shoes.

QuickTime (shape & color)
A clever icon that uses the letter “Q” to represent the brand. It’s been around a long time and still looks good—you can’t say that about most applications that were released in the early 1990’s.

Hopefully this essay has given you some basic insights on how to approach the design (or redesign) of your application’s icon. There’s no way that a fantastic icon can overcome crappy code, but something nice to look at will definitely affect people’s perception of your hard work. And be sure to give brand development as much care and thought as the lines of source code in your project: it’s not something that you just slap on your application before you ship.

One line of code

Want to make your site look better on the iPhone with one line of HTML?

It’s easy—just add a <meta> tag that lets the iPhone know how wide to display the initial page. I added the following code to the <head> in my template yesterday:

<meta name="viewport" content="width=808" />

Every browser besides MobileSafari will ignore this information. But it does something very important on the iPhone: it optimizes the viewport for your content.

By default, the iPhone uses a viewport of 980 pixels—a value chosen to maximize compatibility with a broad range of web sites. When you specify the viewport width explicitly, you will eliminate any empty space between that 980 pixels and the width of your <body> element.

On this site the <body> is 808 pixels wide, so there were 172 pixels of content-free space being used to display the page. On a screen that’s 320 pixels wide, that’s significant. So much so, that by making this simple change, the headings on my blog posts are now readable on first load of the page (previously, the text was too small.)

As always, a picture is worth a thousand words. Here are the changes that could be made on a couple of my favorite web sites:

Zeldman

Looking at Jeffrey’s CSS file, I see:

html {
	min-width: 742px;
	}

So his one line of code would be:

<meta name="viewport" content="width=742" />

That’s all folks!

Daring Fireball

Likewise, Gruber had specified this CSS:

body {
	...
	min-width: 760px;
	}

Which would mean this addition to the <head>:

<meta name="viewport" content="width=760" />

But there’s a problem…

MobileSafari uses a heuristic to adjust the viewport based on the width and aspect ratio of the page. And since Gruber is a man of many words, the page is long and the initial scale for the viewport isn’t optimal. So he could use this instead:

<meta name="viewport" content="width=760, initial-scale=0.4" />

But his problems aren’t over yet—there’s still an issue with usability. You can double-tap to zoom in to read an article—and when you double-tap to zoom back out, you’re using the suboptimal scale factor again. This is easy to work around by specifying a minimum scaling factor:

<meta name="viewport" content="width=760, initial-scale=0.4, minimum-scale=0.4" />

And it’s still just one line of code!

Are you wondering how I came up with that magic scaling factor of 0.4? I used a tried and true development practice: trial and error. While using this sophisticated technique, make sure to close the window in MobileSafari (by clicking on the red X icon.) The viewport scale is not modified when you refresh the page, so you’ll only see changes when starting on a new page.

Hopefully, Jeffrey and John will read this post and make the changes to their sites—I like reading them on the iPhone :-)

Update: WordPress is turning the double quotes in the examples above into smart quotes. You’ll want to convert them before adding them to your template. And for more information on viewports, check the Apple iPhone developer page (you must click on “Optimizing for Page Readability” to view it.)