The Pros and Cons of Responsive Web Design vs. Mobile Website vs. Native App

What is the best way for your business to go mobile?

Mobile optimization is becoming more and more trendy these days and it is no surprise. According to Mashable in August 2013, 17.4 percent of all global web traffic came through mobile devices and this number will continue to grow in 2014. So if you don’t want to lose your piece of the pie, it’s time to step into mobile world.

Hoping that industry giants like Google or Apple will adapt your site for mobile devices is not enough unless you don’t mind losing almost every fifth visitor to your site.

Which of the following mobile optimization methods is the best for your particular business?

  1. Responsive Web Design
  2. Mobile Website
  3. Native App

To answer this question, let’s go through each of them and understand their pros and cons.

Responsive Web Design

Responsive web design allows you to have a single website that automatically fits the screen size of the device on which it is being viewed. This is achieved by adapting the content, design, navigation and method of interaction to deliver the same comfort and usability to the mobile user as to the desktop user.

Are you looking for WordPress Theme?

Get Startup Framework for WordPress now!

This means that you have just one website that looks equally well on all types of devices.

Codrops large

Сodrops large

Codrops medium

Сodrops medium

Codrops small

Сopdrops small

The Pros:

  1. A single website. It’s easier to administer just one website for all devices.
  2. A single URL. This makes sure your users will find you on mobile devices without having to wait for redirects, especially helpful on slower connections.
  3. Easy SEO. There is no need to create specific content for mobile devices, while you still enjoy the benefits of your desktop website SEO on mobile devices.
  4. Easy marketing. No extra work for the marketing department is required to promote your website on mobile.
  5. Low cost. Simple math — one website is cheaper than two.

The Cons:

  1. A single website. Having just one website for all devices may be easy for you, but not always for your users. You will often need to put different emphasis on the same page in order to maximize conversions using the advantages of the platform.
  2. Technical. As responsive web design is a relatively new technology, there are still some outdated devices with old browsers that will load the website too slowly or even not fully.
  3. User Experience. Mobile is a completely different experience than desktop, so having a single, even responsive website, may harm your overall UX on both platforms. If you try to satisfy both mobile and desktop users with the same user interface, you may end up satisfying no one.

Responsive web design can be a very powerful tool in certain situations, but it is not an ultimate solution.

Mashable large

Mashable large

Mashable medium

Mashable medium

Mashable small

Mashable small

Smashing Magazine large

Smashing Magazine large

Smashing Magazine medium

Smashing Magazine medium

Smashing Magazine small

Smashing Magazine small

Mobile Website

A mobile website is designed specifically for mobile devices considering all the limitations and opportunities of the platform. While developing a mobile website you should keep in mind the small screen size, interaction methods (touch) and limited connection speed (2G/3G). Content must be easily accessible, fast-loading and readable. As there are a bunch of mobile devices with different screen sizes and interaction types, it is impossible to create a website per device type. So even your mobile website has to be a little responsive to fit every screen.

There are also a few principles to follow when developing a mobile website, like organizing your content into one column layout for a more ergonomic user interface.

Meetup web

Meetup web

Meetup mobile

Meetup mobile

Meetup app

Meetup app

The Pros:

  1. User experience. Congratulations! You have a website that is specifically optimized for mobile devices, considering all benefits and limitations of the platform, so you have a good ground to create a beautiful and usable UX.
  2. Speed. Your website will load fast and easily on mobile platforms.
  3. Cost. Building a mobile website is not a cheap option as compared to responsive web design, but still you can get a very reasonable price for the value.
  4. Benefit from local search. Search engines tend to provide good UX nearly as much as you do, so in local search results mobile optimized websites have better chances to rank.
  5. Immediately accessible. Though not an extra advantage over responsive websites, but it still plays its role compared to native apps, where users have to pass through download and installation processes.

The Cons:

  1. Multiple URLs. Your customer has to remember at least two URLs, or otherwise be redirected to the mobile website, which takes several seconds. The mobile website will need additional SEO work as well.
  2. Maintenance. You will have to maintain two websites.
  3. Not Universally Compatible. You have to consider that there are two different types of mobile devices: touchscreen and keyboard navigation. A single mobile website won’t look and work the same way across all device types.

Klout web

Klout web

Klout mobile

Klout mobile

Klout app

Klout app

Native App

A native app is a software specifically developed for mobile devices. Native apps are not common among all devices, because they are made for a particular operating system. Users have to download the app mostly from a specific OS store, like Google Play or the Apple Store and install it on the mobile device.

The greatest thing about apps is that they are flexible and let you have not only the same stuff that is on desktop website, but also employ awesome mobile-specific features such as use of camera, click-to-call buttons, GPS data or NFC, contacts or galleries etc.

The Pros:

  1. User experience. Native apps can have better UX than any other mobile optimization solution.
  2. Accessibility and speed. Applications can operate even without internet connection making all your information available at any time. And if you are lucky enough to have an experienced and virtuous coder, your app will also load fast and smoothly!
  3. Everything you can imagine. Here’s where you can and should think out of the box and get creative. Mobile platform, especially with touch screen navigation, gives you mass of features to work with in order to provide excellent UX.
  4. Visibility. Once a user has installed your app on a mobile device, it stays there, showing up with its unique icon in apps menu.

The Cons:

  1. Not accessible on all devices. Your app is built only for a particular operating system and this means it will not operate on devices with different OS.
  2. Goodbye flexibility. All application updates will have to be submitted and approved by the app store every time, which can take up to a few weeks. Not every user will be happy with frequent updates and some will stay with the older version anyway.
  3. It’s quite costly. Native mobile app development is clearly the most expensive solution.
  4. Marketing and SEO. A completely different marketing strategy must be applied for your mobile app promotion and you may need help from a mobile marketing professional.

Shazam app

Shazam app

So which solution is the best for your business?

To answer this question you should consider your business goals. Of course, there is no reason why a business can’t have both a mobile website and native app. Or you may choose to have a responsive website for desktop and tablets, a mobile website for mobile phones and also be presented with a native mobile app in each of the OS app stores. This basically depends on the scale of your business and the budget you are willing to allocate for the project.

If you have frequently updated content, a responsive designed website is to easily update and administer. If your business requires cross-platform operation with flawless UX and excellent performance, native apps beat the competition.

So when making a final decision on which of the mobile optimization methods to choose, keep in mind three keystones: Your business goals, your budget and industry features.

All these solutions can very well work together and complement each other. But one thing is clear: The best solution is the one that works best for your user!

I am a UX consultant from Armenia with a big passion for sleek and usable digital products. You can always get in touch with me @armen_ghazaryan and Google+ and Website.

Newsletter

8 Comments
  1. Gayane Feb 10, 12:49 pm

    Nice comparison and quite good analysis of the mobile optimization options.
    As to me, it’ good to have at least 2 of the mobile solutions, like responsive +app. Of course, depending on your business type and goals.

    Reply
    +8
  2. David East Feb 10, 3:24 pm

    This is why God created Apache Cordova. Well, at least Apache did.

    Going through PhoneGap, Telerik AppBuilder, or whatever cloud building solution can provide extreme flexibility on native and web. The absolute huge benefit being that we can write our native apps in the web languages we know and love.

    Reply
    +11
    • Ivanov Karmazov Feb 10, 5:33 pm

      This, my friend, is why you rock! I had not even heard of Apache Cordova… then again I am a N00b. :)

      Reply
      +2
  3. Mike Donahue Feb 10, 10:16 pm

    Overall I like the post. Fairly well balanced, well stated, and unbiased. That said I have to challenge all 3 cons listed for responsive sites. Talking about responsive without talking about complimentary techniques that exist today to overcome the shortcomings of a purely responsive site (just using fluid grids, flexible images, and media queries) paints an incomplete picture of responsive and sets incorrect expectations and understandings about it.

    Con 1 – “You will often need to put different emphasis on the same page in order to maximize conversions using the advantages of the platform.” For the most part this is not a problem through CSS, client- and server-side adaptation.

    Con 2 – “…there are still some outdated devices with old browsers that will load the website too slowly or even not fully.” This can also be the case for mobile optimized and native apps. A mobile first, progressive enhancement approach to responsive addresses much of this. Mobile first reduces the number override styles needed compared to a desktop-down approach reducing code bloat in CSS. It also forces you to focus what’s most important and prioritize content and features. Progressive enhancement means the user can get to your content even if the site fails to fully load CSS or JS. You’ll likely never get it as fast as an optimized mobile only site, but they can be much better than what’s currently getting done by many.

    Con 3 – “Mobile is a completely different experience than desktop, so having a single, even responsive website, may harm your overall UX on both platforms.” This is a huge assumption to make that is quite simply not always true. Consider the billions of blogs on the web. The user need for a blog is to read the blog post, that doesn’t really change because the platform or device changes. When it is appropriate to build on platform specific features for improved UX progressive enhancement makes it possible without jeopardizing accessibility. A responsive site is capable of delivering exactly the same UX (capabilities) as a mobile optimized site, albeit usually with a performance hit. Only native apps can truly deliver a more rich UX.

    Reply
    +21
    • Jay Feb 12, 9:54 pm

      Mike, you took the words out of my fingers re: UX con. Otherwise, decent article, sans mentioning dedicated mobile as an option any self-serving designer would suggest.

      Reply
      0
  4. vicina Feb 12, 3:17 am

    There is another option between Responsive Web Design and
    Mobile Website. Some web frameworks such as Spring allow you to have different web pages for computer monitor, tablet and mobile device with a same URL. That is quite good option, if no the best one, in terms of user experience and cost/productivity .

    Reply
    +4
  5. Gretchen Feb 15, 6:56 am

    Also have quibble with the two URLs for a mobile site. Not required. What this left out is adaptive/responsive: use responsive for some (where the ux works) and make dedicated versions for specific things (heavy interactions for example) that will benefit for being optimized for a screen size.

    Reply
    +3

Leave a Reply

*
* Minimum length: 20 characters