A Better Grid System to Design on

6 Dec 2010 - 4:32pm
5 years ago
2 replies
3640 reads

Some of you might be using the 960 grid system or some other grid system to do your designs. I just wanted to share with you a grid system that has worked really well for me. The 970 grid system is 970 pixels wide, the ideal maximum width for 1024x768 screens and up. It also loses the extra gutters on the ends of the grid allowing you to line things up to the edges of your website. It also uses smaller gutters making your margin whitespace look and feel better. I'd be interested in hearing your thoughts on this system. Thanks.

Here's the link to the article: Wireframing Effectively on the New and Improved 970 Grid System


8 Dec 2010 - 3:06pm

Since you refuse to publish my comment on your blog, I will post it here.

Your proposal offers little benefit, and severely constrains the flexibility of the 960 system.

Firstly, 20px margins are *not* necessarily the standard. The margins can be whatever you’d like. The following equation governs the relationship between number of columns (N), margin width (m) and column width (w).

w = 960/N - m

You will observe, for most multicolumn layouts, any integer margin width will produce an integer column width. 960 has prime factors 2, 3, and 5, which make it very versatile.

However, your 970 column width is given by this equation:

w = (970 + m)/N - m

In this equation, only a few integer column widths correspond to integer margin widths for most multicolumn layouts. For 12 columns, valid margins widths are 2, 14, or 26. For 16 columns, valid margin widths are only 6 and 22. 970 has prime factors of 2, 5 and 97, which is much less flexible.

Secondly, you state a 940 pixel width is “far too small for the screen resolutions of today’s computers.” And 970 is a vast improvement? 30 pixels is 3.19% of 940. I would challenge whether given user testing of designs with a 3% increase in width demonstrates preference for the increase.


8 Dec 2010 - 3:41pm
Josh B Williams

Sounds interesting. There are a few sites using 980 grids too[1]. Seems like many people are using the 960 grid simply because 960 is divisible by so many different combinations. I am not sure 10 or 20 pixels does that much, espcially when viewing on a larger HD display.

I think the real question we need to ask as a community is, when will it be time to depart from low-resolution screens? The analytics are falling on 1024 just as they did on 800 by 600. There are many people accessing the Internet from their phones, tablets, and even televisions.

It seems like the real solution is to design to the viewport instead of the lowest common denominator in web based interactions.

[1] apple.com, vimeo.com, adidas.com

Syndicate content Get the feed