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 ...
For me the big issue is having clients that don;t fully understand the importance of content and write it off as something useless…god knows why, but, using a larger width for me means WAY to much whitespace half of the time so 960 is perfect. On the other hand, for personal things, i prefer 978, i find it is a little more asthetically pleasing (to me) with a little more space between multiple elements…So i suppose, the proper answer for me is it is dependent on the project…
Having said that…with the introduction of better support for CSS3 and a growing popularity of responsive design, one could argue that the system of choice will soon be just a matter of preference as more and more designers and clients catch the responsive wave, along with the rapid amount of users purchasing various types of devices for browsing, from smart phones to big screen TV’s…
The 960GS is still the best. Though today websites come with higher fonts or people use higher resolutions, this 960 system will fit into any kind of client browsers. It is good for web designer as well as browsers.
I found this 1140px grid that looks like it would work great. Obviously its wider, but is also fluid so it adapts for smaller screens. http://cssgrid.net/
There are a couple of things that I don’t like about any of the grid systems. Its practically impossible to use any horizontal lines. I also don’t understand why they aren’t built with equal left and right margins on the columns, which would help in this respect and also help if you had a column that was colored and you wanted to split the margin in two.
You’re asking the wrong question. Ask for yourself, does a regular computer user have a monitor as big as ours for higher resolutions or not. That’s really the only thing you are addressing about 960gs.
While 960 is a good benchmark for safe-width, I think that its too wide for most uses. For the same reason that people advocating 16pt type on websites are mostly wrong.
Remembering that line length should be around 50-60 characters for readability, if you are using 13pt type, your body column will barely fill half the width. That encourages people to go for 3 columns. I think this is bad. You could use bigger type, but this means a) more scrolling, and b) wider images in that column, if you want to use full width images, as most do.
The problem with wide images is that, aspect ratio being fixed, they are also taller. That means even more scrolling. A wide column with a portrait image in it wont even be visible all at once on a netbook, or a landscape tablet.
Given these issues, what arguments are there for going wider? so the logo can be bigger?
I think that the site width should be a function of content. So generally, two columns, in a third: 2-thirds ratio, should give you a width of about, oh…768. Which magically enough, is the width of a portrait iPad.
Boom.
768 is the new 960.
16pt on website is not wrong, its noted for a reason, readability. 16pt font means your line lengths will be shorter by character (same actual width). Shorter is not an issue, its longer line lengths that are hard to read because the eye has farther to trace back one the eye has reach the end of a line.
So yes, line length should not stretch the entire length of a 960 grid. That doesn’t make the 960 grid invalid. Any respectable designer would present the content with appropriate line lengths.
You argue that scrolling is an issue, yet you also argue for a 768 grid which forces all content into a more narrow space. Leading to more scrolling with the same amount of content.
A portrait iPad is NOT the screen size for the majority of users. Most users are using either 1024×768 or 1366×768. Where width is the dominant value. Therefore a wider grid makes better use of screen resolution than a narrow one. You can always make the primary content of a 960 fit into 768. But to limit the layout to 768 is counter productive.
LOL 768 is from old days of 800×600 as a safe mark. Stop trying to find The Meaning of Life in iProducts.
As a graphic designer turned web designer/ developer over the last 3 years… it seems to me there are too many –”standard rules”– when it comes to the layout… this is in response to many of the comments I’ve read on here (everyone seems extremely old-school)… Basically, the way I look at it, as long as the width is less than 1000px and more than 950px… who cares! this whole talk about standard column width and 12 column, 16 column is garbage. My #content and #sidebars are measured by the old eyeball, and what looks good to me, depending on the type of literal content I’m working with… I don’t know, maybe I’m just weird ;)
One important thing you ex-print guys need to realize is that everything needs to have some type of standard especially in development. This grid is to help people not only design BUT develop. This willy nilly outlook is what get’s developers like me looking at your front-end code pissy.
Yeah, 18px width really makes the difference in a 1920×1080 monitor.
This is nice blog to gain about your web services as well as my knowledge have to know about this grid system.we will come under that professional services only to reach the high position.we are the leading in services of web design company Madurai
Guys, there is NO standard, period. It’s up to each developer making a decision based on the clients need to set what width, font-size, text spacing, line-spacing, etc., that needs to be used. If a developer wants to use a fixed width, that is his standard. Personally, I am using the 960 grid system and will continue until the worldwide stats on browser display resolutions gives me the feedback that I need to move to a larger grid system. The one thing I have learned in my years on the internet, since the beginning, is that nothing stays the same for very long. :)
well 940px width is good for content…. but theres is a framework called skeleon now some designers use it. i dont like it . its too amateour. my fav still 960 gs. im wondering, is it possible to design full background template with 960gs? how?
Why is 990 not mentioned? I think its best to try to make the most of a 1024px width, the wider the better, with a small gap either side, so 990px fits nicely leaving enough room for the vertical scrollbars without the horizontal ones appearing.
I use 990.. If someone or something was to grant my wish today, I would wish for all browsers to be the same.
While I do think it’s important to keep to a grid system for aesthetics, it’s becoming less important to worry about the overall width. 960, 978, 1140 – whatever. What should really be embraced is responsive design. While it’s common now to find 1080p monitors on desktop computers, and laptops 1280px or wider, a bigger grid does make a lot of sense. However, more and more people are browsing the web on portable devices these days. Smartphones and tablets are where web designers need to focus the most, meanwhile keeping an attractive look for bigger displays. in 2012, there should be no reason why I can’t choose a 24 column 1860 grid and make it responsive for smartphones and old 800×600 CRT’s alike. Why not?
Mobile sites should be build completely separate from the normal site. I have never seen a responsive design the looks as nice as a design specifically built for mobile, and I have explored many.
In addition, I have never seen a mobile design that looks as nice as a normal site.
Mobile screens are just too small. No one, and I mean NO one, can design a nice mobile website. They all suck.
That’s another topic…
If you think we should make a separate design for mobile devices, then we should also probably use a 1140gs instead of the 978 for desktop computers and laptops ? Then make another design for smaller screens and so on…
Uhh, remember that necessity drives design, not the other way around. Without a need to accomplish something unavailable by the current design, why would you modify a system that works fine? And who CARES if it’s old? Also, it’s apparent that your opinion is of little matter or experience.
responsive design solves everything. grids are still useful but the really great sites just shift infinitely no matter how big or small.
At this point, 960 grid system is completely obsolete, as is the question posed in the post (not that this was the case at the time the question was posed). Regarding the discussion / debate going on in comments, Responsive Design is a necessity in modern web design that 960 gs doesn’t support, but that doesn’t mean that resp. solves everything – we still need a Grid, but it needs to alter it’s widths at various break points – but most importantly, we need more than just a grid.
Modern libraries consolidate many common UI patterns into useful libraries that give you a more robust framework for scaffolding your websites. This includes patterns such as grids and layouts, but may also include things such as progressively enhancing button elements, hover states, form elements, tables, navigation, typography, and interactive elements like carousels, modals and tooltips and they are built Responsively so that they work in common device resolutions / orientations.
Take a look at Twitter’s Bootstrap, Foundation (by zurb) and the Skeleton boilerplate for examples of what I mean.
I really think it’s a shame that as recently as 4 months ago, someone (Lenx, in a comment above) would brush off Skeleton as being “too amateurish”, while claiming that a scaffolding framework (960gs) that’s at least a full generation behind the times in terms of front-end development requirements and methodologies is “the best”.
Well i am not agree with your this statement.
I people, I’m from the future, and 960gs it still being used.
Hi!.,,Great, tips. I been doing a lot of SEO/SEM in the past and I was pretty sure I know everything about this field but with your article I realized you can still teach new tricks to old dogs. I’ll be reading your other posts.Thanks for sharing,,,
Yes this is right that grid system is getting old and we need to bring some thing new :)
Thanks
Inspiration all around, after reading this post :-) HATS OFF
We should bring some innovative systems instead of grid system .