Many Shades of Grey: Responsive Design vs. Adaptive Layout

By Jennifer Knodler

Once upon a time…

In the first century of the 3rd millennium (aka the 21st century) the world was full of websites designed and developed with high-speed internet access in mind. Then one day, mobile feature phones were introduced: Palm, Inc. (remember them?), Kyocera 6035 and the HP iPaq h6315 look. Today they look like something from the dark ages! It wasn't until 2009 that a few companies started noting mobile phone usage rising and started to develop their own mobile initiatives. At that time, data networks had far slower speeds. Designers were faced with a problem: they needed to allow the small screen carrying "on-the-go" user access to their content without frustration.

The solution: Native apps and m.sites were born. Brilliant. Limited function to be viewed in this mobile context. It made complete sense. Traditional websites and mobile solutions lived independently and happily One of our clients said then "all we want is a mobile site that looks like our contemporary [then mid-90s!] website."

But, then one day the K48 (the iPad) and other tablets joined the list of available offerings for both home and on-the-go users. Android and more recently Win8 tablets followed suit and here we are on the edge of a holiday season where the tablet is the number one gift. The tablets that were introduced had screen sizes that weren’t quite as large as a super-sized widescreen monitor and weren’t quite as tiny as a smartphone. Designers stopped in their tracks and considered a new challenge: Do we continue to design a solution for every form factor that emerges or is it possible to try to find a way to make our websites accessible AND user friendly across all form factors?

Ethan Marcotte, a thought-leader for the design industry published a concept and coined the phrase “responsive web design” (RWD) as a viable solution. His solution was not simply a response to varying display sizes, browsers, speeds (also known as “adaptive web layout”), it was a response by using a particular approach involving three critical components: fluid grids, flexible images and media queries.

For companies ready to start from the very beginning and make their content available across all devices, Marcotte’s RWD approach made perfect sense. They could follow his steps to build a somewhat one-size-fits-most solution.

However the companies who had already spent a great deal of time and energy creating those separate independent solutions scratched their heads – do we start from the very beginning and develop a truly responsive web design OR do we work to use what we’ve developed to date and create an adaptive web layout? The debate began and designers began to grapple with the advantages and disadvantages, they presented them to business stakeholders and business goals and budgets became part of the decision making process.

Eventually, the conversation got louder and more complex. We started to be brought in as consumer insight and usability experts to advise on the best way to make the end users happy.

Key Lime Interactive’s considerations.

So what advice do we give? In short, we agree with some of the others that there is no one-sized fits all solution. Every project has to be evaluated individually and the most effective techniques need to be applied accordingly. We can see the strengths of adaptive design for established groups and responsive design for folks starting fresh, who have the resources and budget.

Most importantly, from a user perspective: It doesn’t always matter! Jeffrey Zeldman proposed in mid-2011 that the design community should broaden the term “responsive design” “to cover any approach that delivers elegant visual experiences regardless of the size of the user’s display and the limitations or capabilities of the device.” The key phrase: “elegant visual experience” resonates with us as we advise our clients.

A quick quiz:

If you’re in a position to determine which direction your company should go, start by taking this short quiz as you begin the conversation. Keep your score!

1) My Current Properties:
a) I already have both a traditional and mobile site and satisfaction metrics are high for each
b) I’m starting fresh/early stages because I have no properties in place at present and/or I’m looking for something new or my satisfaction metrics are low.

2) My Support:
a) I have the capacity to hire out or to self-maintain a few different website versions.
b) I have the expertise in house (or the funds to hire out) to utilize the necessary toolkits (fluid grids, flexible images, media queries) and I prefer to maintain one site once it’s been built.

3) KEY QUESTION – The Context:
a) My user’s experience through mobile or tablets should be different than the experience they encounter via the traditional web because the context of mobile use demands different features and/or I need for my users to have a really amazing desktop experience that cannot be reduced by the least common denominators.
b) Reformatting our traditional site to fit the mobile web or tablets will work quite nicely for my offering. I understand when I resize to fit all, compromises are occasionally made, and this is ok!

Scoring:

If you answered mostly “a’s” you’re leaning toward Adaptive Layout Design
If you answered mostly “b’s” you’re leaning toward Responsive Web Design

As a consumer and user research consultancy, we weigh question 3 far more heavily than the others – so ultimately, the direction that you choose for question 3 should be the direction that you investigate most.
 

New Call-to-action

Subscribe to our newsletter.