Responsive Web Design vs. Mobile Web App:  What is best for Enterprise - Whitepaper  by RapidValue Solutions
Upcoming SlideShare
Loading in...5
×
 

Responsive Web Design vs. Mobile Web App: What is best for Enterprise - Whitepaper by RapidValue Solutions

on

  • 1,805 views

The continuous evolution of smart phones, regular release of newer mobile OS versions, availability of a huge variety of mobile ...

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

Statistics

Views

Total Views
1,805
Views on SlideShare
1,805
Embed Views
0

Actions

Likes
2
Downloads
66
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive Web Design vs. Mobile Web App:  What is best for Enterprise - Whitepaper  by RapidValue Solutions Responsive Web Design vs. Mobile Web App: What is best for Enterprise - Whitepaper by RapidValue Solutions Document Transcript

  • Responsive Web Design vs. Mobile Web App: What’s Best for Your Enterprise?WhitePaper by RapidValue Solutions – Dec 2012 RapidValue Enabling Mobility
  • The New Design Trend: Build a Website; EnableSelf-optimization Across All Mobile Devices According to mobile industry reports, 7.12% of all website traffic worldwide came from handheld devices in 2011. InThe continuous evolution of 2012, that figure rose to 11.78%.1 According to eMarketersmart phones, regular (a leading digital media market research firm), more thanrelease of newer mobile OS 58% of American adults will be regular mobile web usersversions, availability of a by the end of 2016. Tablets and smartphones are becom- ing the default choice for connecting to the internet. Thehuge variety of mobile web has become an essential part of our lives, and usersapplications from different are connected to their internet devices from anywhereapp stores and high speed and all the time.internet connections have This revolution is influencing many companies to shiftcompletely transformed the towards a “Mobile First, Desktop Second” strategy forway consumers use their their business. However, the shift from desktop to mobilemobile devices. 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 frame- work 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 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 RapidValue’s experience helping enterprises succeed in the complex and evolving mobile ecosystem. 1 Published by Web designer Depot – www.webdesignerdepot.comWhitePaper by RapidValue Solutions – Dec 2012 02 02 RapidValue Enabling Mobility
  • Device-Specific Approach: Mobile Web App The most common option for companies looking for a mobile version of their website is to build a mobile site.When a developer creates a This is a separate version of your website that users arewebsite, they often design redirected to when they access your website via a mobilefor large screens and lose phone or tablet. The main benefit of implementing a mobile version of a website is that it provides an opti-sight of how it will look when mized view across mobiles and tablets.a user browses the samewebsite from their mobile And what is Mobile Web App? This is an increasinglydevice. When users click popular type of mobile development in which the applica-links within the site via their tion is built to run over the internet from a central server,mobile phones, reading and from where it can be accessed by any device with a web browser. The web technologies used to develop the appnavigating become difficult, are HTML5, Sencha, jQuery and others. The underlyingrequiring zooming and technologies are JavaScript, HTML and CSS.resizing to read or click. Thisis when you need to think A mobile web app combines the versatility of the web withdeveloping a device-specific the functionality of touch-enabled devices. Therefore thesite. 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 ScriptWhitePaper by RapidValue Solutions – Dec 2012 03 02 RapidValue Enabling Mobility
  • One Size Fits All: Responsive Web Design From a technology standpoint, the framework consists of a combination of flexible grids, flexible layouts, imagesIn simple terms, Responsive and intelligent use of CSS media queries. As the userWeb Design is the switches from one device to another (for example,methodology that desktop to iPhone), the website automatically adapts to accommodate for resolution, image size and scriptingrecommends the design and abilities. This eliminates the need for resizing, panningimplementation of a website and scrolling by the user in order to view the website onthat responds to user the new device.behavior and environmentbased on the screen size, The following figure illustrates a retail websiteorientation and operating implemented using Responsive Web Design. You can see the rearrangement of images and text when the usersystem of their device. browses the site from their desktop and then from their mobile device.WhitePaper by RapidValue Solutions – Dec 2012 04 02 RapidValue Enabling Mobility
  • Responsive Web Design: When Is It Most Appropriate?Typically, Responsive Web Design is suitable for informational web pages, with information on the rightside 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 bemost 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 of your site.WhitePaper by RapidValue Solutions – Dec 2012 05 02 RapidValue Enabling Mobility
  • 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 mainte- nance cost if different mobile technology options are used for the design.3. Location-based ServicesMaps and direction finder services are generally imageheavy. In these types of services, to view the routesclosely and to get better clarity zooming and re-sizing thescreen with fingers become necessary. Auto-adjustmentbecomes essential, which is supported in Responsive WebDesign.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.WhitePaper by RapidValue Solutions – Dec 2012 06 02 RapidValue Enabling Mobility
  • 1. User experience not as rich as Mobile Web AppWhile Responsive Web Design does optimize the user experience across devices, it does not provide auser experience as rich as the Mobile Web App approach. Responsive Web Design uses a single codebase, but in reality different devices have to be accounted for. While a desktop version can display a lotof content at once, for smaller screens you need to know exactly what content truly matters. To createa great experience for all users, you need to consider that people will use different devices in differentcircumstances 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 rightTypically, Responsive Web Design supports top to bottom navigation. Content is pushed from top tobottom when users switch from their desktop to mobile device to access the website. This approach isuseful for informational sites such as corporate sites, blog sites and news sites. However, for manyother industries such as sports, entertainment and retail, mobile users (especially those with touchscreen 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 butrequires some customization in the layout and code, which again leads to more time and effort.3. Longer development cycleDesigning a website using Responsive Web Design takes longer than building a normal website (adynamically generated web page which recalls various bits of information from a database and putsthem 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 tooptimize 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 desktopwebsites 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 fasterimplementation time are your primary requirements, you should consider the Mobile WebApp approach.WhitePaper by RapidValue Solutions – Dec 2012 07 02 RapidValue Enabling Mobility
  • Comparison SummaryDue 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 yourmobile solution is built using the right approach to meet your requirements. The following tablesummarizes the strengths and weakness of each approach.Criteria Responsive Web Design Mobile Web AppVersions Single version – build the website and Two separate versions – build one for optimize across mobile devices website and another for mobileDevelopment Higher. Cost increases with increase in MediumCost number of elements in the websiteImplementation Longer development cycle. Development Less time if you know the exact featuresTime complexity increases as the website map you need and you have planned your gets more complex roadmap wellDesign Approach Requires specialized knowledge of this Straightforward if you know the exact new approach features and functionality you need in your mobile solutionUser Experience – Slightly lower user experience since – Better user experience, specifically the app is designed for a website and designed for mobile phone and optimized across mobile devices improving further with HTML5 technology – Navigation enabled from top to bottom by default. Left to right – Left to right navigation enabled to navigation requires additional support carousel navigation customization and modification in layout and codePerformance Potential bandwidth issues when server Better, more streamlined performance sends larger media than needed and text-heavy imagesOngoing – Lower maintenance cost and effort – MediumMaintenance – Single version to maintain for the – Separate for website version and website and across a wide range of mobile web app version mobile devices – Requires changes to be made – Provides control and flexibility to separately in website and mobile web make changes in website, which are app versions reflected across all mobile devicesWhitePaper by RapidValue Solutions – Dec 2012 08 02 RapidValueEnabling Mobility
  • “ 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 SolutionsHow to Choose the Right Option for YourBusiness — Retail Industry ExampleA high quality user experience has always been the primary requirement for consumers, a fact thatmobile service providers now recognize. The mobile service should be simple to use, easy to navigateand 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 businessrequirements 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. Beforemaking a decision, you need to consider a few additional parameters which are important for your retailmobile 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 PageWhitePaper by RapidValue Solutions – Dec 2012 09 02 RapidValue Enabling Mobility
  • 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: – 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 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 Pages2. Build and Deploy Mobile Service in an Iterative FashionTo really be responsive in your design, you as a retailer should build web services/apps based on userfeedback, 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 approachwill work best.WhitePaper by RapidValue Solutions – Dec 2012 10 02 RapidValue Enabling Mobility
  • Case Study: Mobile Web-Based mCommerce SolutionRapidValue launched a Mobile web-based mCommerce solution for the worlds largest online retailer ofstreet-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 maintenanceand support, and a high-quality user experience.The client already had an existing website as well as Android and iPhone native applications.WhitePaper by RapidValue Solutions – Dec 2012 11 02 RapidValue Enabling Mobility
  • For this client, it was important to select the Mobile Web option instead of Responsive Web Design, forthe 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 effortRapidValue designed the complete user interface, built the mobile service and deployed the solution, allwithin 3½ months.ConclusionResponsive Web Design is an emerging trend that involves designing websites and applications foroptimal viewing across multiple devices and screen sizes using a single code base. But will it meet webapplication challenges in todays 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 lowmaintenance along with a single version of the website that improves SEO. Mobile Web App provides abetter user experience, lower risk of performance issues and faster implementation time for yourmobile service if you know your exact requirements.The design of your website and mobile service should be based on your target audience. Building a siteusing either approach requires thorough planning and a good understanding of the user’s roadmapthrough 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 cancontrol, then Responsive Web Design is the approach for you. If you want a high quality userexperience, better performance, faster implementation and seamless transactions, then you shouldselect Mobile Web App for your business.WhitePaper by RapidValue Solutions – Dec 2012 12 02 RapidValue Enabling Mobility
  • About RapidValueRapidValue is a leading provider of mobility solutions to enterprises worldwide. Armed with a teamof 150+ experts in mobility consulting and application development, along with experiencedelivering over 200 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 hasoffices in the United States and India. www.rapidvaluesolutions.com www.rapidvaluesolutions.com/blog +1 877.690.4844 contactus@rapidvaluesolutions.comWhitePaper by RapidValue Solutions– Dec 2012 RapidValue Enabling Mobility