Convert Responsive Websites Into App

This tutorial will walk you through the steps to convert responsive websites into an app. Using the Phonegap online service, you can use most any live (should be responsive) website URL and create native apps for Android, iOS, Windows Phone plus for Windows 10.

The Phonegap framework by Adobe System does not require knowledge of the mobile programming language. Instead of using complex programming tools, the apps are based on simple languages like HTML, CSS, and JScript. You will need a free Adobe ID. Recommend you go ahead and signup now if you do not have active account. Their free level will get you started:

There are a few more steps to prepare your app before uploading to Phonegap, let’s get started.

Step 1: Download the official “Hello World” project, save and unzip to a working directory:

Step 2: Once unzipped into your project directory, you should see something like this:

Convert Responsive Websites Into App 23

Now is a good time to rename the “www” directory to something meaningful like “myfirstproject” or the name of your responsive website. Totally your choice but recommend not using “www” as you will lose track over time of your projects… For this tutorial we will be using “qikdocs”.

Step 3: We now need to modify the config.xml file

Convert Responsive Websites Into App 23

You can use the built-in Windows notepad but recommend you start using a real:) text editor. If you are going to work on projects like this, Notepad++ will serve you well and is free. Best to use the installer version… Open the config.xml file and you will see this:

Convert Responsive Websites Into App 25

At minimum, we need to modify these lines:

Convert Responsive Websites Into App 26

1) App Name
2) App Description
3) Author URL, email and Name
4) URL to your responsive website online

There are many other things we could change in the config.xml but for this tutorial we are only covering the above (more later). Here is what our modified config.xml looks like AFTER saving (be sure to save yours):

Convert Responsive Websites Into App 27

Step 3: Now we have minimum information in our config.xml file, it is time to ZIP it up for uploading:

Convert Responsive Websites Into App 28

Step 4: Our ZIP is ready to be unloaded to Phonegap for processing. We are assuming you have setup or logged into your Phonegap account… Click on “Apps” and then the button on right, “+new app”. You should see:

Convert Responsive Websites Into App 29

Click on the “Upload a .zip file” button and upload the ZIP we created in Step 3.

Convert Responsive Websites Into App 30

Your ZIP will start uploading (depending on connection speed and server load may take a while) and you should see:

Convert Responsive Websites Into App 31

Click on the “Ready to build” button. This may take a while so sit tight and wait until you see:

Convert Responsive Websites Into App 32

1) Gives info about iOS error
2) Downloads Android APK app file
3) Downloads Window APPX app file
4) Scan the QR code to install on mobile device

When clicking on the iOS (1) you will see a screen like this:

Convert Responsive Websites Into App 33

You now a have working “beta” app for Android, Windows Phone and Windows 10 Desktop. They are not signed and of course not ready for live distribution. You can (and have friends / associates) now test them on your devices.

Be sure to see the “Useful reference” links below for more info… We understand this tutorial will leave many hanging with beat apps. Over the next month we will create follow-up tutorials which should cover more advanced features. There is a ton of information on the internet and on Phonegap if you wish to proceed with advanced features. Stay tuned for follow-up tutorials on this subject:

  • Better understanding of signing your app
  • How to change icons for your app
  • How to disable unneeded plugins
  • and more!

Be SURE to signup for our QikSoft Newsletter so we can alert you to new tutorials as we add them.

Useful reference:

Signing your apps

Installing unknown apps on Android


QikSoft Team

View posts by QikSoft Team
We are a small team of young people learning to program and have fun doing it!
Scroll to top