5 Patterns To Rearrange Responsive Layouts

Posted: 29 May 2012 05:30 AM PDT

The most obvious way a responsive design changes is in its layout. Multiple columns become a single column. A sidebar drops below the main content. One block of design elements becomes integrated with another.

Understanding how to create flexible and adaptable layouts will probably be the first problem you work to solve when moving to responsive design and a number of patterns have emerged for how designers are moving the large blocks of a design around.

The Problem

Adaptive layouts are one of the central problems of responsive design. On a phone our layout will be a single column and on a widescreen browser we want 2, 3, or 4 columns. The question is how do we get from one to the other? How will our design adapt?

The easy part is to make layouts flexible. Drop ‘px’ measurements in favor of % measurements and your layouts can better adapt. That doesn’t solve everything though. With relative measurements layouts are more flexible, but there are still points at which they break and need something more.

Over the years we’ve trained ourselves to think of a website as several large boxes filled with stuff. Look at most any website and you’ll find it includes any number of each of the following, including 0.

header block
main content block
sidebar block
footer block

The nature of html and css is that we create lots and lots of boxes. To manage all these boxes we wrap them in the containers above and then place these containers on the page in different ways to create a layout. We also rearrange boxes within containers for more variety in the design.

The challenge we face is that our containers, whether it’s the device itself or one of the containers we create in our layouts, are changing size and we need to come up with ways to rearrange the boxes within as they do.

The Solution: Layout Patterns

Luke Wroblewski, lover of data that he is, spent some time looking through the sites listed at Media Queries and compiled some patterns for how designers are reflowing layouts. Luke observed 5 main patterns designers have been using.

Mostly fluid — This is the most popular pattern being used. At phone sizes it stacks columns vertically and turns the stack into multiple columns as the browser width can accommodate them. In between elements and containers are flexible and they expand and contract up to different breakpoints. At these breakpoints columns drop or rise.

One other concept this pattern employs is a maximum width for which the overall layout can grow and as browsers expand beyond it, additional whitespace is introduced outside the layout. At this point the pattern looks much like the fixed-width and centered layouts we’ve been creating for years.

Column drop — This pattern is similar to the mostly fluid pattern except that containers aren’t as flexible. Perhaps one column flexes while others remain fixed or all containers remain fixed while only whitespace outside the layout adapts. When the overall layout can no longer accommodate it, a column drops below another.

At first glance it might seem to be the same as the mostly fluid pattern. The difference is in how larger blocks do or don’t resize between breakpoints. As such this pattern could require more breakpoints.

Layout shifter — Here the changes in layout of more than column drops between breakpoints. This is perhaps the most innovative of the patterns. The patterns above are more concerned with rearranging the outermost boxes, the containers. The layout shifter patters also rearranges the boxes within containers.

Elements and containers are flexible between breakpoints and the main distinguishing characteristic is that more than a simple column drop is happening at layout changes. The layout shifter pattern also seeks to rearrange the boxes within the containers, instead of just the main containers.

Tiny tweaks — As the name implies this layout pattern consists of small tweaks. It’s the least popular pattern Luke observed and generally requires a very simple layout across all devices. Often it’ll be a single column layout everywhere that simply moves a few things around in small ways.

The layout can be more complex than a single column, but generally not much more and not as much change is occurring here as it does in the other patterns.

Off canvas — This patterns flips things from the vertical to the horizontal. Instead of columns dropping below other columns, they’re shifted out of the visible part of the display. Columns are moved off the canvas.

In this pattern content will be hidden when the screen isn’t wide enough to accommodate it. That content will still be accessible, but a viewer will need to take some action to request it and see it. Typically after the request the content will slide in from left to right, either on top of what was already there or shifting something that had been visible outside the canvas.

If it’s hard to picture the patterns above from my descriptions, Luke created images so you can see how each works. He also provides a few example sites for each pattern.

In a followup post Luke called on designers and developers to create a working example of the off canvas pattern. Jason Weaver obliged and you can find a nice demo site using this pattern.

My Experience

Outside of the off canvas pattern, which I’ve yet to use, I’ve probably used a bit of all of the other patterns depending on the specific site. I’d characterize most of the responsive designs I’ve built as falling into the mostly fluid pattern. I do find the off canvas pattern interesting though, and would like to experiment with it.

The biggest limitation I’m finding in responsive layouts is that for single columns we’re mostly locked into following how things appear in our html. If your sidebar block comes before your main content block in the html then it will come first when everything is displayed inside a single column.

The off canvas pattern attempts to fix this, by moving things off screen, though it’s not always going to be what we want.

Another approach is to think of the different rows of blocks in your layout and to always place the most important content in that row first in the html. For example your header block might be one row, followed by a row containing 3 columns of content, and a final row consisting of your footer. It might be be difficult to get header and footer to change places, but you can rearrange the columns in the middle row without too much difficulty.

It’s still somewhat limiting though.

Interlacing Content Blocks

There’s only so much you can do if you’re only rearranging the big blocks. The layout shifter pattern expands the possibilities by having us rearrange the boxes within boxes, but there’s still something missing and that’s an ability to have an element inside one container shift to be inside a different container.

Trent Walton first brought attention to this issue with his content choreography post. Not long after I was trying to get at this problem when I wrote my post on rearranging boxes and it’s subsequent attempts at a solution.

More recently Chris Coyier continued the talk about content folding as how we might merge or interlace blocks from different columns together.

I think the ultimate solution is to become more modular. We have to stop wrapping everything inside containers. We need to see elements as their own containers in order to have greater flexibility in how we reflow them.

Instead of seeing a single sidebar column that contains 3 boxes inside, we need to see it as 3 individual boxes that are located one below the other. Structurally we have to break free from placing these boxes in a large container even as we visually maintain the appearance that we are.

Summary

There are two general concepts to making a layout responsive. The first is to move from absolute measurements to relative measurements. From ‘px’ to %. That’s the easy part. The more complicated concept is how do we rearrange these boxes when they can no longer flex in a usable way?

At some point we need to rearrange the boxes of our layout. Several patterns have already emerged for how we do this. Most common is to simply drop one column below another, but more interesting are the patterns that also rearrange what’s inside columns or shift things off the page.

My own experience suggests we also need to think more modular and remove some of the containers that have made developing layouts easier. It’s easy to rearrange boxes within a container, but hard to get boxes to break out of one container into another. By removing containers we’ll have more flexibility in how we can rearrange things.

Next week, we’ll start looking at one box within our containers. We’ll look specifically at navigation and some of the patterns being used to reflow navigation.