Yalantis: iOS, Android And Web App Development Company

How to Turn a Website Into a Mobile App

Long gone is the time when everybody wanted a website; today everybody wants a mobile app. We receive lots of emails from potential clients asking us to convert their websites to iPhone or Android mobile apps. If you’re thinking about jumping on the mobile path, we can help you do that. In the meantime, let’s look at turning a website into a mobile app from three perspectives: business, user, and platform.

Business - What do you need an app for?

There are a lot of examples of businesses that started as a website and got into mobile a bit later: Dropbox, Airbnb, Google Docs, the Guardian -- the list goes on and on. Why do you think they made this decision? ...Hmm... because mobile devices are rapidly overpopulating the planet! We’ve been hearing this for years, ever since they started shipping Ericsson phones with Symbian OS. But the real reason is not “devices.” The real reason is users. Website, email, SMS, mobile app, kiosk, customer service, phone calls. All these things are simply channels that companies use to interact with customers. Customers don’t think of these as “channels.” But they do care about their experience with a company. If their experience is bad, or is not seamless across platforms, then the customer is likely to go elsewhere.

Developing a cross-channel user experience is the reason why brick-and-mortar companies get first into web, then into mobile and tablet apps.

It’s up to you to decide how exactly you want the cross-channel user experience to be implemented across platforms. You may encapsulate all your website features in a mobile app, or let an app perform a limited number of functions. Sometimes mobile apps may even provide functionality that a website doesn’t. For example, The Officer Down Memorial Page, an app we developed for a non-profit organization that commemorates police officers fallen in the line of duty, includes push notifications, a statistics dashboard, and an interactive map. All these features are missing on the ODMP website. You can read more about this project here.

ODMP app

It doesn’t really matter whether an app is a direct translation of a website or not. What matters is creating a seamless user experience. Every platform or channel has different rules that need to be followed – whether you develop a product from scratch or turn an existing website into an iPhone app. Platform-specific knowledge combined with development experience and business expertise are the three ingredients needed to craft a seamless user experience. Yalantis offers all three.

Even if you already have a responsive website (Wordpress, Joomla, custom-made, hard-coded HTML 5, etc.), we suggest that you forget about it; a native mobile app is an entirely different product. The cost of turning a website into a native app can be rather high given the variety of features that websites typically provide. More to the point, wrapping an entire website into an app is risky because you can’t predict whether users will actually like your finished product.

We prefer starting with an app that does a few things well, then gradually adding more features. The idea of a Minimum Viable Product (MVP) is to quickly develop a functional prototype which includes a minimum number of features – the core functionality - then to launch it on the market and evaluate the concept. MVP is something we believe in strongly at Yalantis. It lets our clients save time and money, and, most importantly, lets clients elaborate on further developments based on what they learn from users. We made a video that explains the MVP concept.

We define the most essential features to be included in an MVP within the first week of work. This is called the project planning stage. This pre-production stage is about getting an understanding of the product, its users, and its key functionality, as well as understanding the technologies needed for its development.

User – How to achieve seamless UX

After we’ve locked down the core concept of an app, we hand the project over to our design and engineering teams. They work together to ensure that design and technology are perfectly tuned.

Native apps have a very distinct look and feel. Therefore, the UX of a mobile app should be completely different from a website’s UX. Keep it simple and intuitive, don’t ignore the platform, provide context, make a good first impression, and pay attention to the brand values. These are some of the fundamental UX design principles that we focus on while ensuring a consistent and beautiful visual language across the product.

From our experience, the biggest challenge for website owners is to switch into a mobile way of thinking. Therefore, we decided to highlight some of the most common user expectations that distinguish mobile from web:

  • Consistency across screen sizes

It’s obviously hard to accommodate the whole website on a small screen. Roughly speaking, 4-5 features on a website will equal 5-10 screens on a mobile device. This is another reason why we suggest picking out only the key features and dumping the rest, at least in an app’s early versions.

If you go to the Officer Down Memorial Page website, for example, you’ll see plenty of functions accessible from the top menu. The mobile apps we developed for the non-profit organization, however, only include a few screens but still manage to deliver value to their users.

  • Simple navigation

Interactions on a website are usually complicated. “Complicated” is absolutely not what you want in a mobile app. When we convert a website into an app, we let the mobile-first philosophy lead the process. In other words, we design each page with a clear orientation and simple navigation so that a user doesn’t feel lost. There is nothing users hate more that wasting their time trying to reach a destination.

  • Instant gratification

With mobile, users expect immediate gratification. In a mobile app, users get in, accomplish something, and get out. If they press a button, they get a reward, so to speak. Instant gratification is the only way to keep users engaged and an app running.

Users become less motivated to use an app as its complication increases. The longer it takes a page to load, the more clicks there are between screens, and the more fields a user needs to fill out, the less motivated a user will become.

For example, the web version of one of our current projects has a pretty sophisticated car search with lots of filters. If we didn’t simplify it for mobile, the user would’ve had to spend a lifetime trying to make use of all of the filters. Instead, we chose only the three most significant – brand, style, and price – thus achieving the slickest possible user experience.

Platform – How to turn a website into an app

Since web and native mobile platforms have very few things in common, the question you should be asking isn’t “how can I convert web to mobile?” but rather “how can I develop a mobile app with the best user experience?”

Read also: How to port your app to another platform

As opposed to websites or mobile web, native apps have a lot of advantages that you can use to take your business to the next level. One of the biggest advantages of mobile apps is the ability to connect to a device’s services and hardware components. We can access address books, pictures, cameras, and microphones. We can also use a device’s compass, accelerometers, gyroscope, and GPS to define location, positioning, motion, and orientation.

A mobile device, unlike the web, is a part of a user’s lifestyle and is designed for frequent use. That’s why data caching and offline capabilities are particularly important. While data caching is a must for any app, accessing an app’s content in offline mode cannot always be possible because it implies storing resources locally and utilizing the computing power and memory of the device. We’re currently working on two apps that allow for accessing their functionality and content offline. One is a mapping application, the other, an app similar to Evernote. In these applications, the content isn’t that resource intensive, so implementing offline capability was quite feasible.

Communication with a database and a server is implemented differently on mobile and web. A mobile app architecture can be two-layered or three-layered. With two layers, a mobile app (the first layer) connects directly to a database (the second layer). In a three-layered scenario, the second layer is a server which handles the connection between a database and an app.

If you already have a server, we can pull the data from your website into an app, but only if the server is optimized for mobile. Sometimes a backend even needs to be developed from scratch (if it’s outdated). A mobile app usually works against a server layer through JSON APIs, while websites typically use HTML format. Certain functionality - like payments, for example - require using a third party service that processes transactions through a server. On the web, payment functionality is implemented differently.

Mobile platforms also offer possibilities for user engagement that websites often do not. These include push notifications, gamification features, and location-based actions, all developed natively. Mobile is also a great avenue for innovation given the speed at which technology is developing. From iBeacons to Apple Pay to Bitcoin and augmented reality, the possibilities mobile platforms are endless.

Read also: Native vs Cross-Platform

We use a variety of tools and methods to streamline the development process and create a solid, quality product in less time. These tools include code reviews, Continuous Integration, unit testing, automatic library updates, and more. You can read more about quality standards at Yalantis by clicking here.


Is Mobile-First Still a Trend? 3 Approaches to Settle on a Platform


Diversification of iOS and Android Platforms


How to Port Your App to Another Platform


How to Adapt Your App's UI and UX to Another Platform


App Development Process at Yalantis

Check out Autoportal case study

Learn how to port online marketplace for cars to iOS and Android

Read the case study