Directing customers to your business Compass Design logo - directing customers to your business
Menu

Mobile web design: responsive design, mobile site, native app or web app?

The number of solutions available to web designers and developers has grown considerably in recent years. A few years ago, if you wanted a mobile site, you basically had two options – a mobile only site, likely hosted on a subdomain of your desktop site, or a native app, which would probably be just for iPhones.

But now the choices are more varied, it can be harder to decide which approach to take. Some of the possible approaches to a mobile website or app now are:

  1. Separate mobile and desktop sites.
  2. One site but with separate themes, using a CMS such as WordPress.
  3. A single responsive site, using CSS to deliver a different layout and experience depending on screen size.
  4. A responsive site using the Mobile First approach.
  5. A web app, functioning much like an app but built using HTML and hosted like another website rather than being stored on the mobile device.
  6. A native app, which may be for iPhone, Android, Windows Phone, Blackberry, tablets etc. etc.

The pros and cons of each approach

Each of these approaches has its own advantages and disadvantages:

1. Separate mobile and desktop sites

This approach is losing popularity since the advent of responsive web design, but is still used by some large, high-traffic sites such as the BBC. Advantages include the ability to target content and functionality according to device, and the scope to greatly increase performance and speed on mobile devices. Disadvanatges include the need to maintain two sites and the fact that some content may be blocked to mobile users, negatively impacting on their experience of the site.

2. Separate mobile and desktop themes

If your site uses a CMS such as WordPress, its content will be separate from the design, giving you the scope to use different theme depending on the device. A separate mobile theme means you can target content at specific devices and alter the navigation or functionality according to device, without having to maintain the content twice. The downside is having to develop and maintain two themes, as well as having to use a reliable switcher to change the theme depending on device.

3. Responsive web design

This approach is growing fast and is set to do so even more over the next 12 months. The main advantage is the fact that only one site needs to be maintained, with nothing more than CSS tweaks to adjust the mobile site; there’s also the advantage of relative speed and ease of development and the fact that all visitors see all the content. Disadvantages include challenges increasing performance on mobile sites, and the fact that there is less scope for changing the user experience so it’s more suited to the device (although there are some solutions to this – for example by adjusting navigation and interactivity).

4. Mobile First

This is responsive design turned on its head – style the mobile site (or strictly speaking, the small screen site) first, then add styling for progressively larger screen sizes. This way, smaller image files can be served to small screens and then replaced by larger files as the screen size increases. There are downsides in terms of browser support as it requires media queries to be recognised for the desktop version of the site – something older versions of Internet Explorer don’t do. It also assumes that small screen = slow connection, which isn’t necessarily the case.

5. Web apps

I think that this is where the real developments are going to be in the next few years – could it be that web apps will eventually overtake native apps? This approach involves developing a separate, app-like site, making use of the phone’s functionality where possible to deliver a richer experience without having to go down the full app route. The advantages are only having to code once, not having to jump through app store hoops, and not having to wait for the app store process to take place for each update to the app. There are some disadvantages – firstly, people are less aware of web apps over native apps, and secondly it’s much harder to monetize a web app than a native app. In addition, mobile browsers aren’t able to access all of the phone features that a native app can, although this is changing fast.

6. Native apps

A native app is stored locally on the device and needs to be downloaded or bought from an app store – it can vary from a completely self-contained program or game, to little more than a skin on a related website. A native app is best when data needs to be held locally on the users’ device, for example game data which facilitates smooth and fast gameplay. It’s also the easiest way to make money from mobile users – although this is by no means guaranteed! The downsides increase with the growing number of mobile platforms – for a native app to reach the widest possible audience, it needs to be built for each platform and sold via each app store, adding time and administrative headaches.

Deciding which route to take

The mobile approach appropriate for any organisation, app or website will depend on the requirements of the site or app itself, both technically and in terms of the content and business model. Quesitons to ask will include:

  1. Does this app/site need to make money? If so, is that via direct sales of the app or through advertising, subscriptions or another method? The method will influence whether a native app is needed or not.
  2. Does the app need to make use of device functionality that can’t be accessed in the browser? Will data need to be stored locally? If so, a native app may be the best choice.
  3. What is the budget? A native app will cost more to develop and maintain, while a responsive site is probably the quickest and cheapest option.
  4. What will users need to do on this site? Will that change depending on the device? If this is very different from mobile and desktop visitors, a web app or separate mobile site may be more appropriate than a responsive site.
  5. If building an app, will it be using the same data as an existing desktop site? If so, a web app or a responsive site may be a better approach than a brand new native app. Responsive design can be used to build sites that are very app-like in their functionality.
  6. How often will the site or app be updated and what rejoice is available to do this? A responsive site will be quickest to update, while a native app will be slowest.
  7. Does the site include a lot of images, media and other data which will make it too slow for mobiles? A responsive site doesn’t overcome these issues ‘out of the box’ but their are plenty of workarounds.

Summary

As you can see, the choice when developing a mobile site or app isn’t a straightforward one, and there isn’t a one size fits all answer. At Compass Design we are big fans of responsive web design, and make most of our client’s sites responsive at the very least – but that doesn’t mean we will always recommend a responsive approach. We’re currently working on two projects which use separate WordPress themes for mobile and desktop, because this is what works best for those sites.

 

If you’re thinking of developing a mobile or responsive site or a web app, please call Rachel McCollin on 07858378178 or email us to talk over your requirements – we can advise you on which approaches might work best and give you an idea of the effort and cost involved in each.