1. The continuous evolution of smart phones, regular release 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.
According to report by Cisco, global mobile devices and connections in 2014 grew to 7.4 billion, up from 6.9 billion in
2013. The vast majority of mobile data traffic (97%) will originate from the smart devices. By 2019, there will be 8.2 billion
handheld or personal mobile-ready devices. Along with global mobile data traffic will increase nearly tenfold between 2014
and 2019.
This revolution is influencing many companies to shift towards a “Mobile First, Desktop Second” strategy for their
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 approach seems to be Responsive Web Design.
This paper explains the difference between Mobile Web App and Responsive Web Design, and provides a framework for
resolving some of the key questions decision makers have. These include what factors to consider when 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 scenario 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 Implementation
UX’s experience helping enterprises succeed in the complex and evolving mobile ecosystem.
Device-Specific Approach: Mobile Web App
When a developer creates a website, they often design for large screens and lose sight 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 and resizing to read or click. This is when you need to think developing a
device-specific site.
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 optimized view across mobiles and
tablets.
And what is Mobile Web App? This is an increasingly popular type of mobile development in which the application 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 with 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 als o
provides some of the features supported by native apps — rich look and feel, offline browsing, location based 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.
One Size Fits All: Responsive Web Design
In simple terms, Responsive Web Design is the methodology that recommends 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.

2. 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.
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.
Some of the advantages of using Responsive Web Design are:
 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.
Here are three main scenarios where Responsive Web Design would be most applicable:

3. 1. Corporate Websites/Blog Sites
The website first and mobile second is usually the business 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, extensive 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 communicate between
multiple vendors such as different entities responsible for the desktop and mobile versions of your site.
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 news require real-time content
updates which add to maintenance cost if different mobile technology options are used for the design.
3. Location-based Services

4. 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
In previous sections, we discussed what Responsive Web Design is and what kind of websites it is most suitable for. But
like any other technology option, this design approach has its drawbacks. The top three are described below.
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 lot 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 be involved 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 carousel 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 is already 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 important 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 hierarchy becomes too complex or
different than what you want mobile users to see, the argument for Responsive Web becomes less compelling.

5. 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.
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.
Criteria Responsive Web Design Mobile Web App
Versions Single version – build the website and
optimize across mobile devices
Two separate versions – build one
for website and anotherfor mobile
Development
Cost
Higher. Cost increases with increase in
number of elements in the website
Medium
Implementation
Time
Longer development cycle. Development
complexity increases as the website map
gets more complex
Less time if you know the exact
features you need and you have
planned yourroadmap well
Design
Approach
Requires specialized knowledge of this
new approach
Straightforward if you know the
exact features and functionality you
need in your mobile solution
User Experience  Slightly lower user experience since
the app is designed for a website and
optimized across mobile devices
 Navigation enabled from top to bottom
by default. Left to right navigation
requires additional customization and
modification in layout and code
 Better userexperience,
specifically designed for mobile
phone and improving further with
HTML5 technology
 Left to right navigation enabled
to support carouselnavigation
Performance Potential bandwidth issues when server
sends larger media than needed and text-
heavy images
Better, more streamlined
performance
Ongoing
Maintenance
 Lower maintenance cost and effort
 Single version to maintain for the
website and across a wide range of
mobile devices
 Provides control and flexibility to
make changes in website, which are
reflected across all mobile devices
 Medium
 Separate for website version and
mobile web app version
 Requires changes to be made
separately in website and mobile
web app versions
Responsive Web Design is a great way to give an enterprise a mobile presence. But it shouldn’t 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.”
Pamela Ireri, , Implementation UX Solutions
How to Choose the Right Option for Your Business — Retail Industry Example

6. 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 solution 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 retail mobile service:
1. Right Content, Layout and User Preferences
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.
The mobile web experience is different from the desktop experience. For retailers, where quality of experience is critical, a
separate layout and experience for the mobile web is strongly recommended. This is because:

7.  Retail consumers with mobile devices are usually accustomed to scrolling from left to right for viewing the product catalog
(especially phones with touch screens)
 In a desktop website, multiple filters may be present on a 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
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.
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 development should be combined in an iterative
manner to allow retailers to take full advantage of the mobile channel. Retailers should start with minimal but relevant
features in their service/application for their consumers, 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.
Case Study: Mobile Web-Based mCommerce Solution
Implementation UX 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.

8. The client wanted to add a new mobile channel for their consumers. To meet client requirements Implementation UX 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.
For this client, it was important to select the Mobile Web option instead of Responsive Web Design, for the following
reasons:
 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
Implementation UX designed the complete user interface, built the mobile service and deployed the solution, all within 3½
months.
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 achieve with 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 user’s roadmap through the site on every type of
device.
Therefore, if you want a solution that’s 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.