Normalmente no suelo usar frameworks para desarrollar sitios, pero para evitar complicaciones y problemas de compatibilidad esta vez decidí usar el "960 Grid System".

Para empezar, antes que nada un framework es una estructura de soporte definida en la cual otro proyecto de software puede ser organizado y desarrollado (Wikipedia ™).

Este sistema se basa en un ancho de página de 960 px, el ancho ideal según muchos diseñadores. Lo bueno es que este ancho es perfectamente divisible entre 12 o 16 columnas con lo que podremos ir combinando diferentes anchos y estructuras a lo largo de la página sin problemas.

El framework nos facilita la taréa de crear la página dandonos todo el código CSS necesario para que vallamos creando las distintas columnas en nuestra web de forma que todas queden perfectamente ordenadas en su lugar y con un margen de 10 px por los lados. Lo que hace que cada columna tenga una separación de 20 px.

Este sitio

Como podéis ver esta web encaja a la perfección en los 960 px de ancho. Yo he usado el sistema de 12 columnas, aunque se puede usar también el 16 e incluso combinar ambos sin ningún problema.

Como podéis ver la cabecera estaría dividida en dos: una primera parte para el logo con 7 columnas y 5 columnas para los enlaces de la cabecera.

Luego al contenido principal le he dejado 8 columnas y al sidebar 4.

Para que os hagáis una idea de lo fácil que sería crear un estructura básica os muestro el código html necesario para crear una similar a la de este blog.

En fin, está claro que facilita la tarea al diseñador ahorrando este el tener que escribir cientos de lineas de código. El problema de este sistema es que muchas veces nos encontramos muchas lineas de código que no vamos a utilizar por lo que por un lado nos ahorramos el tener que escribirlas pero por el otro sobrecargamos el sitio de código innecesario.

Si os gusta el sistema y queréis probarlo podéis descargarlo el ZIP desde aquí. Viene bastante completo con templates para Photoshop, Fireworks, Visio y Omnigraffle; un archivo PDF ideal para imprimir y crear nuestro diseño sobre papel y por supuesto el archivo CSS y una demo en Html.