Blog Feed
We've watched with interest over the past couple of years the effect that ever increasing screens and resolutions have had on sites and web designers alike. For several years now we have been conforming to what web designers call the 960 Grid System (gs). And what a great system it is too. The 960 gs gives us designers flexibility and helps to quickly prototype the layout in any number of columns: 9/3, 3/3/3, 4/4/4/4, 10/2 col and so on. It is no doubt the most popular recent grid system and is used on many sites and design templates.
The 960gs is structured as follows:
As we mentioned just a minute ago with screens and resolutions getting bigger, the 960 grid system won't always fit the designers needs. For starters a 20px gutter and only a 940px content area is becoming too small for the modern web. There is an argument though that this margin space helps visibility on mobile devices such as the iPhone and iPad. Technically, if there is a margin required, it should be applied on the container, not the columns.
Well to start with this article was first inspired by Nick La of the WebDesignerWall → writing a post on how the 960 Grid System is Getting Old →. Nick put together a new formula of a much more modern 978px grid system which gets rid of the sometimes unnecessary left and right margin. As a result, the content width is increased by 38px. The gutter space has incresed from 20px to 30px. It still fits in the 1024 default display and the columns can be divided in any number of ways: 1/11, 3/3/3/3, 4/4/4, 3/9, etc.
What wasn't included as part of the interesting article were PSD files for all us designers that want to work off of the grid. OK it's not hard to create is it but surely it'll be great to have a pre-made file for you to download and use so that's what were providing. So enjoy getting used to something new.
As Nick says "Don’t force your design to fit to a grid that hinders your creative genius". We completely agree with that statement. You might find that your designs / clients still need to stick to the 960gs but how about trying this new layout you might find it just works.
UPDATE - 08/11/2010: Look into the 1140px CSS Grid System too. The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.
Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.
Scrap 1024! Design once at 1140 for 1280, and with very little extra work, it will adapt itself to work on just about any monitor, even mobile.
UPDATE - 20/12/2010: Checkout out our write up post for the 1140 Fluid CSS Grid System
