I’ve been testing a few things over the past week around bringing the experience of an iPad application and delivering it through a web app rather than a native app.
The application was a simple one. It is basically an online ordering system specifically designed for that iPad to allow a particular sales force to visit their clients and show them through their product range.
Usually I would be recommending that the website should be made responsive to allow anyone using an iPad to have this kind of experience, however for many many reasons that lie well away from the technology capabilities the client wanted to keep these two resources separate.
There are a few things that go a long way towards making your web page looking more like a web application, but these are probably the easiest and quickest wins (if you follow the syntax of course)
All of these updates need to be made in the <head> </head> section of your html.
iPad Web App Icon
When you click “Add to home screen” from Safari the iPad will drop a miniature screen shot of your web app by default. You can impress all your friends by including the following line which allows you to specify the image that will appear….
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
You don’t need to add the rounded corners or the shine, that’s automatically done by the iPad.
Safari Full screen on iPad
With the release of IOS5 Apple have introduced tab browsing into Safari on the iPad. While this is great when you’ve got lots of windows it detracts from your new web app and provides some distractions for the user.
Add the following code to make the iPad web application go full screen.
<meta name="apple-mobile-web-app-capable" content="yes" >
You should note that even with this added you will need to open your app using the Home Screen icon that we included just before. It’s also worth noting that any links to other pages within your app will open safari in full screen, so you will need to house the whole app on the same page and pull through other content through Ajax…. but that’s for another post.
iPad Status bar appearance
Now that you’ve gone full screen with your iPad web app you can decide the color of the Apple status bar.
<meta name="apple-mobile-web-app-status-bar-style" content="black">
There isn’t a lot you can do here as there are only 3 choices.
- default
- black
- black-translucent
iPad web app startup image
Finally we get to the startup image. This little sucker caused me no end of trouble even though the answer is relatively simple.
The start up image is a great way to show the user that your application is loading, and distracts them incase that is taking a while. It’s something that is required in all native apple applications, so any web app looks lost without it.
<!-- iPad Portrait 768x1004 -->
<link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: portrait)" href="spash-1004.png" />
<!-- iPad Landscape 1024x748 -->
<link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: landscape)" href="spash-1024.png" />
Now to save yourself a LOT of trouble please take note…
- Portrait: 768x1004
- Landscape: 1024x748
This took me a while because both my images were the full dimension (1024x 768).
Again….. Portrait is 1004px and Landscape is 748px
Thanks to this article from Miniapps for finally getting me on the right track there.
What else
I’m glad you asked.
There is are a lot of other things you can do with the web application. I’ve already mentioned ensuring that the iPad web app works entirely within the home page, so you need to ajax the other content as the user moves through the app.
You can include a cache-manifest file to ensure that the application is available offline as well.
iScroll is a great javascript plugin that provides quasi native scrolling functions within the application. As of IOS5 you can use the following code in your css..
position:fixed; // header and footer fixed position
overflow: scroll; // scrolling navigation from off the page
-webkit-overflow-scrolling: touch; // Native iPad scrolling with CSS instead of iScroll
I’ve gone back to iScroll because there is a bug with the webkit overflow scrolling with the content disappearing until the scroll momentum has stopped. If you set it to “auto” instead of “touch” it works, but you’re left with a very rigid scroll experience (and it’s just a bit pants).
If you would like to look into anything else you can do on the iPad with web applications (or iPhones, Androids, Galaxy Tablets or any other mobile device) please feel free to get it touch and ask.
It looks like you’re referring to code that isn’t there.
Right you are Sarah. There was an issue with the <> within the
<code>comments. Have replaced them with < > and all is as it should be again.Thanks for the spot.
Love the information and tone of blog I found it top banna have a great day and thanks for helpful data
See my own Site Garden Design London
Since last few days, I was looking for this “startup image code” and finally, I got it from here. It helped me a lot in my work. Thanks.