Implementing a grid system into your existing site
Way back last year I was asked to implement a grid system by our UX guy into our many sites at Johnston Press. The reason for this was to aid in the rollout of many more verticals that were to fit into our current page layout over the next year.
Our current sites had a content width of 986px which did not lend it’s self to be divisible by any small useable grid size.
Working closely with our new UX (User Experience) guy he came up with a thought behind this. Having used grid systems many times before for other clients it was quickly aparent that expandability was so much easier and friendly when using a grid system. If you plan on having a fairly static site that will probably not need any major overhall / functionality added in at a later date then this may not pose any major problems. That aside, using a grid system can add to the feel and useability of any design.
Trawling through the web there are plenty of tutorials online suggesting the best grid system, 960 or 1140 etc. Ours was simple, it had to be because there were so many potential projects that could go into this design some of which had API’s from 3rd parties that until the project had been agreed it was difficult to know what parts would be available and most importantly if that would fit into a solidly defined grid system. In the end we came up with a grid that essentially divided into 8px. The main content area was increased from 986px to 992px then the padding and margins that were ranging from 6px to 16px (and all in between) were changed to 8px and mutliples of, tidying up all the random edges.
The result of this not only the gain in 6px to the overall content width from 986px to 992px (but still easily viewed on most available screen resolutions today) but all the random margins and paddings that exceeded this were brought down to the 8px grid size giving a much larger and well defined column size for the major parts of our content. Untill then the right hand column (generally regarded for use with secondary content and some advertising) was taking up more of a page premiuim – now we could get more core content into our sites before the fold of the page and give ourselves greater scope for newer projects to fit into.
This relativley simple approach was easy and quick to implement taking less than a day to code for the main content holding areas and the same again for a complete regression test of the sites. The rest of the sites smaller sections will eventually all follow inline and become part of the grid system going forward – a task anyone should consider if in a similar situation.
Any thought’s on this article, have you undergone any similar projects and do you see the benefit of a stable grid design? Comment below if you would like to share your thoughts.