A better Photoshop grid for responsive web design
Posted on 20 January 2012 • 90 comments
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!
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.
Caveat 1: margins
A small caveat is that the 1000px grid assumes you’re not bothered about gutters on either side of the container, which might bother some people depending on the way you do your column margins. I’ve included guides in the PSD to indicate where they’d usually be, if that helps. I expect some people will also complain about there only being six columns, but personally I like to keep things simple: nice big numbers and nice big columns. Adapt as you see fit.
Caveat 2: rounding errors
In Webkit browsers, an error with the way the rendering engine treats percentages means that although we’re dealing with whole numbers, the widths can actually appear as if they’re slightly off:
If you’re a pedant, this might keep you awake at night, but I tend to take a more pragmatic approach to web design and accept that a little inconsistency never killed anyone. In the example the misalignment is obvious because of the way the columns are shown, but in the real world it would barely be noticable, especially when dealing with ragged-right type.
I’d love to know if you find this useful!