Layer Cake: A Responsive Design Layout Pattern: Chip Cullen

Chip Cullen

2015-06-04 · via Chip Cullen

Chip Cullen

June 3, 2015

There is a design pattern that I've noticed emerge on a lot of the responsive projects that I've worked on in the last few years. They have all tended to gravitate towards a particular kind of layout. There are a lot of situations where this pattern is helpful, so I wanted to write a bit about it.

I call it "The Layer Cake" - it's a way to approach page layout in a responsive design. You can also call it 'tiered' layout - but, mmmmm - cake. This differs from a regular 'multi column' layout in that there is no all-encompassing container, or long running sidebars. There can be multiple columns within a layer, though.

A 2 Column Layout vs. a Layer Cake

Here is what it looks like in the real world:

Examples: Lonely Planet, Audubon Society and Virgin America

The layout consists of independent layers that are stacked on top of each other to form the page. A consistent layout is achieved by the use of "inner" containers - even if not visible without viewing the code. Here are the above examples again, but with the layers outlined in yellow, and the inner containers in orange:

Outlined Layer Cake layouts

If you're thinking about things in terms of code, instead of this kind of source order:

<body>
    <div class="container">
       <div class="column-1">
           <!-- column content -->
       </div>
       <div class="column-2">
           <!-- column content -->
       </div>
    </div> <!-- end container -->
</body>

You will end up with markup more like this:

<body>
    <div class="layer">
       <div class="layer__inner">
           <!-- layer content -->
       </div>
    </div> <!-- end layer -->
    <div class="layer">
       <div class="layer__inner">
           <!-- layer content -->
       </div>
    </div> <!-- end layer -->
    <div class="layer">
       <div class="layer__inner">
           <!-- layer content -->
       </div>
    </div> <!-- end layer -->
</body>

This approach has several strengths, especially in a responsive design:

The layers can all be swapped out, moved around, etc - easily. This makes for a layout that is easy to implement as part of a whole design system.
Content source order must be considered carefully, as it enforces hierarchy.
By avoiding sidebars, you can side step awkward content order problems that arise from a more traditional 2 or 3 column layout.
It works really well when there are many pieces of varied content being presented - e.g. home pages, category pages
Long form content will probably end up with large swaths of negative space next to it. I personally think this is a strength that aids in the readability of content, but this could be perceived as a drawback.

Potential drawbacks do exist:

They tend to end up forming long pages with a lot of scrolling. I personally don't mind this - I think users are by and large comfortable with scrolling.
"Related" content pieces are harder to present 'right next to' a main piece of content.
Maintaining a consistent layout involves a bit more planning and manual adjustment.

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

Chip Cullen