Why make an app in the first place, I hear you ask? Apps might not be very useful for marketing anymore, but they’re quite convenient for your customers – giving them more of a choice as to how they interact with your site. With the continued rise of mobile internet – more people now access the internet via mobile apps than desktops – apps are blossoming, as most are nowhere near as awkward or problematic as mobile web browsers.
The cost and frustration involved in building one has gone far down, too. In the old days, a lot of businesses were interested in apps, but most weren’t able to build them because it was simply too difficult. But thankfully, things are different now. You no longer need much money or coding knowledge to build a competent app. Let’s explore them, shall we?
A Note on Free App Builders
The result won’t be anything too fancy. In fact, all this method really does is disguise your homepage as an app. When the viewer taps the icon, they’ll just be taken to the same mobile website they’d see if they were to access it via their phone’s browser. So, in order for this method to be effective, you have to have an existing site that’s optimized for mobile viewing. That’s why our first step is to…
Make Sure Your WordPress Site Has a Mobile Version
If your WordPress site isn’t optimized for mobile devices, there’s really no point in this. So optimize it. There are plenty of plugins that can do it for you.
WPtouch and iThemes Mobile will both let you create simple but effective mobile themes based on your current site design. The administration panel lets you customize most aspects of their appearance without having to mess with the code.
Any Mobile Theme Switcher is a basic plugin that will detect the device your viewer is using and display a specific theme for that device. So if you want to balance multiple themes – one for each mobile OS – you can do it that way.
Finally, there’s the WordPress Mobile Pack, which offers a host of cross-platform mobile web applications, UI and theming options, and easy integration with Google Analytics.
Using PhoneGap Build to Create an App
Before you start, know that it’s easiest to test mobile apps on an Android device. So, if you don’t already have one, buy one, dig up an old one or borrow one from an unusually patient friend. Next, create a PhoneGap Builder account. PGB has a free plan that allows for a single private app or unlimited OpenSource apps. So, if you’re only making one, this is all you’ll need.
2. Create the App Files
Your root directory needs to contain an index.html, a config.xml, a couple of default icon files in png format and a res directory with OS-specific icons for home screens and splash pages. Next, you’ll need to make the icons. You can use any image processing or vector program for this, as long as the result is a .jpg, .png, or .psd larger than 1000×1000 pixels.
The App Icon Template, a package of textures, gradients and Photoshop actions made for this specific purpose, is a great tool to help you achieve a professional look. If you need a central graphic, IcoMoon has an excellent collection of logos, many of them free. After that, there are plenty of websites and apps you can feed it to that will transform it into a usable icon. Here are a few:
- The iOS and Android App Icon Size Generator
- Make App Icon
- App Icon Generator
- Icon Maker by IconsFlow
3. Configure the App
The config.xml controls most of the app’s functions. It works across all platforms, so you don’t have to worry about modifying it for any specific OS. For your app, you’ll be changing the widget@id, name, description, author, content@src and access@origin listings. A much more thorough guide than I can provide through this article can be found here.
4. The Actual Build
Go to the PhoneGap Builder website and sign in. You’ll be presented with the empty apps screen. If you’ve signed in through GitHub, all your repositories will be available in the find existing repo. If you signed in via Adobe, and have the zip file on your hard drive, then you know what to do: upload it via the button to the right. The program will analyze your data and present you with a screen showing the details of your app-to-be. All you have to do from there is click ready to build, and it’ll get to work.
An important note: PhoneGap Builder can only work with iOS if you’ve joined the iOS Developer program. This costs $99 a year. With the program’s software, you can actually build the app there yourself, but the reason we’re using PhoneGap is so we can save time by doing all three at once – negating the need to do any separately. So yes, you’re paying for a bunch of services you have no intention on using, but if you want your app on any iProducts, they kind of have you over a barrel here.
Anyway, your app should be done by now, so you can test it by clicking the Android icon to download it to your device. Or, you can navigate to the app’s public page on an Android device and download it from there, then install it from your downloads file. If the app’s icon doesn’t show up, you’ve probably got the URL wrong in the config.xml file. Fix it, re-upload and rebuild.
If everything’s OK though, test the app, play around with it and put it through its paces. You shouldn’t have to spend too long on this because, after all, it is your own website. But if something’s gone wrong and you need to rebuild it, then update the files in your GitHub repo, go to the app page in PhoneGap Builder and click on update code. If this doesn’t work, try rebuild all.
Alternative App Builders
In addition to iOS’s tools, there are plenty of other app-building services and plugins you can use, many of which will also build, at least, an Android app at no cost.
AppPresser is the biggest, the most popular and supposedly the first mobile app Framework for WordPress. It offers full integration: where most app builders only use a feed from your WordPress site, AppPresser lets you use all your plugins, posts and pages. In addition, it automatically updates the app as soon as you make any edits to your site. It features full support for e-commerce, too.
WP Webapp is a WordPress plugin that does roughly the same thing as the PhoneGap method above, but easier, with some extra bells and whistles. You don’t have to go through the trouble of messing around with your folders or editing the config file. There are two other levels, Pro and Enterprise, that offer things like one-click install, splash screens and installation for up to 25 websites.
Finally, there are a bunch of people you can pay to do it for you. However, when there are so many easy and cheap ways to DIY, you don’t really need to go to them for a basic app.
There are a ton of ways to build an app, and although it seems intimidating at first glance, the above methods make it incredibly simple. Just make sure you have a good mobile website to start with, okay? Now let me have it. Did I get anything wrong here? Are there any other methods I should know about? Feel free to leave your feedback below!