Posts Tagged ‘grid’

Elsewhere: A better Photoshop grid for responsive web design

Wednesday, February 8th, 2012

I’ve been coding for over twenty years now, and I still hate math. With responsive designs, you end up with a lot of awkward numbers. Thankfully, Elliot Jay Stocks has provided a handy little PSD for designing for responsive grids in Photoshop.

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!

Check it out.