En los inicios de la web, todo eran documentos casi planos, su desarrollo inicial no fue pensado para todo lo que encontramos hoy en día en un sitio, el primer sitio web, creado por Tim Berners-Lee y publicado el 6 de agosto de 1991 solo contenía texto y enlaces.

Lamentablemente hoy en día solo podemos ver una versión del mismo de 1992, donde ya se actualizaba en forma diaria, en http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html , pero como se puede ver las imágenes, los sonidos y el video no se consideraban en su diseño, aunque para algunos diseñadores que conozco ese sitio no tiene diseño.

Por otra parte, el uso de proporciones, la geometría  y posteriormente de grillas en la arquitectura, el arte y el diseño han estado presente desde tiempos pretéritos, pero no es hasta mediados del siglo XX, en donde surge el “Estilo Suizo”, de la mano de Josef Müller-Brockmann , quien se convierte en el principal líder y teórico del estilo,  que las grillas comienzan a utilizarse cada vez más frecuentemente, especialmente la reticular.

Al incursionar en la web, los diseñadores tratan de incorporar los conocimientos de grillas a la misma, lamentablemente, en sus inicios la web no lo consideraba, solo existía HTML; tomando desde lo que había, se empezó a utilizar las tablas, un elemento pensado para mostrar datos tabulados, como base para realizar y traspasar la grilla a la web, anidando tablas una dentro de otra.

Las tablas han sido la forma de grillar el diseño en la web hasta la aparición de las hojas de estilos en cascadas (CSS), que llegaron para complementar al HTML y lograr la separación del contenido (HTML) y el diseño (CSS), es por eso que en la actualidad se utilizan grillas realizadas en css.

960.gs

La primera grilla como tal que utilice, después del abandono de las tablas, permite distribuir el contenido del sitio web utilizando un ancho de 960px en 12, 16 o 24 columnas, este ancho es ideal para resoluciones de monitor de 1024×768 px, que en el tiempo donde apareció era la resolución estándar en los monitores.

Con la llegada de la multipantalla, los dispositivos móviles, y resoluciones mayores se hace necesario adaptar la grilla a este ambiente, esto se puede lograr con la utilización de la librería Adapt.js , que permite determinar la resolución actual para servir la versión de la grilla adaptada a esa resolución.

Unsemantic

El sucesor de 960.gs, es una grilla fluida, basada enteramente en porcentajes, utilizando clases como grid-50, grid-25 o cualquier múltiplo de 5, además de la posibilidad de dividir la página en tercios, grid-33 y grid-66.

Susy

Es una grilla fluida, viene de la mano de Compass, un framework de CSS que utiliza Sass, su sitio web señala YOUR MARKUP, YOUR DESIGN, YOUR OPINIONS | OUR MATH (tu marcado, tu diseño, tu opinión | nuestras matemáticas).

Las nombradas son solo tres sistemas de grillas que puedes utilizar en el diseño de un sitio web, ya sea a través de un CMS como WordPress o no.

Pin It on Pinterest

Shares