Traducción a porcentajes de 960.gs para Responsive 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.

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.