How to Create a Mobile App from a Website

According to Mary Meeker's 2019 Internet Trends report, mobile internet use was rising while desktop use fell: in 2018, mobile devices took 33% of US consumers' media time and desktops 18%.

So your product has to work well on a phone.

You can convert your own website into an app with a development company, or rebuild its features yourself with an app builder.

An app doesn't replace your website. The two work together, and the app usually takes over part of the website's functionality.

App builders have limits, and for anything beyond basic functionality a professional team is usually the more cost-effective option. Go Wombat has converted websites into apps, and this article covers the reasons to build an app, the choice between native and cross-platform, one of our projects and the steps involved.

Why Do You Need a Mobile App?

The right time depends on your plans; some companies build an app alongside a new website. Either way, first check that there is real demand for it. These are the usual reasons.

Accessibility

In 2020, eMarketer estimated that US adults spent about 88% of their mobile internet time in apps.

Once installed, an app is one tap away on the home screen. Getting people to install it is the hard part, so plan how you will promote it.

SEO

Search engine optimisation (SEO) makes your website more visible on Google and other search engines. An app does not raise your website's ranking: Google indexes and ranks sites by their mobile version (mobile-first indexing), so what counts is how well the site itself works on a phone.

Mobile-Centric User Interface

Not all websites work well on phones. You can redesign the site, but the goal is a smooth user experience that keeps existing users and attracts new ones, and an app designed for mobile from the start is one way to get there.

Integrations

Native and cross-platform apps have wider access to phone features than a website. Progressive web apps (PWAs) narrow the gap: they can be installed, show notifications, work offline and in the background, and share content with other apps. If your product needs device features beyond that, build an app.

Push Notifications

Push notifications keep users informed about updates and bring them back to the product. They only reach users who opt in, and too many messages make people switch them off or delete the app, so set a frequency cap from day one.

Increased Personalisation

An app can remember user preferences and use them to personalise content, services and notifications.

Offline Mode

Apps can keep some features working without a connection. Websites built as progressive web apps with a service worker can do this too, so offline mode alone is not a reason to choose an app over a website. Even an app that needs a connection for full functionality can offer some offline features.

If you need help converting your website, contact us.

Native Or Cross-Platform?

Once you know why you need an app, choose the type: native or cross-platform. Here is how they compare.

Native App

A native app is built for one operating system in its own language: Swift for iOS apps, Kotlin or Java for Android apps. Native apps can use every feature of the device, so they suit products that need the phone's full capabilities.

Pros of Native Apps

High performance, a higher security level, access to all device capabilities and more room for personalisation.

Cons of Native Apps

They cost more: you build and maintain a separate app for each platform, which takes more developer time.

Cross-Platform Apps

Cross-platform apps share one codebase across operating systems, so the same app runs on both Android and iOS. Frameworks differ in how they do it: hybrid apps (Cordova, Ionic) show a web interface inside a WebView, while React Native renders native platform components.

Pros of Cross-Platform Apps

At Go Wombat, we build cross-platform apps with React Native, and we also use it to convert websites into apps. Its main advantages are lower cost (especially for web-to-app conversion) and faster development: developers share code between platforms and release the product sooner.

Cons of Cross-Platform Apps

React Native is a poor fit for demanding apps such as mobile games, and it can be slower than native code. We use it to build stable apps from scratch or from existing websites: one team builds both the iOS and the Android app, and code can be reused between the web, Android and iOS. Meta uses React Native in parts of its own products, including Facebook Marketplace, Ads Manager and Messenger Desktop.

One of our React Native projects was converting a healthcare-related website into an app.

Creating A Mobile App From Existing Website

About The Project

The client, from the well-being and healthcare sector, asked us to turn its existing website into a mobile app. The product asks users a set of questions and uses artificial intelligence to choose music for them. It builds on research into how familiar music affects the brain.

Users hear music they already know and like, which can help bring back memories.

Usage statistics show how often the app is used and which tracks to remove.

The product started as a website, and its owners ran into many browser issues. We suggested building a cross-platform mobile app and a web application.

We built it with React Native.

The first problem was the music player: the React Native player didn't cover all our needs and lacked access to some APIs, so our developers combined a native player with a JavaScript one.

Turning the product into a full music platform was the hardest part. React Native code is JavaScript, while some device features need native code (Swift or Objective-C on iOS), so the app combines both.

We also had to adapt the app to different iOS devices, because it was designed for both tablets and smartphones and behaves differently depending on the model. Our job was to make it work correctly on all of them.

Result

The business logic was not ours to build; our task was to connect the APIs and create the front end and the mobile and web apps. We used React Native libraries such as “react-native-fbsdk-next” for social sign-in, “react-native-async-storage” for on-device data storage and “react-native-music-control” for media controls on the lock screen and in the notification centre (that library has since been archived; its authors recommend react-native-track-player). UI component libraries sped up the interface work.

If you need a team for a similar project, hire Go Wombat.

Steps Required To Convert A Website Into An App

These are the steps we follow with clients; some may change depending on the project.

Make Your Decision

First, decide whether you need an app at all. Look at your website's key metrics, such as the share of mobile traffic, and its goals, and work out what an app would add.

If the site is already mobile-friendly and users aren't asking for an app, it may be better to keep it as a website or turn it into a progressive web app.

Identify The Feature List

Some website features won't be needed in the app. List the features the app must have; our business analysts and project managers can help you put the list together.

Hire A Development Company

You can hire an in-house team that works in your office, or outsource development to a company in another region.

An in-house team gives you full control but costs more: you also pay for equipment, taxes and software licences.

Outsourcing is usually cheaper. A skilled team abroad builds the product while you focus on the rest of the business. You pay for development rather than for equipment, office space or hiring, but check the contract for any other costs.

Go Wombat has been developing software for clients for more than 10 years.

For more on this choice, read our article on outsourcing benefits and risks.

Make An Estimate

Once our project managers have collected the requirements, they prepare a detailed estimate. The final cost depends on the number of features and the complexity of the app.

We recommend a Time and Material contract, because it lets you change requirements and features during development.

Design And App Development

Our UI/UX designers focus on navigation that is easy to learn, because users who find an app awkward tend to delete it.

Then our back-end and front-end developers build the app with React Native and other tools.

Testing

Before release, our Quality Assurance team tests the app and reports bugs for the developers to fix.

After launch, collect user feedback and keep improving the app.

Submission To App Stores

Google Play and Apple's App Store both review each submission before the app goes public, which takes some time. After that, the app needs promotion: plan marketing campaigns that give people a reason to install it.

Go Wombat can convert your website into an Android and iOS app, or build a website or mobile app from scratch.