Fast-growing mobile traffic is forcing most websites to refresh their mobile versions that are focused on high-end touch-screen iPhone and Android phones  and move away from the mobile themes that were built for screens of dying Nokia and Blackberry phones. There are two major approaches:

• Responsive Web Design (RWD)
• Separate HTML5/JS app (mobile web app, running on m. domain)

Let’s see what the advantages and disadvantages are for each approach. I did quite a bit of research around RWD over the last couple of months, talked to ton of people from the industry, developers, web designers and what I found was very interesting. It turned out that there is no clear winner and that it really depends on the circumstances. Some are very excited about RWD as a “one shot to kill them all” solution and will go through the effort of redesigning website with new approach, but a the same time others are concerned with the costs of redesigning a site and also see an advantage in a separate mobile solution as a way to provide different, more tailored experience on mobile/touch screens.

Quick note, before we move on. Responsive Web Design (RWD) is the phrase that is used to describe the approach of making a site look great on multiple screens – but at its core both approaches actually use responsive design techniques. HTML5/JS app will for example use it to adapt UI to different Android devices, iPhone4/iPhone5 screens or to rotate between landscape and portrait.

What are the fundamental differences?

RWD approach of redesigning your web from scratch is picking quite some buzz lately and due to fact that it is pretty much standard HTML/CSS technology, which is widely adopted and easy-to-master technology, it is gaining popularity among web developers? At the same time some are betting on HTML5/JS technology with hope that it soon should be able to provide an experience almost identical to that of a native app.  It requires little bit deeper knowledge of client side programming in frameworks like Sencha or JQuery and is more popular amongst native app developers that are looking for cross-platform solutions.

To understand the benefits and drawback of both, we need to understand the fundamental architectural differences for each technology.

As you can see right from the picture away biggest drawback of RWD is that it sends more data to the device than it ideally should. Biggest drawback of HTML5/JS app is that it needs a powerful device that can run Javascript code effectively. But there are some big advantages of each approach, too.

How RWD works

RWD technology is identical to technology that is used all over the web with difference being of requiring a little more effort in writing CSS and using responsive HTML layouts. By simplifying the website layout and using smarter CSS it is possible to dynamically adapt the page layout to different screen sizes. Most of the work is done with CSS, everything else is the same old web technology that we are already familiar with. When the user clicks a link to a new page or hits the back button, the browser will load the new HTML page from the server. In most cases the browser does not save any context or data locally between requests. It is possible to improve experience even further by adding snippets of Javascript for popup menus, photo galeries or similar more used elements in order to improve UX.

Advantages of RWD:

• Single website version to maintain. This is most likely the biggest advantage of this approach. Once redesigned there is only one version of the website that you have to maintain.
• Simple technology. RWD can be done by most web programmers, requiring just a little better CSS coding skills.

Disadvantages of RWD:

• Requires a redesign of your website. In order to implement RWD on a website we have to use a simple adaptive website layout and that usually requires going trough major redesign of existing web site.
• Full page load and larger amount of data through slow mobile networks. The amount of data exchanged between the client and server in each page load request is much greater for RWD than one of a native app and than inevitably slows down the performances and downgrades user experience when compared to a native app which app-spoiled mobile users might do.

Example:

Great example is TheNextWeb.com website. By using a simplified site structure they easily adapt the site to multiple screen sizes. I guess for them it was an easy decision to go with complete redesign of the site from scratch and showcase the latest technology since it looks like tech blogs are anyway going trough design quite frequently.

Currently RWD seems like a great quick fix for the problem of different screen sizes and is definitely a big step forward from the lousy mobile themes that we have had for the last few years. The question is if  fast growing mobile traffic will force us to further improve UX on touch screens and if that is only achievable by using more touch screen specific Javascript libraries on clients and basically again end up with almost separate HTML5/JS mobile app. Where is the border?

How HTML5/JS app work?

So let’s take a look at the alternative. HTML5/JS app will usually run on m.yourdomain.com or touch.yourdomain.com. In general client/server architecture level HTML5/JS app is no different from native iOS or Android app. Most of the native apps that run on a client (mobile phone) side are communicating with the server through dedicated API that serves raw data. All the logic behind how the app works is implemented in Javascript code that runs on a client in a browser. HTML5 is rendered on the client; the app uses local storage to store its state and data. When the user is navigating through the app, with the right combination of Javascript/HTML5/CSS we can achieve the native app user experience – smooth screen transitions, preloading the data, animations, touch and swipe gestures – everything that those amazing devices have to offer.

Advantages of HTML5/JS

• Getting closer to native app experience. With HTML5/JS you can get very close to the user experience of a native app. Recently Sencha implemented Facebook app in pure HTML5/JS and showed  that it is possible to get performances at the same level as one of the native app. iPhone and Android phone users are spoiled for choice with the number of awesome apps that can run on their devices and they might appreciate a similar experience on a browser so long as sharing, linking and other functionality still works – and there is no reason why it should not.
• No changes to existing web site. Enabling HTML5/JS app on your site is completely separate from your desktop site. Usually your existing web site will redirect users to mobile/app version of the site which as above mentioned in that case can be 100% optimized for touch screen device.

Disadvantage of HTML5/JS

• Two different solutions to maintain. You end up with two different solutions for desktop users and mobile users. This probably sounds like a little bit of overhead, but it does open up the possibility of perfecting the user experience on each platforms separately.
• Technology that is harder to develop. It will take pretty much the same skills as for development of native apps to develop great HTML5/JS app, so it all depends if you are going for less work and a compromise or you are willing to put more effort into your mobile platform and provide best possible user experience for touch screens.

Flagship HTML5/JS app example:

Financial Times. Even after more than a year and a half, this is still a state-of-the-art HTML5 app. And it is still a big buzz among publishers where some are trying to copy that approach . The reasons for not going with native were more related to the fact that iTunes wants to take 30% of all subscriptions sold trough native apps – but anyway they made it look and work great and are able to offer an pretty good, app like experience on tablets and smartphones in a mobile browser.

My verdict

I would say RWD is a great solution for a current state of the market with mobile traffic between 15%-40% and in a long term might work perfect for a simpler content based sites. But when mobile traffic grows to the point of 50-60% or for sites where engagement is No1. metric we will need to optimize experience for high end touch screen devices further than RWD will ever be able to do. It is proven that faster slicker apps are more user engaging and if is all about that only way to stay competitive will be to provide best possible user experience. Politicly correct answer is that there will be market for both for a long time.

How do you see those two technologies compared?