A beautiful thing is never perfect. The saga of one GUI designer and his friend, the 960.gs

Submitted by: Wim Meeus on 21 December 2009

Comments: 0

When developing a complex web application like TenForce Execution, we regularly come across real live problems - the kind you don’t find in textbooks.

One of those is the flexibility to quickly add new pages.
We faced a set of issues:
 
•    We find ourselves repeating the same work over and over for each new page we design,
•    CSS and HTML are quite verbose, so loading times are way too high,
•    the (X)HTML and CSS-structure are too complicated.
 
Call 960

After some investigation a solution presented itself in the form of the 960 grid platform. Here’s what it says in its sales pitch:



"The 960 Grid System was created by Nathan Smith as a way to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. The 960.gs (or any CSS framework) was primarily developed for rapid prototyping, cutting down on repetitive and tedious tasks, but is also more than suited to be used for any web design project.
It will give your site a structured and solid foundation for you to build and style your design upon
." (Taken from DesignerDepot)


The 960.gs seemed to be the solution we were looking for:
 

  • highly scalable

  • low loading times
  • a basic and easy structure
     

When creating the first design mockups, everything still looked peachy.
The first screens looked great and together with an increased usability and new functionalities this created high hopes.


 

960-1960-2960-3

(click images to enlarge)


Reality bites. Hard.

Once starting up the first test screens it became harshly clear this was just an illusion. Some major issues popped up:
 

  • A basic 960.gs does not have a proper solution for a fluid layout, or at least the presented solution did not fit our requirements.

  • The design breaks when using a sidebar.
  • There is a limitation on nested grids.
  • Cross-browser compatibility is not 100% (our good’ol IE6 friend)


     

Fluid Grid to the rescue. Well, almost.

For the fluid issue we quickly stumbled upon a solution presented by the people at http://www.fluidgrid.net.
 But again, as is the 960.gs, the Fluid Grid solution is a prototype so not everything is how we need it. Nevertheless it got us on back on track.


The question arises whether to continue with the gridded approach or not?

Currently the jury is still out. We started a new investigation and our engineering team came up with some nice solutions.
 

  • We get the fluid layout to behave the way we want it to behave.
  • The cross-browser issues seem to be covered (for now).

  • We created a solution for unlimited nesting.
  • This gives us the solution for the sidebar issue as well.

     

So, at this point in time we still are working with the gridded approach.
We embraced the minuses and made them better.

To be continued...