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 use 960 Grid, but wonder if it will soon change, since the avarage screen resolution is now 1280 x 1024 pixels and higher.
Should we start a 1240 Grid?
This is the very question I am struggling with now. For 960 or 978 work well with the more predominant 1024 resolution of the public web. However, internally (at my company), we’re all on machines with at least 1280. Feels like we DO in fact need a higher grid system.
There is a responsive 1140px grid system out there, highly recommend people check it out. http://cssgrid.net/ “Fluid down to mobile” – Ideal for many projects and with a bit of tweaking you can create your own column widths.
Thanks Richard,
I am building a new website using 978 and 1140.
I don’t get it… I mean; if it’s too tight, why not add a few pixels (i.e 20 -> 24) INTO the 960gs gutters? Do we really have to fill every pixel on the available (screens) area?
I thought the whole point of wide-screens stuff is to gain more white space so we can be more comfortable in reading & digesting the contents. Not to treat it as “Empty Lot – FOR SALE” or sort of. Then again, this is just my thought ;-)
I agree. Just because there’s more real estate doesn’t mean we need to fill it up. Personally I enjoy a wider screen so I can have multiple programs up and have them side by side. or maybe 2 browser windows I feel like the extra space is for the user to do with what they want. Not for the website to utilize (unless it’s going to be absolutely cool!)
I agree with Fidelity. But I think it depends on the project. There are certain kinds of projects that benefit from more space available.
However, I believe the best approach for interface design right now is to be concerned with less, and not more stuff. Less space, less content, smaller screens.
Design now must be neat, straight foward. We must be good at taking the right stuff off, and not at occupying the pixels on the screen.
According to web browsing statistics – http://gs.statcounter.com/#resolution-ww-monthly-200807-201109 – only about 20% of the web users use 1024px width displays, and this is fast declining, and 1366 will quickly become the most used width. And still so many web pages are designed around fix-width layouts of 960px.
I believe designers should seriously start considering adapting to the real sizes of their users’ screens. Be creative. Think of web pages as something horizontal rather than vertical. Think adaptive layouts. Think. Do not copy what is already old and doesn’t suit most of us.
960 still rules for me. If you use grid system generator, you can input desired gutter width and download the template.
http://www.gridsystemgenerator.com/gs01.php
Well, 960.gs is great (yet), but it hasn’t got enough space. The problem is that the 1024×768 monitors are still used widely (14% of all users use this resolution).
Our hope should be in the future predictions. Probably in about 2 years only 3% will use 1024×768. So it won’t be so problematic for us to use a grid system optimized for 1280×1024 or something like this.
I believe it depends on how much content you have. Many sites don’t need to use 960px or 978px for the width.
I think the main reason why 960gs is getting outdated is not the bigger displays but the smaller ones, the tablets and smartphones.
Can you please explain this remark? I would think the reason to keep the 960gs is because of the smaller mobile devices. That’s why I’m downsizing my original design for 1024 monitors.
I think he means the size should be smaller, due to the fact so many people are using smaller devices to access the internet.
I feel this grid system is so out dated not even funny.. I have used my css files to move all my content around .This is a poor mans way of design! I vote dump this old crap and move on to new ideas.
I’m currently designing a theme for my website and I’m using 960gs with 12 columns. It works great and looks good. But I also think it’s getting out of space.
So I’m thinking of changing to a modded 960gs created using the Grid System Generator. This new grid would be:
1008px ~ 24 columns ~ margin left: 4px ~ margin right: 4px
This way a full grid_24 will be 1000px width, the side margins are just 4px (for me more than enough) and in between grids I’ll have 8px of space (which I think is enough too).
And about creating a new grid system. I’ve been noticing that most of the new monitors that come out, including 19″ monitors and higher, are 1080p. So I think that if a new grid must be created, it should be adapted to that resolution.
Greetings!
Great article. I really appreciated it tremendously. Having a very difficult time deciding on revising the width of our website which was apparently using a 960GS which I was unaware of at the time. I was disappointed to see that others seemed to have just a little more real estate regarding width. I was about to do a redesign to get me towards 990 until I read this article and even hesitate on the 978GS.
I use a 7″ reader, which is becoming a very popular standard. Many netbooks have 10″ screens and have 1024×768 resolution. Now you can increase the resolution to 2048×1536 in a year or two but for a portable device, the physical dimensions really need to stay around 9-11″ max. While the text will be crisper, the viewing area really cannot be much larger than what 960 provides at the standard DPI. 978 is just a bit too small on my 7″ screen, even if the pixel density becomes greater. The 960GS is about as small as it can go until trying to click on text links just doesn’t work well.
If you’re curious, this is my legal advice website that I’ve had up for quite a while. You can compare the others. Our leading competitor is sticking with 960GS while the other uses the 978GS that looks nice on my big monitor but not so great on the 7″ reader and not great on the netbook which we place the taskbar on the side to maximize the vertical viewing area. Just some thoughts on compatibility. Perhaps the 960GS is still optimal for all purposes even if it is a tad tighter.
i Steel prefer 960……px
14% of users who have 1024×768 screens (Jan 2012), by choice or not, will have to scroll horizontally.
The Web evolves and you need to use it, Intel provided speed in their CPU’s & MS & others used the speed.
I design for the current overwhelming 85% of browsers that are higher than 1024×768.
Its how we make it better! Those stuck in the past will wonder why the sites looks rubbish, and realise that they have a cac browser. Its not rocket science!
Those who don’t have a choice (company etc..) can pester their boss.. Simple.
e creado una extensión para google chrome, es una buena herramienta pata medir grid de 960px http://goo.gl/N4rkv
The 960 grid system works great for us at the moment but that is because a lot of our clients are still using 17″ CRT monitors. Now they are still using that because A)Small Rural Communities B)Farmers C)Just don’t know what they are missing.
Because of this the 960 grid works great especially with how easy it is to maneuver blocks around when you do shrink a website for mobile devices. Mobile is the new web, people are wanting all their content delivered on their iPad’s, Xoom’s, etc.
I recently developed my own solution that has worked pretty well on several projects. Now, I am in the process of redeveloping some older projects with the new 1080 basis.
Woops, forgot the website. 1080.gs. Enjoy!
We use the 960 grid for development reasons but are learning that the 960 grid might not be best for mobile devices. Also, I agree with the author, it might be getting a bit old.
This grid system is also great and generates PSD files: http://gridcalculator.dk/#/978/12/30/0.
I also agree that 960 is getting small, but also think that small (or “responsive” is the new trend nowadays. If it was hard thinking of websites for a variable width in the past, now we have to get used to creating websites for all kinds of widths now, with more and more conditionals depending on screen size.
Hope it helps!
Cheers,
jw
Ok found this page by mistake but felt i needed to comment, 960 isn’t the only choice with that system. 960 comes with some other screen sizes if you explore a bit since there’s grids built for 1560, 700 and some others that I saw when i downloaded the system for a whirl at using it in wp :P so grid960 isn’t that bad especially if you do use their adapt js to resize it when needed