Develop iPhone Web Apps w/out an iPhone

I saw my friend Aaron twitter a question about this topic, so I thought I’d pull together a quick post with some resources for those with a Mac (and 1-2 for Mac or Win Firefox) and general tips. Briefly the tips are:

• Test using Safari with User Agent set to Mobile Safari
• Preview with iPhoney application for more context & rotation testing (add latest agent string)
• Use Firefox extensions User Agent Switcher, Web Developer and Firebug, and Firesizer
• Use iUI code with CSS/HTML/Javascript for iPhone-style interface
• Visit the Apple Web Apps Development Center and Apple iPhone Dev Center
• Check out the Google Groups iPhoneWebDev
• Register for iPhone DevCamp 2

Safari- Go to Preferences and check the box for Show Develop menu in menu bar.

Then you can use the menu Develop > User Agent > Mobile Safari 1.1.3 – iPhone. That will allow Safari to present itself to website (and your code) as the iPhone web browser. Hovering over a menu option will also display the full User Agent string.

iPhoney- iPhoney from MarketCircle is basically a shell around WebKit that acts like the iPhone browser, Mobile Safari. It does support rotation, but isn’t exactly like iPhone (address bar can’t scroll (but can be hidden), it does add vertical/horizontal scroll bars in some cases were iPhone wouldn’t). That said, it is a nice way to get a quick “iPhone Preview” of any site from your laptop or desktop computer.

Tip: I found that I get more “iPhone-like” results with many sites by having iPhoney use a custom user-agent. The User Agent string below matches exactly what a web server sees for my iPhone user agent with the current firmware, whereas the iPhoney returns a slightly different version (Mobile/1A538a). Just use the appropriate menu item to enter the text below as “Custom User Agent”.

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3

Switch User Agent- Firefox users (even those already using Firefox 3.0) can use the User Agent Switcher extension to also mimic the iPhone web browser user agent, with the same User Agent string as above.

Firefox extensions for Javascript development- While you’re at it, you may also want to get a couple of other Firefox extension that are generally useful for web development– the Web Developer extension is from the same author as User Agent Switcher, and the latest Firebug extension beta release seems to work well with Firefox 3 (and help a lot with debugging). Firesizer isn’t is compatible with Firefox 3 (yet) now, and it allows you to quickly switch Firefox to different screen sizes… helping you preview an iPhone sized window of (or even test other web sites & apps at common sizes like 1024×768).

iUI- iUI is set of CSS, HTML and Javascript that hails from Joe Hewitt of Facebook, who also originated Firebug. iUI is available from the Google code site, and includes code to provide a more iPhone-like look and feel to your web applications while providing the ability to handle page orientation changes (rotation between landscape & portrait views).

Apple Developer pages and Google Groups- There are a bunch of resources on the Apple site and there is an active iPhone Web Development Google Group too. Visit the Apple Web Apps Development Center and Apple iPhone Dev Center. Then check out the Google Groups iPhoneWebDev.

iPhoneDevCamp- Finally, there will be a second iPhoneDevCamp at the Adobe offices in San Francisco. It is scheduled for August 1-3 2008, and you should watch the official iPhoneDevCamp 2 website for more information.