So you’re designing a website and thinking : are there any universal proportions for columns, element placement and such things? Why do some websites look so good, while others don’t even though there’s nothing visibly wrong with them? Well the devil is in the details as usual, but lucky for us we have the internets and we can use the knowledge other people learned the hard way. The 960 grid system is one of those things. It’s a set of templates for both coders and designers (pretty much a template for any major software). It was initially designed as the my-own-design-aid kit like most of us do, but it has spread and that is because of two things:
1. 960 is just below the 1000 width that is right now the standard for websites. Sure in a few years it’ll go into being 1200 probably (since 960 is 1020 – 80, thus 1280 – 80 = 1200 but that’s just a guess, right?). And well, right now that width just works.
2. Sure typical subdivisions are boring and unimaginative. But we’re talking content here, not fun and games. And content needs to be delivered in a fashion that is easy to understand, navigate and doesn’t hurt the readers eyes. And by adding equal subdivisions and fitting the content in between identical larger parts, with identical margins and paddings, we achieve uniformity that the people are already used to online.
Of course the grid is not one of those universal things – there are websites that need more or less features and don’t need to be snapped to a grid at all. But in the case of informational websites it’s good to have a system. (there are others that we will write about later too).
What the author says is :
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns. View demo. The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.