Creating web experiences is a perpetual process. Having a team of skilled tacticians and established processes is paramount to success. This article examines how one framework, the 960 Grid System, streamlines time to launch from two different viewpoints: The designer’s eye and the developer’s expertise.   

The Designer’s Side

Web designers will tell you that regardless of how beautiful your site design may look as a jpg, the translation process from comp to browser will make or break your design’s success. For years, designers have relied on grid systems to create harmony and balance in their designs, and while they are invaluable and fairly easy to work with once set up, recreating that same structure in a browser is a challenge, especially when you factor in page rendering inconsistencies among browsers. That’s why a CSS framework like 960 Grid System is a godsend.

960 Grid System provides designers with a variety of templates that are pre-sized and contain guides set up to either a 12-column or 16-column grid layout. These templates not only help speed up the preliminary steps of design but also ease the hand-off to the developer, as the framework provides consistencies between the comps and the code. 

Not every web designer is fluent in CSS, HTML, PHP or other programming languages, so we often rely on developers or frameworks to see us through the coding phase of a project. However with the 960 Grid System, the framework is so carefully constructed and documented that it empowers a designer to tackle the front-end development of a project, only requiring minimal understanding of mark-up languages. It also gives designers peace of mind in knowing that the things we slave over, i.e. spacing and making sure everything lines up properly (imperative for a successful grid layout), are taken care of automatically via the framework.

The Developer’s Side

At some point, web developers end up reusing the same code over and over, repurposing it for different situations and applications. When it comes to front-end code, the most reused code is a reset CSS of some sort. Once a reset is created, most developers will rewrite the same CSS, modifying it to fit their current needs.

Enter the 960 Grid System. A CSS framework made to streamline front-end production, the 960 Grid System enables developers to build websites designed on a grid efficiently and effectively. Plus it requires the developer to use an object-oriented CSS, thereby meeting better web standards and fostering cross-browser compatibility.

Springbox’s most recent use of the 960 Grid System was on a comprehensive redesign of the Unicast website. The site design called for a width of 960 pixels, so it was an ideal candidate for using the grid system. Since everything was consistent from the beginning, days of time were shaved off of both development and testing.

In the end, the 960 Grid System is a win-win: you get fewer CSS errors and less time is needed for coding and testing. What more do you need to build a nice site quickly?

Art Director Phil Coffman and Developer Josh Kemmerling co-authored this article.