How to convert your website into a mobile app
When we offer our services to e-commerce businesses that already have mobile websites, we often hear something like this:
— “It’s too expensive for us.”
— “We aren’t ready for this kind of investment.”
— “Call us later, maybe we’ll think about it.”
We wondered why this is and started to look for answers. From what we found, we made a list of the most common reasons why retailers don’t decide on mobile development:
- They don’t have the budget to invest in an expensive mobile app project
- They don’t know how to manage multiple platforms
- They aren’t sure an app will be used by its target audience
All these reasons are pretty understandable, right?
So we started thinking: How can we solve these problems and help e-commerce companies expand their business with m-commerce?
We were thinking and thinking hard. We gathered our best engineers and continued thinking together… until we came up with an idea.
Then we thought about how to make it work, and we came up with a solution that allows companies to get a working mobile app at a minimum price.
I already have a mobile website. Why do I need an app?
1. To access another market at minimum cost
The first thing an application gives you is a presence on a new market, full of users who can become your customers. Mobile apps are completely different from websites, and many people prefer using them for various reasons. When you develop an app, doors open for you. By entering them, you can find additional traffic and conversions.
According to Criteo, by the end of 2015 the mobile share of global ecommerce transactions was over 40%, and it’s only expected to grow in 2018.
Choosing this path is also useful for a startup because it allows them to check whether their idea works.
2. To get new information about your users
Cross-platform technologies in general can provide similar functionality as native ones, and can open doors to big data, which means tons of information about your customers that you can use to deliver your service and target advertisements.
Big data can show you what kind of device your users have, from which you can find out when that device was bought and how much it cost. This gives you extremely valuable information about your user and his or her financial abilities. And this can help with individual targeting.
An authorized user can give you tons of information like geolocation, interests, and needs, which you can then offer to meet with the help of your service.
If you want your business to thrive, you need to inform your customers about your products, delivery details, discounts, and special offers.
If you do notifications using SMS or messengers like Viber, Telegram, or WhatsApp, you know that it’s rather expensive.
Converting a website to a mobile app gives you an immediate perk – push notifications. Push notifications are the best solution for informing your clients. They’re very cheap, fast, and convenient.
Moreover, you can implement rich push notifications that feature media like pictures, GIFs, or even maps and increase the response rate by up to 50%.
Like with any application, you can add functions other than your mobile website provides. For example, you can give your customers the ability to call your company right from your app. This is much better than copy-pasting your number or trying to memorize it.
Another great option that most e-commerce websites and mobile apps are already using is live chat, where customers can ask any questions they want. In a mobile app, live chat is convenient and will definitely be appreciated.
Moreover, you can even add pages with native functions to your mobile app that don’t exist on your regular mobile website. We’ll explain this in more detail a bit later.
Cordova is one cross-platform solution that we don’t usually recommend for our customers. It’s a mobile app development framework that’s able to wrap your mobile website into a mobile app.
Mobindustry is a mobile development company that specializes in native mobile development. Native apps are faster, more consistent, and higher quality. But as there’s nothing perfect in this world, they also have a bad side, and this is their price.
Native development is expensive, and not every company can spend that kind of money on a project they’re not even sure will succeed. We’ve already discussed this in one of our previous articles.
And here’s Cordova – a cheap solution for transforming a website into a mobile app that won’t work as perfectly as a native app but will still open up all the possibilities that a mobile app can offer. That’s something, right?
How to Turn Your Website into an App
Before we explain how to convert a website to a mobile app with the help of Cordova, let’s see how your mobile website operates and compare it to how Cordova works.
What does Cordova do? It basically wraps your existing website into a mobile application. Cordova has a so-called webview component that allows it to show only your website. So when you use Cordova, you don’t have the address bar that you’re used to seeing when you browse a mobile website.
Apart from webview, Cordova also has other features that allow it to use device hardware, for example GPS chips, cameras, accelerometers, and microphones. However, our development team will have to work on these features separately.
How can you turn your website into an app and what is needed to do that?
The transition from web to mobile will require some adaptation of your current mobile website:
1. Remove page reloads
When you browse a regular mobile website, each time you move to another part of the site it loads the whole page again. But cross-platform apps don’t work like that. Every time something changes, the mobile website requests all the information again from the server.
2. Adapt to render engine
Each browser has its own rendering engine. With Google Chrome this engine is called Blink; Mozilla Firefox uses Gecko. What does that mean? It means that depending on the browser you open your website in, it may look a bit different.
Moreover, each device has its default rendering engine – for Samsung it’s the render engine for Internet browser, whereas Apple devices use the Safari’s engine — WebKit.
When we wrap a website into a mobile app, we can’t choose the rendering engine for webview to use – it will always use the default engine for a device.
This is why you’ll need to conduct lots of testing on different mobile devices to make sure your app looks nice and functions properly on all of them. Moreover, if you install a cross-platform mobile app on a device with an old version of Android, there’s a chance it won’t support HTML5 or some local SDK.
In this case, you have two options:
1) Your web developers can adapt the website for older versions of Android.
2) You can determine a minimum version of Android that your app works on and set this in the Play Store. In this case, users of older versions won’t even see your app in search results.
3. Integrate with new analytics
You will need mobile app analytics if you want to convert your mobile website into a mobile app. The analytics that you have now, gather information about your website. With an app, you’ll need to make another branch for analytics so it doesn’t conflict with your website analytics.
Another way to solve this problem is to use an identifier, which will show which traffic comes from the app and which from the website.
4. Implement navigation and UI
Take a look at your mobile website. You probably have a list of products and each product has its own profile with a description, price, and other information. Let’s say you browse your website and end up on one of these product pages.
How do you go back? If you’re an Android user, you can enjoy your back button, but if you have an iOS device, well… you’ll need to use the navigation bar.
In a mobile app there are two ways to solve this problem:
On the website side – you can implement navigation on the website itself.
On the application side – you can implement navigation buttons in the app that wraps the website.
Is there any difference? Yes.
Which way is better then? In short, implementing navigation on the website itself is generally the best option. If navigation is part of the website itself, it will be more consistent and work more smoothly.
5. Provide local memory and cache logic
If you don’t want your app to eat too much data each time it loads, you’ll need to build local memory and cache logic into your mobile application.
6. Provide loading logic
You definitely need to implement a loader! It’s bad practice to make your users wait for a page to load and not show them anything but a white screen. That often happens with mobile websites, but it should never happen in an app. Screen transitions happen pretty often in cross-platform applications, especially if your customers use mobile internet.
Don’t abandon your users during loading. Add some animation to let users know that everything’s fine and that they’ll see the page in a few seconds.
These are pretty much all the steps you need to take to adapt your website so you can make it into an app.
What happens with the original website?
After you work on navigation, analytics, cache logic and all the other stuff we’ve mentioned here, you’ll have two working versions of your website.
Each of them will have an identifier – a simple HTML header in a request that the app sends.
When a user accesses your website from a browser, the server will send the initial version of your website.
If a client uses your app, the server will recognize that and send the adapted version with all the changes and new features.
Website adaptation is not part of actual app development. All these steps need to be performed by web developers before we can begin working on your app in Cordova.
Moreover, all these separate solutions that are used to address the limitations of cross-platform development need constant attention from your web development team.
Imagine that you want to change your menu bar on the website but you already have a navigation button there. In this case, you’ll have to change it not only on the initial version of your website but also in the version adapted for your application – otherwise your app won’t work properly.
All new versions of your website and all new solutions and changes you want to make have to be duplicated and adapted again. So a cross-platform app, like any other application, needs constant attention.
Mobindustry can help you adapt your website to a mobile application.
Once you develop a mobile app, don’t forget to inform your current and potential customers about it. Post a reminder on your website, both mobile and desktop, and share a link to the App Store and Google Play Store so your customers can download it.
A mobile app built with Cordova won’t take too much time and money, but it will let you enter a new market. It will also give you an understanding of the new abilities you have to promote and grow your business.
However, we aren’t going to pretend that you’ll get an amazing, top-notch product when you convert your website into an app. When you’re on your budget, certain sacrifices have to be made. In the case of cross-platform development, this is quality. A cross-platform app won’t be extremely fast, responsive, or, well, native.
Developing (and more importantly supporting) such an application requires very strong discipline. There’s no chance you can leave the app as it is and it will continue working perfectly – you’ll always need to duplicate changes to your website and adjust them for the app’s peculiarities.
All the same, this is a good solution when you don’t want to spend much money on something you aren’t sure of. If you see that people do use your app, however – and if they find it really useful – then we suggest you consider native development in the future.
A native app will let you gain more customer loyalty as you’ll be able to optimize conversions by making the UX much better.
If you’re considering developing an app for your business, don’t hesitate to contact us. We know how to turn a website into a mobile app that suits your needs and budget.