You don’t need a mobile app to help your audience keep your website top of mind on their smartphone or tablet. Your site visitors can easily save your website as a shortcut on their mobile device, keeping your content as fresh in their minds as their Angry Birds.
The problem is that many of your site visitors may not know how to create a mobile shortcut, so you should offer instructions on how they can. There are any number of ways to do this: You can offer a link to a page with instructions or place a short video on your site showing how they can create a shortcut on their mobile device.
Above is a short video on how to create a mobile shortcut that you are welcome to embed on your own site. (If so, grab the embed code on YouTube.)
I’m sure your next question is going to be: How did you get the mobile devices to use those nifty little shortcut icons to represent your website? And a good question that is!
Creating your own mobile shortcut icons
The first step is to create the icon. Create your icon as a .png file that is at least 128px by 128px (this size will accommodate newer mobile devices, too). Check out the ICONJ iPhone Style Icon Generator if you want a quick solution to creating icons.
Next, name the icon “apple-touch-icon.png” and place the icon file in the root directory of your website.
This is all you need to do to accommodate Apple devices, but you need to add some code to your site to accommodate other devices like Android mobile devices.
Add the following code to the head section of every page you want the icon to represent as a mobile shortcut icon:
<link rel=”apple-touch-icon” href=”/apple-touch-icon.png” />
<link rel=”apple-touch-icon-precomposed” href=”/apple-touch-icon.png” />
Once you add the icon file and code, mobile devices will use your icon as the shortcut icon.
You can take the process a bit further by adding an automation script but I only recommend doing this for full-fledged web apps or fully mobile-optimized sites.
This post is based on the book The Bootstrapper’s Guide to the Mobile Web, which will be released in May 2012, but you can get a review copy from the author today.Deltina Hay, a partner in Socialmedia.biz, is an author and educator who develops online curricula on social media and other Internet marketing topics. She also helps businesses prepare their content for semantic search and big data analysis. Contact her, follow her on Twitter and Google Plus, or leave a comment below.
Great post. Thanks for sharing this info Deltina!
Thank you for this useful post. I have followed all your advice and have uploaded your video here. http://www.bigbeautifulfashions.com/clothing/?p=1… I had previously tried to do this, but with different information. I feel confident now that it has been done right, but just need one of my readers to confirm it, as I don't own a mobile device. Do you know of a way to confirm I have implemented it properly without actually testing it in a mobile device? thanks again.
Bigbeaut Plussize,
I checked your icon on an Apple device and it worked fine. It did not work on my Android device, though. You need to embed the code above into the header area of your site for that to work. Thanks for the embed!