For several years now the 960px grid system (960.gs) has been designers' favorite pick to help structure and design web layouts. As screens and resolutions have gotten bigger, I've found that the 960 grid system does not always fit my needs. 20px gutters and only a 940px content area is a bit too small for the modern web. While designing Themify, I found a new grid layout that works quite well for designing in this day and age. If you've never heard of 960 I've detailed both it and this newer gird system below.
Follow up post: The Simpler Grid
About The 960px Grid System
The 960gs is structured as follows:
- Total width 960px
- 12 columns @ 60px each
- Each column has 10px left & right margin which forms 20px of gutter space
- Total content area is 940px
The 960 gs is no doubt a very good grid system because of its flexiblility. It helps designers to quickly prototype the layout in any number of columns: 9 x 3, 3 x 3 x 3, 4 x 4 x 4 x 4, 10 x 2 col and so on. 960gs is probably the most popular grid system now and it has been used on many sites and design templates.
The Problem
The problem with 960gs is the gutter space and content width. Minus the margin space, the actual content area is only 940px. It worked well back then because most designs are set at 12px font size. These days most designs are set at 13px font size or higher. Since the font size has increased, don't you think we should increase the content area as well as the gutter space?
978 Grid
The grid that I use on Themify: 978px, 12 column @ 54px with 30px gutter space. I find it works quite well. It is still optimized for the 1024 x 768 display. I took out the left and right margins to maximize the content width. I increased the gutter width to 30px, so your content has more room to breath. The result below:
What Do You Think?
Darcy and I are considering the 978 grid as our standard grid for designing WordPress themes over at Themify. Do you think the 960gs is getting old and should we strive to come up with a better system? What do you think of the 978 grid? Post your thoughts.
Tips: this grid generator is very useful for generating variable grids.
Loading ...
I’ve been using an Adobe AIR application called BOKS to build my grids lately: http://toki-woki.net/p/Boks/ – it lets you specify a width, gutter size, column size, number of columns, etc etc. You might want to check it out!
But 960 is such a pretty number :(
I think the font size is not a problem, It depends on the current design.
Yep… 960 is an astounishing magic number.
I would rather consider a flexible approach to grids in terms of sizes… just convert 960px to ems… the great font-size: 62.5% allows to set the containing div to 96ems making it even easy to implement.
While I definitely believe the width must fit the project, I have recently been annoyed when trying to surf websites using a grid just a little larger than 960px on an iPad or netbook with 1024×600 resolution. The site is just a tad too wide and forces you to scroll left and right to see the content.
I do not see the point of designing just wide enough to be annoying to those at 1024 width and not wide enough to take advantage of the next full screen resolution (ie: 1280 wide).
When 1280 becomes the new 1024, I think it would be appropriate to increase the 960 default. But because 1024×768 is still a common resolution, I don’t think 960 should be retired just yet.
I’ve have no trouble using a grid based on the 960 one for the majority of projects. Its mentioned above about that annoying size that hits scrollbars far to frequently on tighter screens.
I’m a big fan of pushing graphics and such just beyond this size though, so that those on larger displays get a much more comfortable layout but those on tighter ones don’t see any horizontal scrollbars.
To clarify,
960 has 3 column width options.
12, 16, 24
So there is more that just the 12 col mentioned.
Check out fluid 960, it’s excellent.
http://www.designinfluences.com/fluid960gs/
Although I just used 980 on a site, I think 960 is still the preferred setting.
Also don’t forget about the growing percentage of people who are going to be using iPads and other tablets with a resolution at 1024 (or less).
That is a nice thought, the web does change very fast and 960 will get old sometime. But luckly it will be painless, since we can easily create new grid systems based on 960.
The lowest common denominator is 1003px in IE while other browsers allow for a bit wider widths – http://www.nealgrosskopf.com/tech/thread.php?pid=43
I think the best layout I’ve found so far is the 960 grid, 3 column at 300px with 20px gutter, combined with css media queries. Scales down to 640px 2 column grid (for ipads for example) and 320px 1 column grid (for iphones for example). You could extend this to 4 column 1280px width too for those lucky people with large monitors. Everyone wins.
Also standard 6×4 photos scale nicely in pro to 300px x 200px so they fit the grid too.
The current version of 960.gs allows you to customize all of the settings. I really see no need for this post other than it’s lead into a poll of if we believe 960px is a good size width for a website…
For me, I primarily use 960gs for blogs and simple business sites that I do for clients then rarely ever touch again. At my full time job, I use the Eric Meyer CSS Reset and go custom from there. So, it depends on the task at hand for me. I do like the 24 column layout though.
I just finished a theme using 960 and yes, it was a pain because I use a PSD design wich was exactly 960px wide, I had to do several corrections to make it fit on 960.gs
I also tried other grid systems but nothing better than 960 :(
960gs is still the best by far!
I’m the author of the The Golden Grid who is using 970px(960px + 10px first margin) default size and 10px gutter size. The beauty of the 960 number is that you can have hundreds of grid combination and that number is dividable with 1,2,3,4,6..12,16,24…
I think it’s a shame people would only use 960px of a screen while most screens are 1280 width plus. My idea, keep the default 960 for cranky old people and use a bit dynamic width up to 1280 to give users with a bigger screen an advantage.
I dont really use 960gs. You want to abandon 960 grid for a 978 grid? You gain only 18px (slightly more if you dont count the margins). What’s the whole point in doing that? Makes no sense.
If you want to expand the size, go well above 1000px.