CSS Sleeping Columns in Responsive Layouts

Fluid CSS grids are great because they give us a way to align content into a grid that responds to the width of the browser or device screen. However, as the underlying grid gets narrower we usually want to rearrange the columns so as to retain a comfortable amount of space for the content. Sometimes, of course, this means splitting a column into two new columns as it drops down into a new position.

Fluid CSS grids like this and this don’t seem to cover these kinds of complex break points. If your site has only a few templates then it’s not too hard to give each column a class and then assign them different widths as your media queries fire. But while I was working on some responsive templates for a really big website recently I started wondering about how to code these columns in a more systematic, re-usable way.

@media (min-width: 768px) and (max-width: 959px) {
    /* Tablet layout columns wake up here: */

    .tcl3, .tcl4, .tcl6, .tcl8, .tcl12 {
        float: left;
        margin-left: 2%;
    }

    .tcl3 { width: 22.5%; }
    .tcl4 { width: 30.666666666667%; }
    .tcl6 { width: 47%; }
    .tcl8 { width: 63.333333333333%; }
    .tcl12 { width: 96%; }
    .tcl-last { margin-right: 2%; }
}

@media (min-width: 960px) {
    /* Desktop layout columns wake up here: */

    .dcl3, .dcl4, .dcl6, .dcl8, .dcl9, .dcl12 {
        float: left;
        margin-left: 2.5%;
    }

    .dcl3 { width: 21.875%; }
    .dcl4 { width: 30%; }
    .dcl6 { width: 46.25%; }
    .dcl8 { width: 62.5%; }
    .dcl9 { width: 70.625%; }
    .dcl12 { width: 95%; }
    .dcl-last { margin-right: 2.5%; }

}

So what we have here is a system of classes for both ‘tablet view columns’ (.tcl) and ‘desktop view columns’ (.dcl), both working off the same underlying 12 column grid. Sometimes a tablet column and desktop column can share the same DIV. So for example <div class="tcl4 dcl3"> takes up 4 grid columns on a tablet, but only 3 grid columns on a desktop screen. But in other cases the columns will require separate DIVs, for instance if a single long desktop column needs to split into two separate tablet columns because it is slipping into a wider area.

Granted this is all quite complicated and can make your head hurt at times, especially when trying to put the markup together for a complex page. But the advantage of this approach is that after it is set up, we end up with a system of classes that can be applied to different layout templates fairly quickly, and without having to worry about percentages. Source order is still a limitation of course, and prevents us from using some layout combinations. To get round that you probably have to use Javascript to manipulate the DOM.

Adobe Illustrator Responsive Web Design Template

Responsive Web Design is a challenge for the traditional processes of visual design, where the standard Photoshop (or Illustrator) mockup tends to be geared towards a single fixed width view of each page. One way to meet this challenge is to decouple the overall look and feel (or ‘design system’) from the layout by using style tiles. I think this method has a lot of merit and is generally the best way forward.

Sometimes, though, it may still be useful or necessary to mockup how a given page will look at different sizes, before you reach the HTML stage. This might be the case if you’re still working at the branding and design system stage and want a bit more context for your style tile. Or maybe you need to show a client a quick preview of an important page.

If you’re like me and prefer Illustrator to Photoshop for web design work, you might find this template provides a couple of useful shortcuts. I’ve included five standard view sizes each on their own artboard and with device chrome for iPhone, iPad and a desktop browser (The device graphics come from Teehan+Lax who were kind enough to let me use them here).

I’ve also included a sample grid on its own layer, which represents a fluid grid with a maximum width. This is unlikely to be exactly the right grid for you, so you’ll probably want to delete all the columns and start again. I’ve found that the easiest way to create grids in Illustrator is just to use the Object > Path > Split into Grid command – although it can be a bit fiddly to balance gutter and margin widths if you want to end up with whole pixels!

In practice I tend to find that five sizes is too much and I usually end up deleting a couple of the artboards. Let me know if you find it of any use or have any suggestions for how to improve it.