How do I make an iPhone web app mimic a non-web app?

Question

I've been considering making a quick little iPhone web app.

I started reading about and experimenting with the special meta tags and attributes documented at Apple's Web Apps Dev Center:

• viewport
• apple-mobile-web-app-capable
• apple-mobile-web-app-status-bar-style
• -webkit-border-radius
• -webkit-border-image
• autocorrect
• autocapitalize
• apple-touch-icon
• -webkit-text-size-adjust

This got me thinking that there must be a good guide I can follow to best mimic the default style and behavior of the device's non-web applications.

I then stumbled upon the Joe Hewitt's iUI project.

It's got two demos that are pretty impressive:

• Music Demo
• Digg Demo

Are there alternative libraries, guides, or other resources I should use?

Answer 1

On February 12, 2010 Andrew Flocchini of theappleblog.com wrote a guide to making website forms optimized for the iPod Touch, iPhone & iPad using the iWebKit framework package.

_{(source: wordpress.com)}

How-To: Create an iPhone Web App

Answer 2

Take a look at Swipy.js. I didn't like the way those frameworks worked so I made this which includes other great projects:

• Modernizr
• jquery.transit
• Hammer.js
• FastClick
• Waypoints.js (not the one for scrolling)
• Fontello / FontAwesome

It progressively enhances with Modernizr, adds smooth transitions with jquery.transit, adds edge swipe back/forward navigation with Hammer.js, adds FastClick for taps, solves internal links with Waypoints and a nice nav bar with FontAwesome icons.

Enjoy :)

Answer 3

I think the best framework for iPhone Web App is jQTouch http://www.jqtouch.com/ It is a plug-in for jQuery. You can check out the Showtime app which is built by jQTouch.

Answer 4

After testing several UI framework for iphone web app, I think JQTouch is the best

Answer 5

Check out the iUI Library- http://code.google.com/p/iui/:

Based on Joe Hewitt's iPhone navigation work, iUI has the following features:

• Create Navigational Menus and iPhone interfaces from standard HTML
• Use or knowledge of JavaScript is not required to create basic iPhone pages
• Ability to handle phone orientation changes
• Provide a more "iPhone-like" experience to Web apps (on or off the iPhone)

Answer 6

Have you looked at the iPhoneWebDev web site?

Also check out the book Professional iPhone and iPod touch Programming: Building Applications for Mobile Safari by Richard Wagner.

Answer 7

Apart from the fancy effects that are doable with most of the libraries such as scriptaculous etc... one fancy thing going on in iPhone web apps is the "#" back button compatibility even with ajax calls, you can google for "Really Simple History" to find the right library to use in this case.

Also you may want to take a look at this if you're using jQuery: http://plugins.jquery.com/project/iphone