Way back in September 2007 I attended an iPhone Tech Talk in New York that was all about building iPhone Web Apps. This free Apple-sponsored event helped me get a very basic iPhone-optimized version of my Google Maps mashup called RinkAtlas up and running.

I couldn't stand sitting on a 60 or 70-percent-done iPhone web app anymore. So I decided to take some time over the past week to polish the UI of the RinkAtlas for the iPhone and get it ready for full-scale launch. I thought I'd use this post to discuss the problems I experienced and the resources that helped me solve those problems.

For those of you who are not hockey players or figure skaters, RinkAtlas is the only site on the Internet that will accurately generate door-to-door directions to any ice rink in the United States. So, having an iPhone-optimized version of the site that integrates well with Maps.app makes the site a lot more useful to traveling athletes, coaches, and officials.

I kept the iPhone web app in stealth mode for a year. I did that because the user experience just wasn't what I wanted. The initial reason was that the firmware didn't have a service like Core Location, so defining the starting point for directions en route was a major problem. The other issue was that I didn't have the CSS3 skills to customize the rink location pages that were basically styled by the iUI toolkit.

The iPhone Tech Talk series that took place in the Fall of 2007 gave hugely valuable information about building iPhone web apps. It's unlikely that so much information on this subject will ever be delivered in a conference or tutorial setting again, given the shift in focus by most of the community to native iPhone apps. However all is not lost, because many of the talks were made available through a part of Apple Developer Connection called the WebApps Dev Center.

Many of the presentations that were made at the iPhone Tech Talks are available via Apple Developer Connection on iTunes. (You need to be an ADC member at some level or a member of the iPhone Developer Program in order to access the videos I point to hereafter.) The video iPhone Development Introduction is 8 minutes long and really provides an explanation of which other ADC on iTunes presentations about web apps you will want to review.

Safari on iPhone Parts I, II, and III are probably all valuable, but if you want to build a web app that is similar to a native iPhone app in look and feel, the presentation to focus on is Safari on iPhone Part III: iPhone Applications. That presentation is 14 1/2 minutes long and gets into making sure that your web app provides discrete functionality, is Ajax-based, and uses familiar layouts as well as familiar animation. It also talks about how to integrate your web app with the core apps on the iPhone.

These iPhone Tech Talk presentations tell you what to do, not how to do it. RinkAtlas is a LAMP application that uses PHP and the Smarty template language in the Model View Controller (MVC) paradigm to dynamically render its content. I had to figure out how to create the views and assemble them into a functioning iPhone web app.

I knew about iUI, Joe Hewitt's incredible "little CSS and JavaScript bundle" that made many iPhone web apps possible, but I didn't know how to use it. A year ago, trial and error was the only thing I could recommend. But a book came out in January 2008 that made understanding it a lot easier.

Professional iPhone and iPod touch Programming: Building Applications for Mobile Safari from WROX has bolstered my CSS3 knowledge which is critical to iUI-based web app development. I think other books may be useful, but most publishers focused their attention on iPhone SDK development. This is too bad in some respects, but I don't think anyone foresaw Apple's NDA on SDK-based development staying in place as long as it did.

(If you have specific book recommendations for iPhone web app development, please leave them as comments. I'd love to have more ideas and examples to talk about and help me improve my skills.)

RinkAtlas for the iPhone is located at http://www.rinkatlas.com/iphone/. It is a typical iUI-based iPhone web app in the sense that the color palette and styling of the pages is out-of-the-box iUI. Parts of the application are designed like the iPhone phone app contacts list in that there are long alphabetical lists of rinks for each state. (There is also a partial list of rinks for each Canadian province which is gradually growing to encompass all of the rinks in Canada.)

The RinkAtlas for iPhone web app is missing things like the alpha list on the right side of the phone app contacts list that would let you quickly jump to the beginning of the rink names that begin with "B", "C", "D", et cetera. The app also currently lacks a search function, mainly because I haven't figured out how to do the transition from the search box to the display of the list of rinks that matches the search criteria.

I'll get there with those features in a little while. I think the heavy lifting on this web app is behind me.

As I said in my previous post on Inside iPhone, I think all websites marketing themselves to iPhone users should have some iPhone-optimized content even if they also have a iPhone native application. I hope that this explanation of where to find the resources to implement an iPhone web app inspires you to make another one of your sites iPhone friendly.

I'd be very interested to hear any comments on the RinkAtlas web app that you have. Of course, it's not an iPhone native app, so don't ding me on that. And just so you know up front, I don't know if I will have time to build an iPhone native app for RinkAtlas in the foreseeable future. My work and family commitments, as well as my lack of Objective C / Cocoa programming experience are key factors in this conclusion.