responsive css grid
Maybe you noticed already, but this weekend I converted my old design to a responsive layout. For many of you nothing has changed (safe a few very small bits left and right), but people visiting my site with a device that has a resolution (/device-width) lower than 992px will get a responsive layout. In the process I made a rather pleasant discovery regarding my preferred grid system, one I'll be happy to share in the following article.
responsive
Even though I believe in responsive design, I'm not totally happy with the current resources both developers and web users have to their disposal. Then again, doing nothing at all isn't helping anyone either, so I went ahead and made a responsive design anyway. If you want to see the resulting css file, you can check the responsive onderhond.com css here.
I'm almost ashamed to admit this, but it was the first time I actually coded a responsive design. Sure I've been reading about responsive the last few years, keeping myself as up to date as possible, but my focus on html and my shaky beliefs in the hands-on implementation kept me clear from actually sitting down and implementing such a design. For my site I also went the wrong way around. Responsive goes hand in hand with mobile-first, in my case the desktop design was already there and had to be adapted to a mobile context.
However, I found myself somewhat surprised at the ease of adapting a desktop design to mobile. When I started, I had only three specific requirements for my mobile design:
- I wasn't going to support anything with a resolution lower than 320px.
- I was going for a liquid layout while focusing on content breakpoints rather than device breakpoints
- The content column was the only liquid column.
The third point in particular is an important one, as this method only requires one liquid column. Many responsive grids I saw before featured all-liquid columns. In my experience, the context (aside) and navigation (nav) columns are pretty designed by width already, so making them liquid would only lead to an unmanageable mess. Instead, I was going to focus on the content column and have the design break to a single column layout when the content area became too small to use.
the grid
The funny thing was that the grid system I've been using for the past 5 years already provided this exact behavior. For years I've been coding liquid layouts, though in practice a fixed with on the parent container always made sure the actual design was fixed. Changing this width to a max-width was enough to trigger the liquid content column behavior I was aiming for.
/* html */ <div class="grid"> <section> content goes here </section> <aside> fixed context column</aside> </div> /* css */ .grid{padding-right:15em;} .grid > section {float:left; width:100%;} .grid > aside {float:right; width:15em; margin-right:-15em;} The code above is an age-old piece of html/css that allows for easy equal height, source-order independent grids. You can switch the section and aside element in the html source without any changes needed to the css. More important though is that the section (the content column) takes up all the available space. Change the width on the parent and the size of the content column will change accordingly. Even better, this thing can be made to work all down to ie6.
People may remember an article I wrote a good 2.5 years ago (away with widths) where I went against the abuse (or call it over-use) of explicit widths in web design. It turns out that with responsive design raging this little best practice made my life a whole lot easier. After changing the width of my page to a max-width with the same value, all I had to was resize my browser window to find out where my original design broke and add my breakpoints there. Currently the grid breaks down at 630px, leaving me with the following piece of css:
.grid > section, .grid > aside {margin:1em 0;} @media all and (min-width:630px) { .grid {padding-right:15em; overflow:hidden;} .grid > section {float:left; width:100%; margin:0;} .grid > aside {float:right; width:15em; margin:0; margin-right:-15em;} } And that's all there is to it really. Everything below 630 gets a single-column experience (though I'm not quite sure what to do with the context column, leaving it in its original size looks weird, but stretching it across the entire available width is probably even sloppier - guess that's why people are preaching the mobile-first approach). All in all it took me about 7-8 hours to adapt everything and to get the responsive layout live. Not bad for someone who never coded a responsive layout before, I'd expected a lot worse to be honest.
If you want a peak at the grid in action, check out the little responsive grid test page I made. It may not be new and/or cutting-edge, but somehow I haven't seen it used much in relation to responsive (yet).
conclusion
Best practices, even when they don't have an immediate effect, are important, if not essential for future-proof coding. The grid system I've been using for about 5 years now suddenly proves very effective in accommodating responsive layouts. These are the finer moments in one's career. Things are a little different if you want all-liquid columns of course, but I'm not quite sure I think that's a very good idea in the first place.
I'm still trying to find a good way to switch back to the old (fixed) layout for web users who don't like the responsive version (which I know exist), you can expect this functionality in the near future.