Responsive Web Design Mobile Web App

Responsive Web Design Mobile Web App
Responsive Web Design
vs.
Mobile Web App:
What’s Best for Your Enterprise?
A WhitePaper by RapidValue Solutions
The New Design Trend: Build a Website; Enable
Self-optimization Across All Mobile De vices
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 mobile industry reports, 7.12% of all website
traffic worldwide came from handheld devices in 2011. In
2012, that figure rose to 11.78%.1 According to eMarketer
(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 becoming 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 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 RapidValue’s experience helping
enterprises succeed in the complex and evolving mobile
ecosystem.
1
Published by Web designer Depot – www.webdesignerdepot.com
A WhitePaper by RapidValue Solutions
02
02
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 also 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.
Java Script
A WhitePaper by RapidValue Solutions
03
02
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.
A WhitePaper by RapidValue Solutions
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.
04
02
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:
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.
A Whitepaper by RapidValue Solutions
05
02
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
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.
A Whitepaper by RapidValue Solutions
06
02
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.
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.
A Whitepaper by RapidValue Solutions
07
02
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 another for 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 your
roadmap 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 user experience, specifically
designed for mobile phone and
improving further with HTML5
technology
–
Left to right navigation enabled to
support carousel navigation
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
–
Medium
–
Single version to maintain for the
website and across a wide range of
mobile devices
–
Separate for website version and
mobile web app version
–
Provides control and flexibility to
make changes in website, which are
reflected across all mobile devices
–
Requires changes to be made
separately in website and mobile web
app versions
A Whitepaper by RapidValue Solutions
08
02
“
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.”
Rinish Nalini,
Chief Technology Officer, RapidValue Solutions
How to Choose the Right Option for Your
Business — 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 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.
Desktop Website Version with Filters on a Single Page
A Whitepaper by RapidValue Solutions
09
02
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:
–
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.
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 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.
A Whitepaper by RapidValue Solutions
10
02
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 requirements
RapidValue 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.
A Whitepaper by RapidValue Solutions
11
02
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
RapidValue 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.
A Whitepaper by RapidValue Solutions
12
02
About RapidValue
RapidValue is a leading provider of mobility solutions to enterprises worldwide. Armed with a large
team of experts in mobility consulting and application development, along with experience
delivering global mobility projects, we offer a range of mobility services across industry verticals.
RapidValue delivers its services to the world’s top brands and Fortune 1000 companies, and has
offices in the United States and India.
If you have any questions or need more information about building an integrated mobility
solution,please write to the author Kavyanidhi Narayan, Sr. Manager - Marketing at
[email protected] or give us a call at 877-643-1850. We look forward to
hearing from you!
www.rapidvaluesolutions.com
www.rapidvaluesolutions.com/blog
+1-877-643-1850
[email protected]
A WhitePaper by RapidValue Solutions
RapidValue
Enabling Mobility
Was this manual useful for you? yes no
Thank you for your participation!

* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project

Related manuals

Download PDF

advertisement