Designing for iPhone & iPod Touch… Seriously.


Of all the web browsers in all the world… iPhone had to walk into my life.  It’s hard enough keeping up with the various quirks of the big hitters in the League of Unextraordinary Web Browsers… then along comes a cocky rookie called iPhone with it’s “best browsing experience” attitude.

No big deal most designers would think, “Jobs says it uses Safari so everything should be good to go”. MUHAHAHAHA you silly designer, nothing is ever what the hype sells. Now I sound facetious and maybe I am a bit, but the reason for this post is a simple one.

I showed a friend a design mockup for a church web site I’m working on. His first question was “How does it look on an iPhone? It does have like 90% of mobile web traffic.” Wow, kinda felt like a kick in the nuggets. But it was a valid question.

Since I do not own an iPhone (I have my reasons) I had to test it on the next best thing, my iPod Touch. So I pulled up the site. Amazingly it looked really good! But there were some quirks, mainly with nested backgrounds, but all in all it looked pretty intact. Then it hit me… to even read anything on the site the viewer would have to zoom in and then that starts the whole scrolling issue yadda yadda yadda.

So I thought to my self, “Self, we need to seriously consider the iPhone when designing sites now.” Great, just what I needed to hear from myself. So we set out to compile some resources for designing a web site with iPhone considerations. So now we add yet another browser to the mix. Luckily it is really a matter of CSS and a few link enhancements for maps and phone numbers.

To that end I offer the following links for reference for my UI designer comrades-in-arms. I’ll try and post updates and additions as I find them. If you want to track updates you can find them on my Delicious or eat the RSS feed.

Statistics & Traffic

Design Resources

iPhone Simulators

  • iPhoney (sorry Mac OS X only)
  • If you are a designer on a budget (or on Windows) I highly recommend picking up an iPod Touch 8Gb model for design testing. You get a true test device plus a cool toy.

Axure RP Pro 5.5 Beta Available

In my day to day work I use Axure RP Pro for my wire frame & protoype development. If you are unfamiliar with it then you are truly missing out. It is a rapid design tool which allows you to quickly mockup a web app or web site without all the costly developer time.

I thought Axure 5.0 was amazing, but it did lack a few things that would make it outstanding. it looks like the Axure Dev team has listened intently to the Axure community and added quite a few nice features which will surely push Axure further in the prototyping arena.

Information on the beta and a download is posted on the Axure web site.

Check it out.