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.
How RWD works
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.
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.
How HTML5/JS app work?
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.
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?