Mobile and Tablet Marketing, Technology

Avoid the App Store with “Add to Home Screen”

I know that I’ll probably catch some flack for this, but I’m not a Mac fan. Ok, I just plain can’t stand them. I can’t put my finger on why, but here’s a start: in order to develop an App for the illustrious iPhone, you must develop only on a Mac with Mac software—an investment well over $2,000. Nevertheless, the iPhone is a market-changer and a marketing medium to which businesses must cater.

So, you want the benefits of App-like access, but you don’t want the expense (nor the forced migration to the Mac platform), or you possibly don’t want to learn a whole new code language. You’ve done well at web application programming, enjoy all of the benefits of cloud hosting, so why build a client application now? Especially if you aren’t chiefly interested in the App Store exposure—people will find your application through your own marketing efforts, you just want to offer them the one-tap quick access behavior. You need a pseudo-app.

Good news. iPhones have built-in capability to support just that kind of function. No Mac needed. No second programming needed for a client-side application. All you need is:

  • A website designed 320px wide, or with an optional theme as such.
  • This zipped code snippet and images
  • An apple-touch icon (png)

First, what’s all this code doing in principal?
The code in the zipped file above is designed to instruct the user on the proper steps they need to take, intuitively teaching them the native iPhone functions that are already available to them which make your web page accessible like any other App. Second, it has measures built in so that this only displays on iPhones AND allows the user to close the prompt, never to see it again for a period of 6 months, at which point they’ll be reminded again.

Now, for the geeky part: how do I install it?

  1. Save your apple-touch-icon.png file in the root directory of your website and reference it with the appropriate >link> tag in the head.
  2. Place the images found in the zip file (above) into a directory pathed /images/
  3. Paste the code from the text file found in the zip file (above) just before the closing body tag on your web page(s)

That’s it. If you follow these steps, you should see a prompt appear on your iPhone that points the user to the shortcut icon in their Safari browser and instructs them to “Add to Home Screen” for one-tapp access like all their other apps. Now, your web application will be book-marked with an icon on the iPhone screen. In appearance and ease-of-access, it has all the benefits of a native App without the cost or hassle.

One comment

  1. 1

    Nick,

    Great post. This is what we did with http://maps.wbu.com – you’ll also find quite a few hacks out there that eliminate the address address bar and scrolling issues with publishing these! I agree that this is a much better solution than working through the App Store. And… since there are so many devices on the scene, writing the app online is easily portable to other platforms.

    Doug

Leave a Reply