Responsive Design — Beyond The Minimum

Posted: 11 Nov 2013 05:30 AM PST

A few months ago I wrote an article about responsive design being easier than many people think. It was in reply to a comment on an earlier post disagreeing with my assertion that responsive sites take a similar amount of time to build as static sites. It was also a reply to all the people who suggest responsive design is too difficult and not worth the effort.

David left a comment on the latter article suggesting I was leaving out a lot of information about what goes into responsive design. It was a fair point as I was purposely leaving out many things that should go into a responsive design.

a flexible mesh net folded over onto itself

I was speaking about a minimum viable responsive design and focused on the very basics of flexible layouts, flexible media, and media queries. I even reduced each to an absolute minimum.

Once you reach this minimum viable stage you have something better than a static site. Including what you would do beyond the minimum isn’t fair in the comparison, because it holds the responsive site to a different standard than the static site it’s being compared to.

I still stand by everything I said in the article, but I can understand why someone who didn’t have the context of why I was writing it, might take issue with some of what I said. David made a good point that I might have left the impression that responsive design was little more than flexible measurements you could bolt on to any static site. I’d like a chance to correct that impression, beginning with this post.

The 3 Tenets of Responsive Design

In Ethan Marquette’s original article on responsive design, he listed the 3 things required to make a design responsive. I’m adding what I consider the minimum requirement for each.

Flexible layouts — the minimum requirement is converting absolute measurements to relative measurements
Flexible media — the minimum requirement is using max-width: 100%; height: auto on images and media
Media queries — the minimum requirement is to drop columns below each other when there’s not enough horizontal room for them side by side.

The minimum of each of the above is quite easy to do with even a site or two under your belt. You change absolute measurements to relative ones and your layout becomes flexible. Widths become max-widths and you’ve covered the very basics of making images and media flexible as well.

At certain points flexible alone isn’t enough. The browser might become too small to hold the entire layout, flexible or not, or the browser becomes large enough that the layout feels cramped inside all the empty space. At these points we use media queries to make larger changes and move blocks of content around.

Again none of this is really difficult, but it is only the minimum. It’s fine to use the minimum in comparison with the alternative, but a well designed responsive site requires greater and has many more moving parts. It requires a change in thinking more than anything else.

Responsive Design from 10,000 Feet

At its root the difference in moving from print to the web is that we now work in a canvas that changes in ways we don’t control. Where print is fixed, the web is flexible. Where print is static, the web is dynamic.

The web design industry has been quicker to adapt the latter. It wasn’t long after html that there was dynamic html, even if the way we made html dynamic wasn’t necessarily the best solution. It was the best we could do at the time.

While some have certainly been embracing flexible layouts for a long time, the industry as a whole hasn’t been as good at accepting the flexible nature of the web, because it removed one of the fundamental constraints print designers have always relied, the fixed canvas.

Responsive design seeks to correct this and urges us to take advantage of the flexible nature of the web. It makes some things more difficult and challenging, since we can’t lean on certain knowledge that’s been passed down, but it also offers so many more possibilities that we should be excited.

Flexible layouts and media along with media queries are the details for how, but what’s more important is changing the way you think about design. You not only need to make design elements flexible, you need to think flexible from the moment you start considering a design problem.

Deliverables can no longer be a static picture of a moment in time. They should embrace how different static picture change from one moment to the next and from one context to the next. It’s this shift that’s driving so many changes in design processes.

I recently listened to an episode of Jeffrey Zeldman’s Big Web Show in which he interviewed Dan Brown. About 15 minutes or so into the podcast, Dan made an interesting point about the changes we’re going through. He said designers need new constraints. We do well with constraints, but important constraints we’ve relied on are no longer present. The web comes with different boundaries than print and we need to learn and understand the new boundaries.

It’s a great way to describe the problem. A set of constraints that we could rely on and that were so ever present we took them for granted, have left us and we haven’t quite figured out what the new constraints are that will replace them.

From Size to Proportion

As I said above, the fixed canvas is one major constraint that’s been removed. We still design in a canvas, though. We can’t know it’s absolute size, but perhaps we can look to its relative size of 100%.

Even that’s not quite accurate as our canvas doesn’t really end at the edges of the visible browser screen. We can move things off screen that we either bring into view when requested or require visitors to scroll to access.

Still at some level anything we design will have a width of 100% and a height of 100% even if the absolute values change from page to page or moment to moment and even if the 100% constraint is one that reaches beyond the visible canvas. It’s a constraint we have to impose on ourselves.

The fixed canvas constraint is gone. If we can accept that we no longer have control over the canvas I think new constraints will be found in moving from absolute measurements to relative measurements and in thinking scale and proportion instead of absolute size.

It’s no longer 960px divided into 8 columns that are 120px each. It’s now a horizontal area that’s a percentage of the visible screen or better in scale with the design elements it holds divided into 8 columns that are 12.5% each.

The Devil is in the Details

Beyond the change in higher level thinking there are still many specifics of moving to a flexible canvas that confound us. Some things just don’t readily lend themselves to being flexible.

Media — The basics are simple, but there are so many more considerations when making images and other media responsive.
Tables — They can be made flexible, but usually require a minimum amount of space to be usable that’s beyond what’s available on some mobile devices.
Navigation — Menus call for new patterns beyond simply being flexible. What works well at one size, might not work so well at another and might need to change even as we try to maintain consistency.
Layouts — Flexible is the start and media queries are there when larger changes are needed. What those larger changes entail requires more thought than dropping one column below the next, though.
Mobile, Widescreen, Somewhere in Between— Where do we start designing? We need to embrace the flexible and dynamic, but to do that we still need to understand something about static pictures at moments in time. Which pictures and which moments and where do we begin?

I hold to my thought that a minimum viable responsive design is better than a static one and if, for now, you only do the minimum, you’re ahead of the game.

However, the game is changing quickly and it’s in our best interests to do more than the minimum. In the coming weeks I want to address some of things we should do beyond the minimum. I’d like to talk about some of the above items in more detail as well as share some thoughts about responsive design in general.

If you liked this post, consider buying my book Design Fundamentals

The post Responsive Design — Beyond The Minimum appeared first on Vanseo Design.