> Manuales > Maquetación CSS con 960 Grid System

Archivos CSS del framework CSS 960 Grid System, pero traducidos a porcentajes, en lugar de medidas en píxeles, pensando en el "Responsive Web Design".

En los últimos meses se aprecia cada vez más la moda por el llamado Responsive Web Design, que podríamos traducir libremente en español como "Diseño Web Adaptable". No es una tendencia pasajera, como podríamos deducir de la palabra "moda", sino una práctica cada vez más necesaria e imprescindible para la Web de hoy en día.

Por otra parte, para los que ya llevamos maquetando con CSS desde hace años, quizás estamos acostumbrados a usar complementos o ayudas como las que nos ofrece el framework CSS 960 Grid System (960.gs), que permite hacer la diagramación de una web de una manera rápida y sencilla. Ahora bien, esas herramientas que en su día nos solucionaron la vida, hoy se han quedado un poco obsoletas, dado que utilizan anchos fijos y por lo tanto no tienen la capacidad de adaptarse a las pantallas de los distintos perfiles de clientes que pueden conectarse a los sitios web.

En este artículo se ofrece un archivo CSS que he creado, que no es más que la traducción a Responsive Web Design del 960.gs. Dicho de otra manera y para que nos entendamos, se trata del mismo popular framework pero con medidas en porcentajes en lugar de en píxeles.

¿Por qué medidas en porcentajes?

El framework 960 Grid System tiene como medida fija del contenedor principal 960 píxeles. Ellos eligieron esa medida porque se adaptaba a la mayoría de las definiciones de aquel entonces, pues el mundo de Internet estaba dominado por usuarios con resoluciones de pantalla de 1.024 píxeles de anchura. Hoy ese panorama ha cambiado mucho.

¿Qué pasa con las personas que se conectan con pantallas de 1.200 píxeles, 1.400 o incluso de tamaños de hasta 2.500 píxeles? Pues que ven unos márgenes exagerados a los lados de la página. O sea, mucho espacio desaprovechado. Por otra parte ¿Qué pasa con los usuarios que se conectan desde un dispositivo que no llega a 1.024 píxeles de anchura? Pues que les aparecen habitualmente las barras de desplazamiento horizontal, tan poco deseadas por los diseñadores.

Si cambiamos las medidas a porcentajes, ese problema de las distintas definiciones de pantalla nos abandona, porque un porcentaje no es una medida fija, sino que es siempre relativa al tamaño de la ventana del navegador o la pantalla del dispositivo.

Nota: es cierto que en el esquema de 12 columnas de 960.gs seguiríamos con problemas en los dispositivos móviles, que no tienen anchuras de pantalla suficientes para verse bien todas esas columnas, pero con el mismo framework podemos usar menos columnas de las que dispone, pensando que se pueda ver bien en esos casos.

Si no entiendes todavía estos detalles acerca de la necesidad de usar porcentajes en lugar de medidas fijas, te recomiendo que veas los webcast que se organizaron en DesarrolloWeb.com sobre Responsive Web Design: Videotutoriales de Responsive Web Design.

¿Como usar estos archivos CSS?

Bueno, pues simplemente se trata de cambiar los archivos CSS que te descargas de 960.gs y sustituirlos por los que hemos puesto para descarga al final de este artículo. No hay más secretos.

Si quieres saber más sobre el framework 960 Grid System, te recomiendo que leas el manual de DesarrolloWeb.com: Maquetación CSS con 960 Grid System

Si no sabes nada, te recomiendo comenzar por la presentación de 960 Grid System y si avanzas en el manual, verás que luego hay incluso varios videotutoriales que te mostrarán su uso paso a paso. En definitiva, las clases del framework CSS 960 Grid System no las he tocado, por lo que el uso será exactamente el mismo, con la diferencia que estarás maquetando con porcentajes y tu diseño será adaptable.

Descarga del archivo CSS de 960.gs con porcentajes

Para finalizar, aquí puedes encontrar el archivo comprimido con el fichero CSS que te permitirá pasar a porcentajes tus diseños basados en 960.gs.

El archivo:

Pedro Cabrera

Desarrollador con experiencia en tecnologias Lamp, e inevitable amigo del front-...

Manual