responsive web design

17.01.12

Responsive web design is an approach in which one design can adapt to fit various screen sizes, so that your site adapts to fit the screen width of every device or window. The web is full of it at the moment, with designers and developers touting it as the best approach to deal with the ever-increasing range of devices, screens and browsers.

And with good reason. It certainly is a really good plan to help simplify the complex process of defining a framework and boundaries for designers and developers to agree on, and for everyone to get along nicely. So let’s step onto this freight-train of a bandwagon just for a moment and share some of the best tools and insight we’ve come across so far.

 

Joni Kopir’s Golden Grid deals with a few of the issues we’ve come across in the past. The gutters (space between the columns for any normal people still reading) keep their widths when the window expands, meaning the design will keep it’s integrity and doesn’t become too ‘gappy’.

 

He’s also developed an alternative version called frameless which takes the approach of simply adding more columns to the design as the page expands.

Skeleton by David Gamache is also a great piece of work, which sort of works the other way around—adapting the layout with media queries as the design becomes narrower. It’s also a development of the previous stalwart in a web designer’s toolkit—the 960 grid system. Which makes the transition a bit easier to get into.

Some other useful resources are responsive web design and fluid grids by Ethan Marcotte.

We’re also glad to see though that some people are pointing out (and we tend to agree) that these systems and tools are exactly that. Tools. Much like a traditional typographic grid, it’s what you do with it that matters. Or in the words of international style pioneer — Josef Muller-Brockmann;

“The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.”

This still very much applies. If we allow these tools and ‘frameworks’ to dominate the design process too much, the result will no doubt be another generation of sites that are even more alike. We all still need to find that little touch of genius to make a site brilliant and get out of these little boxes.

We’ll be working to make this site responsive for phase 2 over the next few months as well as taking this approach with a few projects we have on the go right now.

In summary (for the next 5 mins at least): Responsive web design=good. Brilliant web design=still tricky.