A Reality Check on Responsive Design

Aaron Branson
September 05, 2012
User Experience Design

Over a year ago, we started discussing the concept of “responsive design." Our own Jeremy Pratte wrote in June 2011 about the concept with his post: The IS no mobile web: Making Web Designs More Responsive. Responsive Design has recently been a very popular topic and we see more and more companies inquiring about it, but many are doing it out of fear that if they don’t implement it they are missing the boat somehow.

We are definitely an advocate for continued innovation, but definitely not for the sake of keeping up with the latest buzzwords. The problem I’ve noticed is that nearly everyone who has come to us urgently requesting responsive design could not clearly define what goals they are hoping to achieve by doing so. I hope this post will help clarify what it is, what are the possible benefits, what are the possible problems… and ultimately what to do about it.

What Is Responsive Web Design

First, let’s level the playing field and succinctly define what everyone is trying to communicate with the phrase “responsive design.” Responsive Design is simply the concept of designing your website with multiple screen sizes in mind and determining how the design will adjust (respond) to each and result in a more optimal user experience. We could always have designed with multiple devices, browsers, resolutions, etc. in mind. What makes this concept different? The difference is the methodology in achieving this result. Responsive Design is about developing a single HTML structure with conditional CSS and JavaScript to manipulate the layout and styles based on resolution “break points.” These break points are typically defined to coincide with resolutions of various devices (i.e. large screen monitor, laptop, tablet, and phone).

For comparison, the alternative approach would be to develop HTML/CSS for your desktop version, another for your tablet, another for your mobile, and so on.

Why the Uproar about Responsive Design

Before we get locked in to “We must do responsive design!” mode, let’s hold up and talk about the benefits you might expect from doing so. This part is tricky because we’re talking about choosing a development approach. The reason for choosing a development approach is typically which is most efficient – takes less time to complete and less effort to maintain. And making that determination depends on more variables of the website’s design, the organization’s expertise, and the technologies such as the CMS. But theoretically, the benefit is that this single responsive website will be faster to build and easier to build than multiple websites.

Any Possible Drawbacks to Responsive Design

As I said the theoretic benefit of responsive design is that one version of HTML is faster to build than multiple versions, and it is more efficient to maintain. I would suggest that you have to keep in mind the added work of building the conditional logic of CSS and JavaScript so that the one version of HTML works well. So, as a result, Responsive Design is more likely to be beneficial if you are targeting a large number of resolutions. To say one responsive design definitely will be faster and therefore less expensive than creating two traditional designs – one for desktop and one for mobile – is a risky statement. However, if your website’s goal is to present a unique look for many targets (i.e. large monitors, standard monitors, tablet landscape, tablet portrait, phone landscape, phone portrait) now then you may be on to something. I would feel much more comfortable saying you can expect some ROI by going the responsive design route.

One more thing to consider… if you determine your project will indeed benefit from a responsive design approach, keep that in mind during the creative design process. When you see a design comp, ask yourself “Does this layout lend itself to being manipulated for my other targets?” Keep this mindset throughout the process – not in a serial fashion of designing for desktop and then tablet and then mobile!

By all means, I don’t mean to downplay the potential of responsive design and its impact on how we approach web design today and tomorrow. I just strongly recommend being able to articulate a sound reason for implementing it and not doing it just because everyone else is.

So, What to Do with Responsive Design?

Keep in mind that responsive design is a methodology… a tool… a means to an end. Not necessarily the goal or objective of your website. And that’s where I’d suggest you start… with your goals. Our philosophy is to separate your design goals from the implementation/development. Don’t let this new shiny object called Responsive Design distract you from making sound business decisions. As always, define your goals and objectives clearly. And then it can be determined if responsive design is the appropriate tool to best achieve those goals.

comments powered by Disqus