Mobile and Tablet Marketing

Avoid the App Store with Apple iOS Add to Home Screen

I’ll 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: 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 marketing medium businesses must cater to.

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, and 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, and you want to offer them the one-tap quick access behavior. It would be best if you had a pseudo-app.

Add to Home Screen

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

  • A website designed or responsive to 320px wide.
  • This code snippet and images
<title>Add To Home</title>
<link rel="stylesheet" type="text/css" href="../../style/addtohomescreen.css">
<script src="../../src/addtohomescreen.js"></script>
  • An apple-touch icon using the png format

First, what’s all this code doing in principle?

The code in the zipped file above is designed to instruct users on the steps they need to take. It intuitively teaches them the native iPhone functions already available, making 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 icon as a png file (eg. apple-touch-icon.png) and upload it to the root directory of your website and reference it with the appropriate > link > tag in the head. While you can rename and refer to a specific location elsewhere, Safari will automatically look for this file name at the root of your website.
<link rel="apple-touch-icon" href="apple-touch-icon.png">
  1. Place the images found in the zip file into a directory pathed /images/.
  2. Paste the code from the text file found in the zip file just before the closing body tag on your web page(s).

That’s it. If you follow these steps, you should see a prompt 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-tap access like all their other apps.

Now, your web application will be bookmarked 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.

Nick Carter

Nick Carter is truly an entrepreneur at heart. He's passionate about entrepreneurship in general. Nick started and ran 5 businesses in his career. His primary goal is to keep himself entertained with a variety of exciting business opportunities and new adventures.

Related Articles

One Comment

  1. Nick,

    Great post. This is what we did with – 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.


What do you think?

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Adblock Detected

Martech Zone is able to provide you this content at no cost because we monetize our site through ad revenue, affiliate links, and sponsorships. We would appreciate if you would remove your ad blocker as you view our site.