Technology & Digital

Mobile apps vs Responsive web design


The debate of responsive web site vs mobile app has come up repeatedly on some of the projects I am working on. From a project management  experience, these are a few summary items to consider as input into the technical design workshops :

  • Costs:
    • These can vary drastically and in my experience, mobile app development works out far more expensive
  • User experience:
    • Provide the best experience for your user / customer.

      Mark Zuckerberg was once asked — what was the biggest mistake he made while building Facebook.

      Building our mobile experience based on HTML5 instead of native apps. It would have killed us if didn’t realize in time.” — he said.

    • Speed
    • Online/offline capability:
      • for areas that do not have access to high speed data. eg a financial adviser visiting a rural township on the outskirts of Bloemfontein. An app would give you this over a responsive web.
  • 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.


Summary of key differences due to underlying technologies :


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

·         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

Analysis would be required on each based on your requirement to see which solution actually works for you.


Leave a Reply