I was chatting to Tom today about the all things iPad/iPhone etc and he mentioned an article on the Guardian where they mentioned being hard pushed to create an iPad app that offered anything over their website.

We have often thought this about many apps that litter the app store that could easily have been done in HTML 5. With a target of the iPhone there is a lot of support and it’s often hard to tell if something is a native app or a web app (pie guy is a great example). In many ways it’s a better idea to do this, as you can then use the same “app” on any device, the BBC mobile news site is a great example, and I’m unsure what valuable extras they could add by creating a native app…

The problem is, the onus is on the developers to tell the iPhone specific things, that can make such a diference. Some are quite complex and would require lots of work, but others are really simple, such as default zoom, and if the toolbar is required (The BBC mobile site always opens slightly too zoomed in!). These are done by simply adding meta tags to the head of your HTML. We then suddenly realised that you could do this using a JavaScript bookmarklet, the same way Drew did way back for changing the home screen icon.

Obviously we quickly created one and it works a treat. Basically you click the bookmarklet on a site of your choice, and when it loads it won’t open in normal Safari and won’t show you an address bar. This is great for apps like Gmail, Google Tasks, Latitude, BBC news, etc etc

Step by step

  1. First drag this link to your safari bookmark bar. Convert to WebApp
  2. Sync your iPhone (with bookmark sync turned on)
  3. Browse to a website you want to make a web clip of through Safari on your iPhone
  4. Open your bookmarks and tap the one you just added to bookmark bar (nothing will appear to happen)
  5. Then tap the + at the bottom of the screen
  6. Select, “Add to Home Screen” and give it a sensible name.

You can see here the diference between the BBC sport website with and without using the bookmarklet:


How the BBC mobile site loads by default

Saved as WebApp

How the site looks when saved as a web app


UPDATE It seems standard links on the first page open in Safari :( Still works well for Google web apps!

This entry was posted on Thursday, April 8th, 2010 at 5:13 pm and is filed under Development, JavaScript, Technology. You can leave a comment and follow any responses to this entry through the RSS 2.0 feed.

2 Comments Leave a comment

  1. […] discussing mobile web frustrations with Rob, we hit on an idea to reclaim a few pixels for sites that we visit regularly enough to have added […]

  2. Shaun McCarthy 20 June 2010 at 3:30 pm #

    This doesn’t work anymore in iOS4/Safari…..Is there any other fix?

Leave a Reply