Responsive Website Design vs. Mobile Websites vs. Native Apps

July 16, 2012


“What are you guys doing with mobile?”  It’s a question that gets lobbed our way seemingly daily.  Truth be told, it’s an important question to ask, as the digital space is being shaped by the ever-improving devices we use (rather than the other way around).  But it’s also a loaded question, as the notion of “mobile,” thanks to all those ever-improving, continuously-advancing devices, has become stratified.  While at one time a simple, stripped down mobile site was enough, their successors (namely the “app-ification” of the web and, more recently, responsive designed sites) have sought another revolution.  So which of these three concepts has reigned victorious and won OHO’s favor?  Let the battle begin.


Responsive Website Designs – Not Your Father's Mobile

Mobile (or, or .mobi, or…) sites have a long history on the web.  You probably remember seeing your first site on your (gasp) web-enabled Nokia phone back in the late 90’s.  Remember how your first impression was “Wow, the internet in my hand!” and your second impression was “Hm, seems kinda bland and unhelpful”?  Yeah, so do we.

The good news is mobile sites have come a long way from those simpler times (thanks in no small part to devices that are better equipped to handle more than just text content).  A decent example is what the New York Times presents when you visit on your phone.  You’ll notice this isn’t your father’s mobile site, as nearly all of the site’s editorial, supplemental, and ad content is presented here (albeit in a tinier, simpler form factor).  Sure, it’s not perfect (there are plenty of things that don’t carry over from desktop to mobile, like Flash, standardized ads, dropdown menus, etc.), but, for the most part, no longer does using a mobile site mean being forced to endure a content-hindered user experience.

There are downsides to mobile sites, though.  Chief among these is no matter how awesome your site template is for desktop and notebook computers, your mobile site will still need its own template.  This means additional wireframing, duplicating your designer’s efforts on look and feel, and a development process that now has at least double the number of page templates to build.   For a site experience that’s already not a perfected copy of your original website, the cost-to-benefit ratio begins to drop quite rapidly.

Yup, There’s an App Even for That

You’ve heard the slogan.  You’ve seen the ads.  You probably have a few dozen in your pocket right now.  The truth is, apps are hot and, no matter if you’re on iOS, Android, or even BlackBerry, here to stay.

AppsBut for every disgruntled bird or rope that needs cutting or fart generator in your pocket, chances are there are at least two apps that are really just mobile sites in better, tailored clothing.  Twitter?  IMDb?  Yelp?  Zipcar?  Facebook?  All just websites declaring “we can do better than”

And they have.   Each of these example apps and so many more are proving daily why “app-ifying” websites is a win.  From deep integration into their devices (like notifications, location-based activity, background multitasking, etc.) to more robust, unique UI’s, nearly all of these experiences are proof that optimizing per device can pay its dividends.  Kudos for that.

But there’s a hitch: device fragmentation.  If your user base is 100% dedicated to a particular device, then your app strategy is pretty simple: develop for that platform and that platform only.  But what if 42% of your users are on an iPhone, another 35% are on Android, and the remaining 23% are on a smattering of additional devices and platforms?  Developing a dedicated app for each user base is not only costly and time-intensive, but needs to be revisited each time a new form factor (hello, iPad Mini) or marketplace is introduced.  Suddenly, app creation seems less a glitzy crutch for thin mobile sites and more a cost-prohibitive concept reserved for the top-tier.

Responsive Website Design – Mobile Evolved

So how to avoid the miragesque simplicity of a mobile site while also sidestepping the needless (and likely ever-expanding) complexity of a device-specific app strategy?  The saving grace is found in leveraging a web concept called “responsive design.”

Responsive Design ExampleA term coined by Ethan Marcotte in his 2010 article on A List Apart, responsive design’s goal is to make websites device agnostic.  By this we mean whether viewing on an iPhone, a BlackBerry, that rumored iPad Mini, the “we’ll-believe-it-when-we-see-it” Amazon phone, a Kindle Fire, your desktop computer, or the dozens and dozens of other web-enabled devices in your life, all of that site’s content can be displayed similarly and without compromise.

This means a single page template that all devices can read and render.  It means little to no “stripping down” when it comes to your site’s more robust features.  It means a process that doesn’t have to pick sides in the “mobile first” or “mobile later, after your real site’s done” debate.  But most importantly, it means a simpler, unified design and development cycle to get your new site, in all its glory on countless devices, up to speed even more efficiently.

The Winner: Responsive Website Design

Responsive website design is definitely gaining momentum as we see more and more interactive agencies dipping their toes in the water (shameless self-promotion: we have a super exciting responsive site launching soon), but the truth is the concept is still in its infancy.  Best practices are still being hashed out in the web community, the concept (which didn’t even exist a few short years ago) is still evolving, and the public is only starting to learn of the concept.

Still, one of the great things about Responsive Website Design is it’s a transparent concept: the less extra effort that goes into building it, the more ubiquitous the experience, and the less the public notices that experience, the better.  And that’s really what evolving the web, be it mobile or otherwise, is all about, right? 

Examples of Responsive Websites Designs

View these sites in desktop, tablet and mobile phone browsers to see how the sites "respond" to the different form factors.

Norwich University Online

Martha's Vineyard Gazette


Related Reading

5 Marketing Trends To Include In Your 2016 Strategy

Marketers have a big job trying to keep up with the ever-changing, ever-growing landscape of trends, technologies, tools, and platforms.

Explained in 60 Seconds: Metadata

In general terms, metadata is basic information that describes other types of data.

How to Get Prospects to Interact With Your Content

Generation Y and Z are seen as multi-tasking, Internet-savvy individuals, but it's hard to grab their attention.

Explained in 60 Seconds: UI Animation

When people talk about web design, we often hear general keywords like user experience, functionality, and the user interface design experience.