So whats in a Iphone web app ?

After watching someone installing an iphone “web app” I was wondering what makes up the app and what makes it different from simply a web page tailored for an Iphone. I guess I found that in some ways its defined by what it is not.

When I put up my first web server – there were no freely available tools to design web pages – not much information about the “standards” as they were then or the capabilities of the technology. Comparing this to the approach Apple have taken and the 600 or so web apps that have sprung up since the launch (and heaven knows how many Iphone apps and Iphone webs after the sdk is released).

So back to the question : Whats in the Iphone web app ?

Well obviously some functionality – its got to do something. Then theres the presentation – how does it look and the implementation – how does it actually work ?

So some info about actually creating one summarised from Apples information ..


iPhone and iPod touch allow a user to save a WebClip bookmark to your site on their Home Screen.

To specify a bookmark icon for all pages of a web site, place a PNG image named “apple-touch-icon.png” at the root directory of your web server – similar to the “favicon.ico” for site icons.

To override the site bookmark icon on a specific web page, insert a element similar to within the element of the page.

The bookmark icon dimensions should be 57×57 pixels. If the icon is a different size it will be scaled and cropped to fit.

Safari will automatically composite the icon with the standard “glassy” overlay so it looks like a built-in iPhone or iPod application.

Resources and limits

Any downloaded resource, whether it’s HTML, CSS, JavaScript, images, or non-streamed media, must be less than 10 MB. The 10-MB limit applies to the encoded size of images. There is also a limit to the decoded size of images. See “Optimize Images.”

JavaScript execution is limited to 5 seconds for each top-level entry point. If your script executes longer than 5 seconds, Safari stops executing the script. This timeout ensures that JavaScript execution does not prevent the user from interacting with your page or navigating elsewhere.

Make sure that the JavaScript you download is exactly what you need for the current page. Unneeded JavaScript consumes precious memory resources. Websites that have been in existence for some time often contain unused JavaScript; a quick audit of your site can help you free up memory resources and improve site performance.


In general, avoid using complicated framesets that rely on the ability to scroll individual frames because there are no scroll bars on iPhone.

The next article on Iphone web apps – will focus on putting together something simple to illustrate the Iphone approach to these kind of apps.