Which mobile strategy should you

select?

eGuide

Responsive Web Design

vs. Mobile Website vs.

Native App

www.usability247.com

Usability247 provides usability

testing, expert review and user

research services when you

need them, 24 hours a day, 7

days a week.

We’re changing the world, one interface at

a time. So that everything is usable, every-

where, for everyone, all the time.

It would be better for consumers and better

for business.

Come and change the world with us.

www.usability247.com

call us on +44(0)8000 246247

email: info@usability247.com

Share this guide

www.usability247.com

Contents

Section 1: Introduction 4

Section 2: Responsive web design 6

Section 3: Dedicated mobile website 12

Section 4: Native App 17

Section 5: The Showdown 21

Section 1

Introduction

www.usability247.com

Responsive Web Design vs Mobile Website vs Native App:

Which is best?

With the value of the app market predicted to reach £17.2 billion before

the end of the year, it's clear the mobile web, whose long-term future was

once considered touch-and-go, is now in for the duration.

While sales of PCs continue to fall, those of smartphones and tablets are in

the ascendency, and showing no signs of stalling.

For your business to survive in a world on the go, you have to be mobile!

But what are the available options to ensure you provide the very best mo-

bile user experience, for both your customers and prospects?

The three alternatives

Organisations have three main options when it comes to establishing a mo-

bile presence. These are:

Responsive Web Design (RWD) – A website that automatically adapts to

the environment in which it is being viewed

Mobile website – A website optimised specifically to suit mobile plat-

forms

Native application – Software (or app) that integrates with a specific

mobile OS

This eGuide aims to give you a comprehensive understanding of each al-

ternative, so that you can choose the option best suited to your business,

and your customers' user experience. Read on, and discover more ...

Section 2

Responsive Web Design

www.usability247.com

Responsive web design (RWD)

In the beginning

It's only over the course of the last six years that catering to the viewing habits of in-

ternet users has become an issue for developers, designers, and businesses. Prior to

then, a website was built to fit a standard screen, via a desktop or notebook, with

interaction pretty much limited to mouse or keyboard input. The mobile web was

little more than an afterthought, its appeal limited.

The arrival of the iPhone in 2007 changed all that, almost single

-handedly kicking off the smartphone revolution as we know it

today. Now, we can access the internet practically anywhere,

with a variety of different sized screens to choose from:

TV

PC/Laptop

Tablet

Mobile phone

And that's where problems arise. User experience of a regular

website, designed for the standard PC screen, suffers when

rendered upon something as small as a smartphone.

"The control which designers know in the print medium [...] is

simply a function of the limitation of the printed page. We

should embrace the fact that the web doesn't have the same

constraints, and design for this flexibility." – John Allsopp, 'A

Dao of Web Design'

www.usability247.com

Consistency across platforms

Responsive Web Design – RWD for short – aims to deliver a single website that is ca-

pable of not only rendering correctly, but also providing a consistent user experi-

ence across the full range of devices and operating systems.

This is achieved by automatically adapting the content, design, navigation, and

method of interaction, to suit the size of the device on which it is served.

The nuts and bolts of Responsive Web Design

How it works

There are three key elements involved in the implementation of a Responsive Web

Design:

Fluid grids

Media queries

Custom grid layouts

Fluid grids

Simply put, fluid grids allow the design of your website to adapt to the user environ-

ment. The page 'flows' in response to the exterior force (screen size) put upon it, like

water adjusting to the container in which it is poured.

Fluid grids deal in proportions, as opposed to rigid, pixel-defined dimensions. This

allows a website to resize its layout to fit smaller – or indeed larger – screens, while

retaining relative spacing.

This prevents the various page elements, ar-

ranged into neat rows and columns, from bump-

ing into each other, or overlapping when the

screen size is reduced. A clean and consistent

layout makes for a more satisfying mobile user

experience.

www.usability247.com

Media queries

The second key element of Responsive

Web Design is the CSS media query. Intro-

duced as part of CSS3, media queries al-

low your website to gather data about

the device being used, enabling it to ap-

ply CSS styles based upon the conditions

that are met.

So, if the user is viewing your website on a

mobile device, such as a smartphone, the media queries will establish this, and

style the design to suit, either from an additional set of rules or dedicated

stylesheet.

Media queries can also ascertain other factors aside from how a website displays,

such as whether a device is touchscreen/swipe operated, or mouse/pointer, so

that when your site is rendered, it is optimised accordingly.

Custom grid layouts

A custom grid layout allows your website to adapt the content for a smaller dis-

play, without the need for a completely new stylesheet.

Although fluid grids resize the page elements to suit the screen, sometimes this isn't

enough. For example, both the visibility and the usability of a three column website

will suffer when rendered upon a mobile phone screen. A customised grid layout

will rearrange content to provide a better fit. This might mean the aforementioned

three column site becoming a single column, without losing any of the information

vital to the user experience, by adding extra rows to accommodate.

www.usability247.com

The Pros and Cons of Responsive Web Design

The pros

A single website – RWD ensures your website is accessible, and providing a con-

sistent user experience, regardless of device or platform

A single URL – Just the one URL for customers to bookmark or remember, wheth-

er they're sat at home, or on the move

SEO-friendly – No fragmentation of content within the search engine result pag-

es. No redirections slowing page load time

Marketing-friendly – A single website to update. A single set of analytics to re-

view. A single marketing strategy to set in place

Cost-efficiency – One-website-fits-all means a lower investment, for both devel-

opment and ongoing maintenance

The cons

Technical issues – As RWD is a relatively new concept in design and develop-

ment, there are invariably issues still to be ironed out. One example is with older

mobile devices, some of which use browsers that don't offer CSS3 capability,

meaning they won't fully support one of RWD's key components – media queries

www.usability247.com

The cons cont’d

User intent – User intent differs from the desktop to the mobile device. As Re-

sponsive Web Design provides what is effectively a streamlined version of the full

website, the architecture will remain pretty much the same throughout – geared

towards the PC user, who is more likely to browse. This may prove a drawback for

the on the go user, who is more likely to visit a website, with a specific purpose in

mind

Compromise – If you have a feature rich website, for the sake of both function-

ality and maintaining a great mobile user experience, an amount of compromise

may be necessary when taking the RWD route

Section 3

The dedicated mobile

website

www.usability247.com

The dedicated mobile website

Before Responsive Web Design came along, the popular choice for organisations

wishing to establish a mobile web presence, was a separate, dedicated website.

Not just a miniaturised version of the main site, shrunk to fit, but a streamlined site,

optimised to render on a smaller screen, as well as meet the mobile user's needs. It

would be hosted on a separate URL – usually a sub-domain of the original, prefixed

with an 'm', eg:

The nuts and bolts of a mobile website

How a mobile optimised website works

A mobile website is usually built from the ground up, specifically to meet the limita-

tions of the mobile phone, and the expectations of its user. The most common

method of navigating to the mobile site is via automatic redirection, so that when

a user visits the normal site on their feature or smartphone, whether directly or via a

search engine, user-agent detection determines the source and delivers the equiv-

alent pages in the mobile format.

Creating better mobile websites

As it has been created exclusively for mobile browsers, user experience is often the

driving force behind a mobile website (the successful ones, anyway). After all, the

on-screen real estate is at a premium, and there's little room for the wastage often

afforded to the desktop version.

Original site: justanotherwebsite.co.uk

Mobile site: m.justanotherwebsite.co.uk

www.usability247.com

For a better understanding of

mobile websites, and how they

differ from the standard option,

it's useful to look at some of the

ways they can be optimised to

improve user experience.

Reduced content

The average user engaging

with the mobile web wants to find the information they're after as quickly as possi-

ble, without obstacles or distractions en route. Therefore, only the necessary con-

tent makes it to the mobile site. This not only provides a fast, user-friendly journey

from point A to B, but keeps confusing navigation to a minimum.

Single column layout

As with Responsive Web Design, which can consolidate to a single column when

rendered upon the smaller screen, the dedicated mobile website user is also better

served by a single column format. Any more adds an extra operation, when the

user has to zoom in to read the on-screen text. As the mobile web is about immedi-

acy, any extra, and ultimately unnecessary operation is best avoided.

Show the user what they want

Calls to action are made prominent and in-line links disposed of, where possible, to

allow for fingers of all sizes, with the minimum of frustration.

www.usability247.com

Minimal text input

As mobile is all about 'on the go', text entry is another operation that often gets in

the way. Not only can it be awkward, whether on a physical or touchscreen key-

board, but also off putting when the user is in a hurry. Mistakes are also more com-

mon than with a desktop, due to the smaller size. Methods to tackle the problem

and minimise text entry include:

Streamlining the registration pro-

cess, ensuring only the bare minimum

of information is required to make a

purchase

Storing user details, so there's no

need to enter them more than once

Using pin numbers, as opposed to

passwords

The Pros and Cons of a dedicated mobile site

The pros

Multiplatform compatibility – As it's accessed through the phone's browser, your

website will be available across all but the most basic of mobile devices

User experience – A website specifically tailored for mobile use will be optimised

to take advantage of both the strengths, and limitations of that platform, creating

a good user experience for your customers

Speed – Your website has been streamlined specifically for the mobile environ-

ment, it'll therefore be fast and easy to use

Cost – Initial development costs of a single mobile site should be reasonable,

particularly if you already have a jump-off point in the shape of an existing website

www.usability247.com

The cons

Multiple URLs – May cause fragmentation, or duplication of content in search

engine results, with a combination of your original and mobile pages getting listed.

This could affect SEO

Time consuming – You will now have more than one website to update and

maintain

Extra websites – Separate sites will be needed if you intend to cater for both

touchscreen and keypad devices

Redirections – Redirecting from your main website to the mobile one increases

page load time, and there's always the possibility of the redirect breaking

Section 4

The native app

www.usability247.com

The native app

In contrast to the previous two options, which are accessed via the internet, the

native app is downloaded and installed on the mobile device. They are native to

that device's OS, so an app designed for the iPhone won't work on an Android

phone. This makes multiple apps (one for each platform) a necessity if you aim to

reach as wide an audience as possible.

Apps provide an opportunity to both increase

brand awareness, and enable the consumer to

perform a specific task without the unnecessary

flab that sometimes comes with a website. This

task could be anything from making a pur-

chase, to increasing productivity, through to

offering relevant information.

The beauty of an app is that it can address a

particular issue affecting the target market, in a

quick and easy way. A native app can also of-

fer full integration with the user's device, taking advantage of its assorted features,

such as the camera, GPS, email, contacts, galleries etc.

The Pros and Cons of the native app

The pros

User experience – Offers your audience a rich user experience, tailored to the

platform they're using

Speed – Apps are fast. As they are launched from the device, they can be ac-

cessed quicker than the web-based alternatives

Offline capability – No internet required to run, once installed. This ensures your

users are getting peak performance at all times, without having to rely on a tem-

peramental connection

www.usability247.com

The pros (cont’d)

Access to features – A native app can leverage a device's features to provide

a more compelling user experience

Visibility – An app installs a launch icon in the application list, providing front of

mind visibility of your brand, on a daily basis

The cons

No multiplatform capability – A native app is just that; native to the platform for

which it has been developed. If you intend cross-platform penetration, you'll need

a separate, recoded app for use on each one

Cost – Native apps require specialist knowledge to develop and test, and can

therefore be costly. Factor in the different versions for each platform, and you are

looking at a sizeable initial investment. And then there's also the secondary costs to

consider, such as further development, and updating each of its variants

A saturated market – You need something

special to stand out in what is an increasingly

crowded space. Estimates put the amount of

apps that are used just once before being de-

leted at between 80 and 90%

Marketing – Search engines don't list apps,

so for you to reach beyond your existing cus-

tomer base, you'll need to actively promote

your app via social media, and various other

marketing channels

www.usability247.com

Mobile browser vs App: user preference by task

80% of the time spent on iOS and Android devices is in an app.

20% is on the mobile web.

73%

63%

60%

46%

39%

35%

31%

27%

37%

40%

54%

61%

65%

69%

0% 10% 20% 30% 40% 50% 60% 70% 80%

SHOPPING

SEARCH

ENTERTAINMENT

MANAGE

INFORM

NAVIGATE

CONNECT

Mobile browser vs App: user preference by task

Mobile app Mobile browser

Section 5

The showdown

www.usability247.com

The showdown: RWD vs. Mobile vs. Native

So which is best for you?

We've found out a little bit about the mobile strategies available to you, and

looked at some of the pros and cons of each.

But how do they weigh up against each other?

RWD v Mobile Site

If your intention is to continually update your mobile website with fresh content,

then Responsive Web Design is the better bet, both time and budget-wise, as you'll

only have the one site to cater to. However, a dedicated site will be far better opti-

mised for mobile user experience, as well as a more affordable option for initial de-

velopment.

RWD v Native App

When it comes to cross-platform capability, Responsive Web Design wins hands

down with a single website that's accessible regardless of device or Operating Sys-

tem. The native app would require multiple versions to suit, and a budget big

enough to enable this. Not that RWD itself is a cheap option. The skills required to

build, or convert to, an RWD website would also require a robust budget.

A responsive website can't compete with the

native app when it comes to user experience

though. The combination of speed, focus,

offline accessibility, and the ability to tap into

a device's own features, makes the app a far

superior option on this count.

www.usability247.com

Mobile site v Native App

Once again, the native app wins on the usability front, although a dedicated mo-

bile website will also be well optimised to provide a great user experience. Howev-

er, the website lacks the in-device functionality that makes the app a richer, and

more compelling experience, which is reflected in the 73% of users who expect

apps to be easier to use.

Nevertheless, when it comes to initial outlay, and simply getting some sort of pres-

ence established, the mobile website is the more cost-efficient of the two.

So which format is best?

Budget and purpose are the key deciders when putting one format up against an-

other. You need a clear vision of what you intend to gain from a move into the mo-

bile market, and how it will help you to achieve your business goals.

Ask yourself what your customers want from their mobile experience. It will, of

course, differ dependent upon industry. Also, does it warrant the expense of a na-

tive app? Lack of search engine visibility means extra costs

for marketing and promotion, adding to what will already

be a substantial financial outlay. With this in mind, it is well

worth remembering the estimate of 80 – 90% of apps that

are used only once, then deleted.

A dedicated mobile website can provide a relatively inex-

pensive gateway into the mobile market, but will, of

course, incur extra time and costs, as you'll be updating

multiple sites (unlike RWD, where there is just the one).

There are also the previously mentioned SEO issues, re-

garding duplicated content, once again a problem not

encountered with a responsive website.

www.usability247.com

Another way to look at it is that websites and apps aren't mutually exclusive. A na-

tive app can complement the mobile website experience (dedicated or RWD), of-

fering a more focused platform upon which to engage with your brand, and

achieve a particular goal.

In conclusion ...

All three have their own advantages and disadvantages. Ultimately, the winner is

the format best suited to your goals, your budget, your organisation, and, ultimate-

ly, your customers.

Ensure you offer the best mobile user experience and multiplatform usability. For

testing and qualified reviews, when you need them most, contact Usability247 to-

day!

Usability247

Siena Court, The Broadway,

Maidenhead

SL6 1NJ

www.usability247.com

Tel:+44(0)8000 246247

Email: info@usability247.com

Share this guide