What Does It Mean To Design Websites Responsively?

Posted: 17 Feb 2014 05:30 AM PST

Last week I was thinking out loud about the subjective nature of design. It’s only one question about the nature of design that’s crossed my mind lately. Jason Grigsby recently posted some thoughts on the Cloud Four Blog about what makes a design responsive. It’s a good article as well as a good question. How do you define what is and isn’t a responsive design?

As you can guess I want to offer some thoughts of my own and talk about how I think about responsive design. First let me give you a quick overview of Jason’s article and encourage you to read it in full.

How Do You Define Responsive Design?

After raising the question about what it means for something to be responsive, Jason goes right to the source. From Ethan Marcotte’s original article he pulls out the technical bits that make a design responsive.

fluid grids
flexible images
media queries

Seems clear enough, but things get fuzzier when you consider specific sites. Jason uses Google+ as an example. If you load the site and resize your browser, Google+ seems responsive, but is it? There’s a separate mobile site for one. Google+ also doesn’t use media queries the way we usually think about them. Should we still consider it a responsive site?

Responsive design is less a set of techniques and more a change in mindset

At what point does a responsive site stop being responsive? Jason offers a list of things you might include while developing a responsive site that aren’t considered part of responsive design. You should read his article for details, but the again the idea is how many non-responsive things can you add before your responsive site stops being responsive?

In the end Jason returns to the source and asks Ethan Marcotte for his opinion. Let me pull one quote from Ethan’s response.

In the long run, “being responsive” is simply designing for the web the way it was intended.

That’s really how I think about responsive design. It’s the big picture thought. Let me walk you through some of my earlier days learning and designing websites so you can understand my thought process.

The Fundamental Difference in Designing for the Web

Long before hearing the phrase responsive design, I’d been thinking about the issues responsive design addresses. Back when I was first learning to design websites, I took some continuing education courses at the University of Colorado, mostly thinking the certificate it was leading to would assist me in getting a job.

In one class we were being taught how to use html tables to layout a web page. Yes, this was a long time ago. I had taught myself html before taking the class so it was a simple enough exercise. My mind drifted to whether or not it was better to use absolute or relative measurements.

My first thought was that relative measurements were the obvious choice. Why wouldn’t you set the width of the table and tables cells in % so they could fill up the screen and adjust to it? I set the measurements in % and watched the few lines of text we were working with stretch from edge to edge of the browser.

I was hardly a designer at the time, but I was pretty sure what I had just created wasn’t good design. If memory serves it was a 3 column table, with two narrow vertical columns on the side and one long horizontal line of text in between them.

Hmm? Maybe absolute measurements were the way to go.

Fixing the width of everything with px wasn’t any better, though. Sure, I was able to control the design and create something more usable and visually appealing. Then I’d resize the browser and watch as the content was either partially off screen or displaying far too narrow in the middle of it. If I knew the size of the browser all would be good, but I couldn’t know the size of the browser in advance.

Hmm? Both relative and absolute measurements have problems. Now what?

Again I was hardly an experienced designer or developer at the time, but I had stumbled on one of the fundamental questions of what it meant to design for the web. I spent many of the years that followed thinking about the question.

My Early Years as a Web Designer

A year or so after the course I was designing real websites for real people. I still didn’t have a good answer to the relative vs absolute question. Most of my initial designs opted for a hybrid approach.

I typically featured a sidebar or two that I would set in px. The main content column would then be sized in % and allowed to grow to fill the screen. I did my best to minimize how long text could grow, setting certain widths to something less than 100%. As the browser was resized empty space would grow between the fixed and relative columns.

It wasn’t a perfect solution. The main column would still grow too wide and the space created wasn’t purposeful in any way. Over time I joined the the crowd and developed entirely fixed-width layouts letting the space outside the design grow and contract with the browser.

These sites were aimed at the most common resolution, while ensuring they still worked well enough at the next most common sizes. Like just about everyone else at the time, my designs were built to be 960px wide.

I was never quite content leaving it there. I sometimes used a bit of resolution detection to make a few changes. Later when I was developing float driven layouts I moved sidebars to the right, specifically so they could drop below the main content when the browser couldn’t accommodate both in the horizontal space.

I was at least thinking about how my designs would look at different resolutions even if I didn’t yet have a good solution.

Then Came Responsive

That’s where I was when I first read Ethan’s original article about responsive design. At first I wasn’t sure what to think. Like many, I’d settled into a solution that seemed to be working. I wasn’t looking for a new technique even though I knew what I was doing wasn’t really the best solution.

It took me a couple of reads, but then it hit me. Responsive design wasn’t just a new technique. It was an entirely different way to think about web design. It forced everyone to think again about what it meant to design for the web.

On the surface it gave us tools so our designs could adapt to different resolutions. It resonated with me as something much more though.

Responsive design is accepting something we all knew, but did our best to fight and ignore. It’s accepting that designing for the web is different than designing for print. It’s accepting that the canvas we work in is unknown and out of our control. Forcing it to act like the fixed canvases of print won’t work. We need to accept our loss of control in order to better understand the things we can control.

What it Means to Design Responsively

If you want a simple definition of responsive design, it’s a set of techniques that enable designers to create websites that adapt in response to their canvas. The more you get into responsive design though, the more the techniques lead to new questions and problems to solve.

Imagine a fashion designer trying to create a shirt for a person who’s height and weight might vary each and every time the shirt is worn. That’s what we’re facing.

Responsive design is akin to the change from Newton’s physics to Einstein’s physics. We had been designing for a specific case, a single moment and condition, while ignoring all the other moments and conditions. We were trying to force people to view our sites under conditions most favorable to us, instead of accepting that we didn’t get to decide the conditions.

We clearly can’t design for an infinite amount of specific cases. We can’t test in every conceivable device. We have to instead change how we think and design systems that can adapt and respond to their environments.

That to me is what it means to design responsively. It goes far beyond a simple technical definition of responsive design.

Is your site designed for more than a single static possibility?
Does your site work well across a variety of devices and device characteristics?
Can your design adapt itself to devices that don’t yet exist?
Can your site change dynamically with the canvas it’s viewed in?

If it can do the above, it’s responsive. I don’t care what techniques it used to get there. To me the idea of responsive design is less about a set of techniques and more about the change in mindset we’re undergoing and will continue to undergo for the foreseeable future. The techniques are less important than the mindset and far less interesting too.

Responsive design is the change in thinking to accept that you aren’t designing for a known canvas and are now designing for an unknown one. It’s the mindset of how you can design a system that responds to its environment instead of forcing a specific set of conditions on your design.

Download a free sample from my book Design Fundamentals.

The post What Does It Mean To Design Websites Responsively? appeared first on Vanseo Design.