responsive web design vs. mobile web app what is best for enterprise whitepaper by rapidvalue...

7/29/2019 Responsive Web Design vs. Mobile Web App What is Best for Enterprise Whitepaper by RapidValue Solutions (1)

1/13

Responsive Web Design

vs.

Mobile Web App:Whats Best for Your Enterprise?

RapidValueEnabling Mobil

WhitePaper by RapidValue Solutions Dec 2012


2/13



The continuous evolution of

smart phones, regularrelease of newer mobile OS

versions, availability of a

huge variety of mobile

applications from different

app stores and high speed

internet connections have

completely transformed the

way consumers use their

mobile devices.

The New Design Trend:Build a Website; EnableSelf-optimization Across All Mobile Devices

According to mobile industry reports, 7.12% of all websit

traffic worldwide came from handheld devices in 2011. In

2012, that figure rose to 11.78%.1 According to eMarkete

(a leading digital media market research firm), more than

58% of American adults will be regular mobile web users

by the end of 2016. Tablets and smartphones are becom-

ing the default choice for connecting to the internet. The

web has become an essential part of our lives, and users

are connected to their internet devices from anywhere

and all the time.

This revolution is influencing many companies to shift

towards a Mobile First, Desktop Second strategy fortheir business. However, the shift from desktop to mobile

requires web designers to refocus - not completely away

from desktop design, but certainly with an inclination

towards mobile.

There are several ways to approach a mobile web

presence, such as implementing a separate mobile site or

a mobile web app. The most recent and popular approac

seems to be Responsive Web Design.

This paper explains the difference between Mobile Web

App and Responsive Web Design, and provides a frame-

work for resolving some of the key questions decision

makers have. These include what factors to consider whe

choosing between Responsive Web Design and Mobile

Web App, and what type of industry Responsive Web

Design is most suitable for. The paper examines the pros

and cons of each approach, and presents a sample sce-

nario from the retail industry as well as a case study. As

the paper guides you in how to make the right choice, it

draws upon RapidValues experience helping

enterprises succeed in the complex and evolving mobile

ecosystem.

020202

1 Published by Web designer Depot www.webdesignerdepot.com


3/13



Device-Specific Approach:Mobile Web App

0202

The most common option for companies looking for a

mobile version of their website is to build a mobile site.

This is a separate version of your website that users are

redirected to when they access your website via a mobile

phone or tablet. The main benefit of implementing a

mobile version of a website is that it provides an opti-

mized view across mobiles and tablets.

And what is Mobile Web App? This is an increasingly

popular type of mobile development in which the applica-

tion is built to run over the internet from a central server,

from where it can be accessed by any device with a web

browser. The web technologies used to develop the app

are HTML5, Sencha, jQuery and others. The underlying

technologies are JavaScript, HTML and CSS.

A mobile web app combines the versatility of the web wit

the functionality of touch-enabled devices. Therefore the

application provides the benefits of a regular mobile site,

i.e. it works across browsers and a wide range of devices

It also provides some of the features supported by native

apps rich look and feel, offline browsing, location base

services and video capabilities.

Since mobile web app is web-based, they are compatible

with most key smart phones, making it easy to deliver

your content to a large mobile audience.

When a developer creates a

website, they often design

for large screens and losesight of how it will look when

a user browses the same

website from their mobile

device. When users click

links within the site via their

mobile phones, reading and

navigating become difficult,

requiring zooming andresizing to read or click. This

is when you need to think

developing a device-specific

site.

Java Script

020203


4/13



One Size Fits All:Responsive Web Design

0202

From a technology standpoint, the framework consists of

a combination of flexible grids, flexible layouts, images

and intelligent use of CSS media queries. As the user

switches from one device to another (for example,

desktop to iPhone), the website automatically adapts to

accommodate for resolution, image size and scripting

abilities. This eliminates the need for resizing, panning

and scrolling by the user in order to view the website on

the new device.

The following figure illustrates a retail website

implemented using Responsive Web Design. You can see

the rearrangement of images and text when the user

browses the site from their desktop and then from their

mobile device.

In simple terms, Responsive

Web Design is the

methodology thatrecommends the design and

implementation of a website

that responds to user

behavior and environment

based on the screen size,

orientation and operating

system of their device.

020204


5/13



0202020205 RapidValueEnabling Mobil


0202020205

Responsive Web Design: When Is It Most Appropriate?

Typically, Responsive Web Design is suitable for informational web pages, with information on the right

side of the screen in desktop applications brought to the bottom of the page in mobile applications.

Here are three main scenarios where Responsive Web Design would be

most applicable:1. Corporate Websites/Blog Sites

The website first and mobile second is usually the busi-

ness need. For corporate websites, the need for rich

images is lesser, device-agnostic solutions is higher, and

target audience is a huge factor. And for blog sites, exten

sive user input is not required and images required are

minimal.

For these types of sites, brand consistency is primary.

With one website that works on both desktop and mobile

screens, you will find it much easier to keep a consistent

brand identity. Also, no style guides are required to com-

municate between multiple vendors such as different

entities responsible for the desktop and mobile versions o

your site.

Single code base build once, run across all devices

Renders across any screen size one can view the internet on 20 monitors, 15 laptops, 10

netbooks, 7 tablets, 3 smartphones and every size between. It also considers the huge

difference in widths and heights, whether the screen is landscape or portrait, and screen

resolution.

Improves SEO a single version of the website improves page ranking. Issues have arisen in

which having two versions of a site (website and mobile site) impact page ranking.

Reduces maintenance cost and effort due to single link.

Provides control and flexibility changes can be made at one centralized place. You do not

need to contact multiple vendors to make changes when your mobile site/ mobile application

is built by different development companies.

Some of the advantages of using Responsive Web Design are:


6/13



0202020206

In previous sections, we discussed what Responsive Web

Design is and what kind of websites it is most suitable for. B

like any other technology option, this design approach has it

drawbacks. The top three are described below.

2. Media/News Sites

In these types of sites, users are more accustomed to

scrolling from top to bottom using their mobile.

Responsive Web Design works well here. These sites are

more text-heavy, and sections such as breaking newsrequire real-time content updates which add to mainte-

nance cost if different mobile technology options are used

for the design.

3. Location-based Services

Maps and direction finder services are generally image

heavy. In these types of services, to view the routes

closely and to get better clarity zooming and re-sizing the

screen with fingers become necessary. Auto-adjustment

becomes essential, which is supported in Responsive Web

Design.

Key Challenges in Responsive Web Design


7/13



0202020207

1. User experience not as rich as Mobile Web App

While Responsive Web Design does optimize the user experience across devices, it does not provide a

user experience as rich as the Mobile Web App approach. Responsive Web Design uses a single code

base, but in reality different devices have to be accounted for. While a desktop version can display a lo

of content at once, for smaller screens you need to know exactly what content truly matters. To create

a great experience for all users, you need to consider that people will use different devices in different

circumstances and with different goals. With Responsive Web Design, more effort and time will beinvolved to get the right user experience for your target audience.

2. Navigation enabled from top to bottom, not left to right

Typically, Responsive Web Design supports top to bottom navigation. Content is pushed from top to

bottom when users switch from their desktop to mobile device to access the website. This approach is

useful for informational sites such as corporate sites, blog sites and news sites. However, for many

other industries such as sports, entertainment and retail, mobile users (especially those with touch

screen devices) are comfortable scrolling from left to right, especially when viewing pictures in a carou

sel photo and video gallery. Left to right navigation is supported by Responsive Web Design but

requires some customization in the layout and code, which again leads to more time and effort.

3. Longer development cycle

Designing a website using Responsive Web Design takes longer than building a normal website (a

dynamically generated web page which recalls various bits of information from a database and puts

them together in a pre-defined format to present the reader with a coherent page). If the website isalready built using the normal website approach, rebuilding it using Responsive Web Design in order to

optimize across mobile devices will further add to the complexity.

In addition, prioritizing the content in Responsive Web Design is essential. This is to ensure that import

ant content is not missed when the user switches from a laptop or desktop to a mobile device.

Placement of the navigation menus plays an important role too, especially on more complex desktop

websites with multilayer drop-down menus that have to be adapted for smaller screens. Once a hierar-

chy becomes too complex or different than what you want mobile users to see, the argument forResponsive Web becomes less compelling.

Based on the above factors, if a rich user experience, left to right navigation and faster

implementation time are your primary requirements, you should consider the Mobile Web

App approach.


8/13



0202020208

Versions

Development

Cost

Medium

Responsive Web DesignCriteria Mobile Web App

Two separate versions build one forwebsite and another for mobile

Single version build the website andoptimize across mobile devices

Higher. Cost increases with increase innumber of elements in the website

Implementation

Time

Longer development cycle. Development

complexity increases as the website mapgets more complex

Less time if you know the exact features

you need and you have planned yourroadmap well

Slightly lower user experience sincethe app is designed for a website andoptimized across mobile devices

Navigation enabled from top to

bottom by default. Left to rightnavigation requires additionalcustomization and modification inlayout and code

Lower maintenance cost and effort

Single version to maintain for thewebsite and across a wide range ofmobile devices

Provides control and flexibility tomake changes in website, which arereflected across all mobile devices

Medium

Separate for website version andmobile web app version

Requires changes to be madeseparately in website and mobile webapp versions

Better user experience, specificallydesigned for mobile phone andimproving further with HTML5

technology

Left to right navigation enabled tosupport carousel navigation

Design Approach

User Experience

Performance

Ongoing

Maintenance

Requires specialized knowledge of this

new approach

Potential bandwidth issues when serversends larger media than needed andtext-heavy images

Better, more streamlined performance

Straightforward if you know the exactfeatures and functionality you need inyour mobile solution

Comparison Summary

Due to differences in underlying technology, each approach has inherent advantages and drawbacks,

development frameworks, and appropriate use cases. Careful analysis is required to ensure that your

mobile solution is built using the right approach to meet your requirements. The following table

summarizes the strengths and weakness of each approach.


9/13



0202020209

Rinish Nalini,

Chief Technology Officer, RapidValue Solutions

Responsive Web Design is a great way to give an enterprise a

mobile presence. But it shouldnt be considered the only mobile

approach. Before making a decision, an enterprise should evaluate

both options Responsive Web Design and Mobile Web App, and

select the technology option which best suits your business

requirements.

How to Choose the Right Option for YourBusiness Retail Industry Example

A high quality user experience has always been the primary requirement for consumers, a fact that

mobile service providers now recognize. The mobile service should be simple to use, easy to navigate

and provide seamless transactions, especially when it comes to online shopping.

Retailers can choose either design approach to build a mobile service for their consumer. Your business

requirements will determine the right technology option.

Here is one scenario: you are a retailer and you already have a website. You now need a mobile solu-

tion which has an attractive user interface, can be launched in 6-8 weeks and is cost effective. Before

making a decision, you need to consider a few additional parameters which are important for your reta

mobile service:

The right content must be provided to your

target audience. In order to retain existing

customers and reach a larger audience,

capturing user preferences and providing

content, features and capabilities based on

their requirements should matter the most.

Desktop Website Version with Filters on a Single Page

1. Right Content, Layout andUser Preferences


10/13



0202020210

The mobile web experience is different from the desktop experi-

ence. For retailers, where quality of experience is critical, a sepa-

rate layout and experience for the mobile web is strongly recom-

mended. This is because:

Both of these capabilities are supported in Responsive Web

Design as well as Mobile Web App, but enabling them using the

Responsive Web approach takes more work.

Retail consumers with mobile devices are usually accus-

tomed to scrolling from left to right for viewing the prod-

uct catalog (especially phones with touch screens)

In a desktop website, multiple filters may be present on

single page, but in mobile web, due to lack of real estate

these filters are placed on different pages, accessed

sequentially and hence the same structure may not work

Tablet/Mobile Web Version with Filters Segregated on Different Pages

2. Build and Deploy Mobile Service in an Iterative Fashion

To really be responsive in your design, you as a retailer should build web services/apps based on user

feedback, as this will help create a more optimal user experience over time. Design and developmentshould be combined in an iterative manner to allow retailers to take full advantage of the mobile chan-

nel. Retailers should start with minimal but relevant features in their service/application for their con-

sumers, get their feedback, and respond to that feedback and evolve the service/application over time.

Therefore a long-term service roadmap is essential before you start building your mobile service.

Considering all the above factors, for this type of scenario the Mobile Web App approach

will work best.


11/13



0202020211

Case Study:Mobile Web-Based mCommerce Solution

RapidValue launched a Mobile web-based mCommerce solution for the world's largest online retailer of

street-wear. The solution allows consumers to shop online using their mobile devices.

The client wanted to add a new mobile channel for their consumers. To meet client requirementsRapidValue had to identify the optimum solution (Responsive Web Design vs. Mobile Web App).

The main requirements were a cost effective solution, fast implementation time, ongoing maintenance

and support, and a high-quality user experience.

The client already had an existing website as well as Android and iPhone native applications.


12/13



0202020212

For this client, it was important to select the Mobile Web option instead of Responsive Web Design, for

the following reasons:

RapidValue designed the complete user interface, built the mobile service and deployed the solution, a

within 3 months.

To reach the largest number of consumers while providing service across multiple device types

Native apps are not SEO-friendly

Converting the existing website to Responsive Web would take more time and effort

Conclusion

Responsive Web Design is an emerging trend that involves designing websites and applications for

optimal viewing across multiple devices and screen sizes using a single code base. But will it meet web

application challenges in today's mobile world? The answer depends on what you are trying to achievewith your website or mobile app.

The advantages of Responsive Web Design include a single code base that provides easy and low

maintenance along with a single version of the website that improves SEO. Mobile Web App provides a

better user experience, lower risk of performance issues and faster implementation time for your

mobile service if you know your exact requirements.

The design of your website and mobile service should be based on your target audience. Building a site

using either approach requires thorough planning and a good understanding of the users roadmapthrough the site on every type of device.

Therefore, if you want a solution thats easy to maintain, makes use of existing skills and that you can

control, then Responsive Web Design is the approach for you. If you want a high quality user

experience, better performance, faster implementation and seamless transactions, then you should

select Mobile Web App for your business.


13/13

RapidValueEnabling MobilWhitePaper by RapidValue Solutions Dec 2012

About RapidValue

RapidValue is a leading provider of mobility solutions to enterprises worldwide. Armed with a team

of 150+ experts in mobility consulting and application development, along with experience

delivering over 200 mobility projects, we offer a range of mobility services across industry verticals

RapidValue delivers its services to the worlds top brands and Fortune 1000 companies, and has

offices in the United States and India.

www.rapidvaluesolutions.com www.rapidvaluesolutions.com/blog

+1 877.690.4844 [email protected]

responsive web design vs. mobile web app what is best for enterprise whitepaper by rapidvalue...

Documents