Subscribe for freeContribute

Responsive Design vs Mobile Apps

Written by Joel Varty on July 11, 2012

Buzz words. They fly at us like crazy and sometimes, just once in a while, they stick with us.  Responsive Design is one of those buzz words, and it's sticking.

One Code Base to Rule Them All

The biggest reason that Responsive Design is sticking with us is the mobile web, and how it is expanding rapidly.  In the last few years, mobile web growth on phones has outstripped all other aspects of internet traffic growth, and this year it's continued onto the tablet form factor with the iPad and Android Tablets like the Fire, and presumably the new Nexus 7, giving consumers a great experience with the web.

Responsive Design allows developers to build a website once and have it scale up and down to all the different screen sizes and resolutions possible.  It means that, without reloading or changing the URL, the same web page can be viewed on 3.5 inch screen all the way up to a 20 inch desktop monitor and larger.  The designer does have to spend the time to figure out how the layout is going to happen at each size interval and orientation, and it can present a challenge for web developers to implement it.

Courtesy of Scott Hanselman/http://hanselman.comSource: Scott Hanselman's Computer Zen

I've been reading and thinking about this for a while, including ideas from Microsoft developer Scott Hanselman.  In his blog post from April 2012, Create a great mobile experience for your website today. Please. he outlines a few strategies for a great mobile experience, of which Responsive Design is but one choice:

"Do nothing. "

Your site will probably work on a mobile device but each day it will look worse and worse to a discerning public with increasing expectations.

"Use Adaptive/Responsive Design."

This is my favorite option. If your site is read-mostly (rather than a data-entry application) you can get a great experience on all devices by adaptively rendering your site based on screen-size. If you're focused on performance you can add a server-side component and resize images for mobile as well. Visit for inspiration.

"Use a mobile framework."

There's lots great frameworks like SenchaKendojQuery Mobile and others. These frameworks can get you near-native looking applications using HTML5 techniques.

"Write a native app."

For the time-being while it's cool to try to get native experiences using non-native tools, it's hard. The best native experience on a mobile device will remain a native-built application. This requires the most work with arguably the best experience. However, you CAN get 90-95% of the experience with less than 90% of the effort if you use some of these other techniques. Plus, you'll anger fewer users by not forcing them to download a crappy mobile app by just making a lovely mobile website.

Responsive Design vs The App

Nieman Journalism Lab: "ReadWriteWeb chooses responsive design over a native iPhone app"

SAY Media, who acquired the popular blog ReadWriteWeb in 2011, have decided to pull down their iPhone app and stick to a single web codebase.  Interestingly enough, their new site isn't even ready yet, but they say that the metrics show their mobile site is used far more in Safari on iOS than their iOS mobile app anyways.  

Alex Schleifer, general manager of SAY, who is overseeing the new website redesign says:

"People’s behaviours are definitely changing. We just feel it’s best to invest in the mobile browser first, and the app stores later. It’s all-inclusive, and mostly system agnostic. It also feels a little strange that we should go back to a model where everything needs to be installed. The browser is a pretty perfect content delivery platform. Apps have a place, and they’ve completely changed the software landscape, we just don’t believe everything should be an app."

Source: Nieman Journalism Lab.

Too Many App-Stores, Not Enough $

If you look at the plethora of devices and form factors coming available in the mobile and tablet space, as well as the fragmentation happening across platforms (especially Android) where certain app features don’t work on specific devices, Responsive Design starts to look very attractive, even though the up-front cost is higher than a standard website.  In fact, I would say that development cost is probably the biggest factor for publishers and content owners – they want to get their content in front of more consumers, quickly, and for less cost.  Responsive Design allows for that, even though it is more expensive initially.

Here’s why: you only have to build one thing, and it’ll probably be cheaper than an app to build anyways.  It’ll certainly be easier to update, because the code is all hosted on a web server and doesn’t need to be deployed on individual devices via updates.

And, relatively speaking, it’s just plain easier.  To build an app for iOS and Android, the two biggest players, you need to have developers who know Objective-C and Java.  For Windows Phone, it’s C#, for Blackberry it’s an altogether different flavour of Java.

In contrast to this, Responsive Design is based entirely on HTML5, CSS3 and possibly Javascript, which every web developer worth his or her salt should be rock-star comfortable with.

 Decision Time

Decision Time

So we know we need to go mobile.  Do we build apps?  Do we build a mobile site?  Do we re-design our website for Responsive Design?

First things first: you need a stop-gap.  You need to get something out on the mobile and tablet sized web so that folks clicking on links in Facebook and Twitter and browsing on phones can experience your content in a decent way.  Do a barebones mobile website for that.  It’s easy, relatively cheap, and you don’t need to worry too much about breaking your current website.  What’s more, you’ll learn a lot by starting from mobile about what kind of stuff your website doesn’t need (eg: Flash video, Like buttons, etc).

Then, take your time and do a Responsive Design website from the ground up.  Don’t start with your existing stuff, step back and get a fresh look at it based on what you did with mobile.  Think about touch & swipe as much as you think about point & click.

My bet is that your readers will find you more easily, stay longer, and come back for more, more often.

Written by Joel Varty| July 11, 2012
Categories:  How To


Add a Comment

Allowed HTML: <b>, <i>, <u>


Copyright © Agility Inc. 2016