Responsive Web design grid system

In making the move to responsive web design, one of the potential hurdles is the rather awkward maths for calculating the percentage-based widths necessary for fluid layouts. If, for example, you’re designing with a 960px grid in Photoshop and you have six columns, each 140px wide, you divide 140 by 960 to get your percentage-based width: 14.583333%. Now, I don’t know about you, but numbers like that look a little scary. It doesn’t matter that there are great calculation tools built into TextMate to do the maths for you; the point is that the final figure looks like an arbitrary number with no immediate relation to either the container’s pixel width (960) or the element’s pixel width (140).

Compare that to a container that has a width of 1000px. 1000 is a nice, easy, round number. Dividing by 1000 results in clean percentages and better still, dividing by 1000 is something we can do in our heads: just remove the zero. A 140px column inside a 1000px container is 14%. A 500px column in a 1000px container is 50%. 320px is 32%. Easy!

Here’s the PSD. And, in the interest of showing how a static Photoshop file can translate into a fluid web page, here’s an HTML demo.

But what about our precious 960 grids? I hear you cry. That holy number has served us perfectly well, dividing easily into multiple columns and accounting for browser chrome on 1024 screens to define an accepted ‘safe area’. But the 960 grid was born in a world of fixed-width layouts. If we’re building fluid designs, the simple reality is that your grid can be whatever size you want, because we’re concerned only with relative widths. The days of worrying about absolute widths have passed.

I should point out here that I’m not proposing a new framework. In fact, I’m not even saying that we should all start using grids whose containers are specifically 1000px. The point is that it’s about making our lives easier, and 1000px happens to be an extremely easy number to deal with.