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 ...
@Anthony Alexander – Wow. Are you really trolling a web design site?
By instinct, I dont’t trust very much all about “systems”. I mean systems are not for everybody, ones will enjoyed it, others will suffered it. Standarts are easier to follow. I don’t like “grid systems” for css building, result isn’t as semantic as we need it (what I mean is our users need to understand how their product works), however I use it for mockups. It’s a reminder about decisions made on a project. It helps efficiently to keep the original idea intact for everybody involved on a same project.
Conclusion: useful on preparation phase, useless on production process.
I am re-desinging my website soon, I will try out the 978 format.
Should the horizontal line spacing be 30px too? Or is it recommended to keep the 20px spacing?
I’m really sick with the 960px grid. I have tried some layouts on my most resent site. 960px is too small. So I decided to go for 1280 screens.. and made my grid 1150px wide. I have some amazing results, but still it is a very very brave move. There is a data available about screen resolutions and you should go and search for it before making the decision.
For the author: you will always find people unwilling to understand change. There will always be someone to complain when change arrive. On the other hand, we – the designers, always seeks new ways to express our ideas. So I don’t really understand what is the core problem with your, should I say, proposal for new layout. You build it and you can monitor it. So at sometime in the future show us the results.
tnk you..
You solve my problem.Thanks for sharing with us
Hi there : )
About the idea of the grid system – As a web designer I’m not comfortable with that kind of grid systems at all … especially when the task is to create complex and flexible website. You just need to follow your visual grid …
About the minimum width – 990px is still safe for 1024 : ) Even 998 is safe : )
Greetings
Kris
My websites don’t have a specific “grid system” exactly. For a resolution of 1024 X 768 I find that a total width of 960px works pretty well. I create a page div of exactly this width and center it within the body. Everything goes right to the edges of this container.
My page header is 960px, for example. I came up with this width early on because it worked well with a variety of browsers even with differences in how they displayed the page. I actually had no idea that there was a 960px standard of any kind.
At a 1024 X 768 resolution I recommend going with this. At higher resolutions (which are now becoming more popular), I would adjust accordingly. The real question here is, who is your audience? What kind of resolution will they be running their computers at?
My customers tend to be people with really old computers. 1024 X 768 is likely to be their screen resolution. If your site visitors are people with wide screen monitors (gamers, people dealing with a lot of graphics, multimedia, etc.) You might want a site that is geared towards their needs instead. Pick your optimum screen resolution and figure out the maximum width that can be safely displayed on a variety of browsers. Everything else follows from there.
I am still using 960 standar, couse it is still most stable!
Company Web Design Solution is a Canadian company that specializes in design and development of custom web solutions. Swift Marketing Inc is an Internet marketing company providing several on-line services. including, web-traffic analysis and consultation, SEO (search engine optimization), search engine adverting (i.e. Google pay per click ads), ad-words management, e-mail campaigns, monthly newsletters, managed social networking solutions, corporate blogs, on-line multimedia & interactive video presentation, web- hosting and website maintenance.
Read more: http://www.companywebdesign.ca
well since based loosely on stats we can say about 20% of people still use 1024 by 768
most net books still use 1024 by xxx
on that note we can also say 14% of people still use IE6… So if your site has IE6 as a requirement you should damn well be sticking to the 960px since 978 is really pushing it that only allow 46px for the chrome (IE chrome default theme is 32px) and if a user is using a browser with a side bar on a netbook then game over
this is the classic 800 vs 1024 debate and I think the answer is still the same wait until its less than 10% of people using 1024 width and evaluate who will be using your site.
but they stop selling netbooks with resolutions of 1024 or below (width) you shouldn’t even be considering it
also what on earth do you need more than 960px for? that 100% cant solve
Thanks for your find. It wil be helpful for our upcoming projects to make them more expressive & impressive. Thx again for sharing this post.
http://www.freecssshowcase.com/
Consider the above link for your reference of more design inspiration & for the free CSS templates.
When you do article marketing, your intention is to increase the number of visitors to your website. It is not our abilities that show what we truly are, it is our choices. I have look for such a article for a long time, thanks a lot. http://www.uggsclassicboot.com/
Why not use the css generator that the 960gs website supplies? With it, you can create any number of columns, any width, any gutter width. Why relearn a whole new css gridding system when you could symply adjust the current one with a supplied online tool?
nice post, food for thought about page size. I think the safe bet right now is to stay with 960.
I didn’t even realise this 960 grid system existed until recently, but I’ve seen an awful lot about it for one reason or another over the past few days. Has it come to the fore for any particular reason?
I designed our site using a centralised 990px wide format. I used this because I thought this was somewhat standard, I’ve seen it about a lot, it works well with my 1024 monitor, even the BBC use it, I believe… and I love the BBC. Are people swayed towards the 960gs purely because of it’s compatability with the Golden Ratio?
maybe you want to get famous by starting your own grid system instead of embracing or using someone else’ 960gs.
that’s the right step for you and your gs. using it “wisely”.
cheers. :)
I never liked the 960 grid myself. Since I do both design and coding, trying to keep up with all the different grid classes seemed too much.
Personally, I keep all designs at 1000px or smaller, and keep elements within the design divisible by 10. This way I don’t have a 3px padding on the right, and a 8 px pad to the left and have to keep up with all of those.
At least with everything divisible by 10, I can keep pads even, gutters even, etc. If I really need room, then I can cut back to divisible by 5 or 2 when needed, but I try to keep it more simpler.
I used 960.gs for my site: http://www.mirkocianca.com and actually the space between columns is too little.