Mobile app vs mobile website design: Your four options

Paul Boag

There is a lot of confusion among organisations about how to deal with mobile. However, when it comes down to it you have 4 options.

Do you need an app in the app store? Should that be native or hybrid? What is the difference between a web app and a responsive website? The world of mobile can seem incredibly confusing.

We have posted in the past about your mobile choices and attempted to bring some clarity to your options. However, I thought it might be useful if I demonstrated your choices using 4 examples of work we have done at Headscape. Hopefully seeing real examples will make it clearer what options to use in what circumstances.

The options are:

  • Responsive Website.
  • Native Application.
  • Web Application.
  • Hybrid Application.

Responsive website

A responsive website is one that adapts to whatever device it is being viewed on. Whether that is a desktop computer, tablet or mobile device, the same website will display the same content using a visual design most suited to that device.

It is how Headscape build most of its websites these days.

Take for example Macmillian English. Like most of the sites we work on it is information rich. Users coming to the site are looking to find out information, rather than complete tasks. A responsive website ensures that they can find the same information whatever device they are using.

Macmillian English Responsive website
The Macmillian English website is a typical example of an information rich site that responds to multiple devices.

Responsive websites are good for…

  • Information rich websites.
  • Users that are looking to gather information.

If you are unsure what option you need then a responsive website is normally a good starting point.

Native Apps

Native apps are applications that run physically on the mobile device and are coded specifically for the operating system of that device. These are the applications you typically find in either the Google Play or iOS App Store.

This is the best approach where speed and native features are required.

For example Headscape worked with Buffer to design a proof of concept iPhone application.

The Buffer Native App
Because the Buffer app needed access to device features and had to be lightning fast it made sense for it to be a native application.

Users interact with the Buffer app multiple times a day and need access to native features such as the camera roll. It therefore made sense for this to be a native application.

Web Application

A web application shares characteristics with both a native application and a responsive website.

As with a responsive website a web application is built using HTML, CSS and Javascript and lives entirely online.

However, where a responsive site is content orientated, a web application is task focused in much the same way as a native app.

A case in point is the Blackpool Pleasure Beach mobile app we built. The application is available online but is not a content rich website. Instead it is a booking application that allows users to buy their tickets and passes.

Blackpool Pleasure Beach Booking Application
The Blackpool Pleasure Beach Booking Application was a perfect candidate for being a web based application.

Because it required constant communication with the server, wasn’t used regularly by users and needed no native features, there was no point of making it a native app.

Hybrid Application

A hybrid application is probably the hardest of the options to explain.

A hybrid application is essentially a native application built with HTML, CSS and Javascript. By building it with web technology it is quicker to develop and easier to publish to multiple platforms (e.g. iOS or Android). The downsides are that performance tends not to be as good and they lack the design style of each platform.

Butterfly counting hybrid app
This butterfly counting app is a proof of concept built with HTML, CSS and Javascript, but running as a natively on the device.

An example of this kind of application is a proof of concept butterfly counting app developed by Headscape. This hybrid application was built in PhoneGap and allowed users to identify and count butterflies in the field even with no web connection.

We decided to build this as a hybrid app because it was a proof of concept and we wanted to produce it quickly and for minimal cost.

Which is right for you?

Each of the 4 options discussed in this post have their place. Which is most appropriate will vary based on your particular requirements. However, a good starting point is to ask whether users are primarily completing a task or accessing information.

If it is the latter then responsive is almost certainly the way to go. If it is the former then you need to ask whether speed and access to native features are important.

If that is the case then you will need a native or hybrid application, otherwise a web application would be perfect.

If you are still confused I recommend watching my presentation on the different mobile solutions.

Watch Stop Obsessing Over Mobile Apps

Download this post in printable PDF format