responsive css grid/oldest trick in the book
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.
Comments
Bybe
Your website design looks fantastic m8, not only does it look great on my PC @ 1920x1080 HD, it looks lovely on my iPhone 4 and Blackberry Playbook.
Really Good Job on the website design ;) (Time to get rid of my template based and make my own, just so busy :P)
fjpoblam
I'm looking at this site on an iPad right now. My gripe is that the font size is unbearably small. Unlike many other "professional" sites I read every day, it does not enlarge to a font size comfortable for reading at the tap of a finger. On some pro sites, the content column even enlarges to the expense of the sidebar. I suggest you begin with a larger font-size to begin with, use a meta record for width, and explore media queries for min- and max- device widths including orientation (IMO unfortunately somewhat necessary, to allow user scalability).
Niels Matthijs
Well, I made it so you can tap-zoom again (removed the maximum-scale parameter from the meta tag). If you think the font is still too small though, I hope that the mobile version of Safari has something to increase font size. It's been a core feature of browsers for years now. I find the font-size pleasant and while I sympathize with people who find it too small, I consider it the browser's problem. If it's still too small when using tap/zoom I suggest using some kind of assistive software though.
phil
how do you make images responsive? i know about img{width:100%;, but it doesnt work for me, how did you make the images responsive?
thanks
Simon Goellner
I think an even older trick 'in the book' is to not use mystery meat navigation. =)
Touch devices aren't exactly great with hover-based navigation anyway and on my phone's browser the navigation didn't even load until after 3 minutes. I also couldn't get the associated text to display -- which could be because a: I'm dumb, b: my phone is dumb, c: my phone's browser is dumb -- whichever way you skin that cat, though; there's a lot of dumb people/things unable to access your website. And at it's core: Responsive web design is all about accessibilty.
Even if the navigation images/scripts had loaded, the fact that one absolutely must hover the navigation to get to where you need to go because of the mystery meat navigation (except perhaps the gallery, which has good iconography) mean't that I was limited specifically to your blog (which because of the load times I didn't want to use any of the 'jump's anyway). if all you're showing is text... and you do not have advertisement quotas to fill... then it makes no sense to make a user jump back and forth through your website just to read textual blog entries...
I think basically it boils down to my thoughts on responsive web design are: Responsive Web Design is a fancy, trendy sugar coating for 'Accessible Web Design' which every designer worth his boot polish should have and use in his toolkit. Make your website accessible to all devices. How you do it (responsively, or otherwise) doesn't matter... Make sure it's accessible.
Other than that, the site looks and feels nice on my desktop machine ;D
Hope my little comment was constructive :) Si.
Dylan
All I can say is thank you. I've been looking for a way to do a combination of responsive design and a fixed width right column for a few days now, all because I had forgotten of this approach.
Ashton
Have been trying to adapt some old code to Twitter Bootstrap - this is the first thing that worked for me. Thanks a bunch!