Traducción a porcentajes de 960.gs para Responsive Design

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:

  • 960percent.css: Este archivo es el propio 960.gs pero con medidas en porcentajes.
  • text_percent.css: Para hacer texto con tamaños en porcentajes dependientes de 960percent.css. Tamaño de fuente inicial la que dé el navegador, se puede sustituir por el tamaño elegido, así como la altura de la línea.

Autor

Pedro Cabrera

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

Compartir

Comentarios

MikeNieva

18/7/2012
Cool
jaja lo voy a probar y te daré mi comentario. Muchas gracias.

MikeNieva

18/7/2012
Adapt.JS
También me gustaría saber su opinión sobre el script de Adapt.JS que viene dentro de la página de 960.gs; la alternativa me parece interesante. Abordar el Responsive Design a través de Javascript y no por Media Queries

Lucas arturo valle mejia

25/7/2012
Excelente!
lo he probrado y esta fabuloso, estoy muy contento con el FMW (frameWork), espero algun dia colaborar con algo de ser posible...

christian

14/9/2012
buena alternativo pero un error
Me parece una muy buena alternativa para aplicar el Responsive Design, te ahorra tiempo comparado con el proceso de adecuarte a un nuevo framework, solo una observacion, lo probe y si funciona bien al adaptarse a distintos "widths", PERO no me renderiza correctamente el layout cuando aplico una subclase "alpha" osea no me elimina el margen al inicio, si pudieran revisar eso por favor

jeffsantillan

03/12/2012
excelente
muy buen tutorial lo segui paso a paso, ya estoy empezando a implementarlo.
Saludos!

gustavo

03/12/2012
Problemas con 960responsive
saludos y muchas gracias de antemano. Voy al grano:
Estoy intentando maquetar un sitio cuyos <header> y <footer> tengan un ancho de 100%, para que ocupe toda la franja horizontal.
En 960.css normal es tan simple como poner ambas etiquetas fuera de cualquier <div class="container_12"> y asignarle la declaraciónwidth:100% al estilo de cada elemento.
Pero al cambiar la hoja de estilos a 960percent.css , pum, imposible, ni sacandolo fuera ni nada, supongo que será por la declaracion del min y max width de body.
¿alguien me ayuda?
Gracias!!!

sergio

16/1/2013
fluido, pero que pasará con las imagenes y tamaños de letras?
Este método es muy práctico, pero que habrá de hacerse a las imagenes y tipografias para que se redimensionen con la pantalla?

Nicolas Gonzalez

01/7/2013
Adapt.js
Buenas... me ha gustado mucho el tutorial, solo me queda preguntar como se instrumenta, paso a paso el adapt.js?

Muchas Gracias yFelicitaciones!