From desktop into mobile

The age of mobile device is dawning on us all: smartphone sales are predicted to more than double PC sales in 2014 (1) and traffic through mobile devices has increased from 2% to 19% in the last 2 years (2). There is a fundamental change in consumer behaviour and more and more of companies realise they need to join in the game if they are to keep the customers happy and keep themselves relevant.

For many, however, this is where the troubles start – there are so many terms knocking around, so many trends, so many options – what do they even mean?

Here is a short explanation of options available:

RESPONSIVE DESIGN:

The latest fad – responsive design – is an idea that a website is made of building blocks – imagine Tetris – and these blocks reshuffle within the layout depending on available space. As a result, the website looks great in various sizes and various devices.

It’s all good except for a few popular misconceptions:

No, you cannot successfully turn an existing website into a responsive website. Of course, there are exceptions, but most of the time responsive website has to be re-designed and re-built from scratch.

No, you cannot just redesign a desktop site and “make it fit with code” to everything else – other sizes need to be specifically defined and considered in design. The average number of screen sizes considered is between 3 (desktop+tablet+mobile)

Purpose: best for informative websites

Performance: dependent on connectivity strength, no offline use

Budget: 4/5

PROs: consistent web presence, ease in maintenance

CONs: takes time and budget, not all browsers support it fully, does not always improve User Experience as the same journeys are simply re-arranged in layout rather than being adapted for mobile context

MOBILE-OPTIMISED WEBSITE:

Is a website that has been re-designed especially for mobile browsers: it can contain all or some of desktop website’s functionality but it’s layout and interactions are streamlined to be more mobile user friendly. Mobile optimised website doesn’t require zooming in, scrolling right or left, all the elements are comfortable sizes for touch interaction and images are optimised for quick loading.

Purpose: informative and task-based websites

Performance: dependent on connectivity strength, no offline use

Budget: 2/5

PROs: improved user experience drivers conversion rate

CONs: depending on level of optimisation it might act as responsive website and simply rearrange the layout rather than address the user experience issues

WEB APP:

Is basically a mobile-optimised website on steroids. It is often designed to look, feel and behave like a native app – use of gestures and interactions commonly seen in native apps is reproduced in a web app with web-based code such as JavaScript or Sencha Touch.

It is possibly the second-best thing after native app, but it’s success is highly dependent on connection strength and browser adoption. Indeed, the HTML-based interactions are getting smoother and more robust, but they are yet to peak and currently are often sluggish and unreliable.

Purpose: informative and task-based websites

Performance: dependent on connectivity strength, no offline use

Budget: 3/5

PROs: improved user experience drivers conversion rate, improved interactions, only needs to be developed once as works on any device

CONs: not yet handled well by all mobile browsers, which could mean very poor performance, dependent on connectivity, no or very limited access to device features

NATIVE APP:

Is an application designed and built to run in a specific Operating System (OS). It provides the best user experience and performance of all the options listed. Native apps provide a very rich and engaging interactions as they can take advantage of latest technologies available on mobile devices such as camera, GPS, media or accelerometer. All this leads to users spending a significantly more time using native apps, these days almost as much as TV in a single day, whereas mobile web use tends to be more of a quick dip in-and-out sort of interaction (3).

Purpose: best for task-based websites

Performance: great, offline use often available

Budget: 5/5

PROs: great speed & performance, storage of information if necessary, offline use, app store approval assures users of quality and safety

CONs: needs to be adapted for different devices, costly,

HYBRID APP:

Are called a hybrid as they are a mix of web app and native app: they are written with web technologies such as JavaScript, which are then enclosed in a native container, which allows them to take advantage of device’s capabilities that are not accessible in web app (camera, local storage, etc). Commonly used tools are PhoneGap and Titanium.

As good as they sound, they nonetheless are limited in user experience and performance in the same way as web apps – could be slow and sluggish, and offer limited interactions.

Purpose: best for task-based websites

Performance: good, offline use often available

Budget: 4/5

PROs: can take advantage of device’s technologies, not as costly as native apps, full or partial offline use

CONs: limited interactions and potential performance issues whilst posing as native app might lead to high customer dissatisfaction as it is often not known by user the app is a “hybrid” and they would expect native’s app performance and user experience


Sources:


(1) “Worldwide Smart Connected Device Shipments, 2010-2016,” IDC

(2) http://econsultancy.com/uk/blog/62222-how-mobile-optimised-sites-drive-conversion-rates-and-aovs

(3) http://blog.flurry.com/bid/92105/Mobile-Apps-We-Interrupt-This-Broadcast