You already have a responsive website.
You already know that busy and successful people get ideas on the go and search Google from their smartphones.
You already have your SEO articles.
You already have your logo.
You already have your mobile icons (if not, I will show you where to get them for free).
You already have your splash screens (if not, I will show you where to get them for free).
You already know that people want to save your page and that repeat buyers want an app.
You already have a web app capable website, but how do you let them know this?
You can do this yourself, from any computer, in about an hour. You can add your logo, if you have one. You simply add some lines to your index page and upload a folder (and icons and splash screens if you don’t already have them) to your website.
There are many reasons why you want to do this.
The world is mobile
You already have a responsive website. Most busy and successful people don’t wait to get to their office, they use their phone. You just need to tell them.
Free and Easy
Most of the steps are easy to do and either Free or Low Cost. You do this once, and your website does it perfectly every time someone visits. You will modify your index page slightly, add some images, and a folder to the base level of your website.
It is Profitable
Your website visitors pay you money. This upgrade brings people back and can help make you more money. The things that get in the way of them giving you money is called ‘friction’. The less friction on your website, the easier and faster they can pay you.
Teach your old website some new tricks. This will surprise and delight your mobile website visitors. They will be impressed, they will save your icon to their home screen. This means they will most likely show it to their friends and come back.
Works with almost any website
It doesn’t matter how you made your website. It works well with any HTML, WordPress, Bootstrap and any website made with other architectures and platforms.
Works with almost any smartphone
This works with any smartphone – iPhone and Android, and maybe even the Windows phone.
Let’s get started!
MAKE A COPY OF YOUR WEBSITE AND/OR INDEX PAGE BEFORE MAKING ANY CHANGES
1. Creating Your Home Screen Icons FREE
This is the first step most people need. Many people have a logo but it’s not recognized as a mobile icon, either because of the name or the size. You can fix this here.
2. Creating Your Web App Splash Screens FREE
This is the second step most people need. This is free and easy. You will need a different sized image for each device. This is where you get them. This website has a free iOS Splash Screen Generator.
3. Get your Add to Home Screen LOW COST
This is the third step that makes this all work. Now that you have all of these things added to your website, you are ready to get the code. This tells your visitors they are using a Web App. Put this snippet on your index page.
This code works right out of the box. You can simply upload this folder to your website. There are also many ways to customize it. You can customize it in any way that pleases you. If you want to customize this code, you can do so. Follow the directions in README.
Upload your icons and Splash screens to your website root and the Add to Homescreen snippet to your index page.
I’m assuming you already have experience with editing your web pages and uploading them. However, if any of this is new to you, here are some resources.
You will be editing the index page of your website. You can do this easily with any text editing tool. If you have edited your website, you probably already have a favorite. I personally like BBEdit for Mac, which has a 30 day free trial, or you can download Text Wrangler or Notepad, which are free. Links are below.
BBEdit is the text editor that I have used for years. You can download BBEdit here.
I personally use BBEdit, but TextWrangler is the free version and it works just fine. You can download TextWrangler here.
For Windows, you can use Notepad. I think it also works with Mac.
Upload your folders and files with FTP and SFTP
If you have a WordPress site you might want to use the Headers and Footers plugin. You can get Headers and Footers here.
You will need to add your icons and splash screens to the root of your website. You will also need to upload the add-to-homescreen folder. This is usually done with FTP (File Transfer Protocol, tho these days it’s sFTP for Secure File Transfer Protocol). These are my recommended FTP clients.
If you don’t have a favorite FTP client, I use CyberDuck. You can download Cyberduck here.
Many people prefer FileZilla. You can download FileZilla here.
You will need icons and meta tags for the mobile devices. If you don’t have much experience with these, you can update yourself here. Here is more information about the Apple meta tags
If you need a logo, here are several sources: