Tips for Getting Your Mobile Site on the Home Screen

Similar to how everyone wanted a company website in 1995, today everybody wants an app. It's the gold rush of the 2010s and it certainly isn't slowing down anytime soon. For online retailers, a mobile app can mean big business. With an app, retailers are only one click away 24 hours a day, seven days a week, 365 days a year. Their ubiquity is awesome, and some may even say a little scary. Apps completely alter the way consumers transact.

For an existing business with an established website (and hopefully a modified mobile-friendly version), the thought of having to build everything from the ground up for a native app seems daunting. A native app build proposal is expensive, resource intensive and time consuming. It's a logistical and technical nightmare for a development team that's already overcommitted, overbudget and backlogged.

And that's just for one native app. If you want to be on iPhone and Android devices, that means two apps. Oh, and we shouldn't discount Windows Phone just yet. So let's add one more to the mix. Suddenly, you've get three massively expensive projects (in terms of both resources and finances), all in order to replace a smaller-scale version of your regular website.

With so much technology and costs being thrown about, it can often come across as an all-or-nothing approach. We build these apps or we sit out the mobile revolution. Thankfully, that's not the case. It's important for retailers to take an incremental approach toward app-centric revenue.

A recent report from Flurry.com, the mothership of mobile app big data, revealed that the average mobile user spends 80 percent of their smartphone time in apps. That's four minutes in apps for every one minute in a web browser!

Why would such a disparity exist?

Also from Flurry, retail apps are the fastest growing "Shopping App" category on smartphones. Between December 2011 and December 2012, time spent shopping on retail apps jumped an astonishing 525 percent.

Even before a user taps an app icon or breaks out mobile Safari, apps already have a powerful advantage over mobile sites — they're on the home screen. The default home for apps on every modern smartphone allows users one-tap access to their chosen destination. Sure, most native browsers are also a tap away, but then a user must overcome their less-than-ideal navigation interfaces. Under these circumstances, who wouldn't choose apps over a mobile web experience seven days a week and twice on Sundays?

So, how do you get on the home screen?

It turns out that getting your mobile site (yes, that's right, your mobile site!) onto the home screen is pretty easy and a perfect first step in your path to mobile app retail paradise. Here's a breakdown of what you'll need to make your mobile site home screen friendly:

• mobile-friendly modified version of your website;
• for each of your targeted mobile operating systems:
  • a professional-looking app icon that's built to the proper dimensions; and
  • one line of HTML code, inserted into your standard header;
• some slick, friendly messaging about how to add your mobile site to their home screen; and
• a small bit a JavaScript (less than 30 lines) to determine what messaging, if any, to display.

What follows is a fast, easy and cost-efficient step-by-step breakdown for how to add a custom iOS icon to a small site built on WordPress — completed in one afternoon and by someone who doesn't build websites for a living.

Step No. 1: Pick your target mobile operating systems. For the purpose of this demonstration, iOS home screens are mentioned. The process for Android and Windows phones are almost identical to this, and any substantial differences are noted.

Step No. 2: Get your app icon. The functionality for bookmarking a website to a phone's home screen is already available. By default, iOS will take a thumbnail of your website in place of an icon. And while your website may be visually striking, a thumbnail of it WILL NOT make a good icon. The goal is for users to feel like they're accessing an app. Apps don't use thumbnails; they have slick, well-designed icons. So, shoot for a great-looking icon that looks like it belongs on the App Store.

This will, no doubt, be the longest part of the implementation process. Go to your art department or your design agency for a top-of-the-line icon. This is a major branding initiative and will probably require lots of stakeholder approvals. The good news is once the icon is approved, we're talking minutes to an hour for implementation.

Each mobile OS has slightly different specifications for icons. All of them take PNG files, but the dimensions can be slightly different. iOS dimensions can run 114 x 114 and 72 x 72. It's best to go with the larger option, which will ensure full icon resolution for all available iOS devices, including the iPad 3's Retina display.

Step No. 3: Update your header. After you've uploaded your icon to your site's content management system, you'll want to add the following line of code in your header:

Just replace the IMAGE URL with a proper link to your icon image.

Step No. 4: Add iOS detection and messaging. Lastly, you'll want to message your targeted mobile customers to encourage them to add your site to their home screen, which will provide a more fulfilling experience. Avoid showcasing this message to everyone, but instead just the mobile customers you're targeting. To do that, you'll need to build in some mobile OS detection into your site's code.

This can be done quite efficiently through JavaScript. For this site, I'm just targeting iPhone customers, so I've added the following JavaScript functions to my code, which I've chosen to send via the alert call.

You can run these checks for pretty much any OS you want. When it comes to displaying the messaging, that can be done via alerts. However, there are more elegant solutions through HTML and CSS.

Once you've completed this final step, your site is ready to be added to home screens throughout your community of customers.

By no means should this be viewed as an end-all, be-all solution to mobile retail. This is just a first step to get into the game without spending a big chuck of change or overburdening your development team.

Jonathan Hunt is an SEO account manager with Performance Media Group, a full-service digital marketing agency.