Right now having a mobile friendly version of your business website is key in many markets. The thing is that a mobile app can get extremely costly, and as such many smaller businesses simply cannot justify the cost of one. However there is an alternative that I recently came across. While working on the mobile version of the ONEighty website, I came upon a script made by Matteo Spinelli from http://cubiq.org/. The script places a floating balloon to your mobile website inviting the user to add your app to the home screen. This script is compatible with iPhone4/5/iPod-touch and iPad, iOS >= 3.1.1. I figured this may come in extremely useful to someone else. Throughout this post I will do my best to explain how to utilize this script on your own websites.
Now there are a few things to keep in mind here before you jump into the script. In order for this to work, you need icons that people will click on to access your webpage (from their iPhone home screen…), along with a startup image (splash page) which will appear when the app is first launched. You need these before you implement the script, otherwise it’s not going to work right (at all). So, you’ll need to come up with the following:
- 57 x 57 Icon – This will be used across iPhone 4’s and 5’s.
- 114 x 114 Icon – This will be the High Resolution version displayed on iPhone and iPod Touch devices.
- 72 x 72 Icon – This will be used on iPad devices.
- 320 x 460 Image – This is the startup page.
Here is an example shot of what this looks like on my iPhone 5:
Now, how do we implement these icons into our website? It’s actually pretty simple. All you need to do is specify a few lines of code within the <head></head> section of your website. If you are utilizing a CMS theme, such as a WordPress theme – this area will be within the header.php file of your theme. Static pages are obviously easier, scroll up.
Now take note that I have the icons specified in two different ways, some as simply apple-touch-icon, and some as apple-touch-icon-precomposed. Standard Apple touch icons are rendered with a gloss effect and rounded corners. Precomposed Apple touch icons are rendered with rounded corners, but without a gloss effect. It’s completely up to you which options you choose. As an example, here is what a precomposed icon looks like for the ONEighty website:
Now comes the fun part. Getting your mobile visitors to add your website to their homescreen. Reality is that most people will never add your website to their homescreen. Why? Because quite simply they don’t know to, and they aren’t trained to do that by nature. They need you to tell them to do that. You have to call them to take the certain action that you want them to take, that action being to add your website to their phones home screen. This is where the script made by Matteo Spinelli comes into play. Follow the link, and download the zip file for the script. This will extract into 3 folders, and a readme file. All you really need is the src and style folders. Upload these to the root directory of your website.
Now go back to your websites header, and add the following line of code:
This will give you the following effect when someone visits your website:
Within the main source file you will find a ton of options and settings you can configure to control how and when you want your popup to display. If you want to target returning visitors, or not; and what elements of the browser should be visible when your application is loaded up. By default nothing is visible, allowing you to have the closest look of a real app. Any questions, feel free to leave them in the comments below and I will do my best to help you out.
Fantastic article, I had never even thought of this even though i have been building responsive websites for some time now (mainly using bootstrap). I’m sure this will help boost the visitor count as so many people are using the internet on their mobile devices.
Thank you! It’s a rather simple bit of code – and I can see it getting more and more popular as I start to see it across tons of websites I browse on my iPhone. Glad everyone is making use of it 🙂
Fantastic script here, We will be adding this to our website selling mobile phones. Exactly what we have been looking for and so easy to implement.
Thumbs up for bringing this to my attention, Such a simple way to add great functionality to a website. I will be offering this to all of my web design clients. I have also built this into the core template i have made for wordpress. Such a simple way to drive return visitors.
Wow! I wasn’t aware of the Matteo Spinelli script. That is such an awesome tip. Thank you for sharing!