Cien por ciento divididos : Grid System y su secuaz el Layout
¿Qué es un Grid System?
No existe nada peor que un artista con un lienzo en blanco.
Desde los inicios de la impresión, el sistema de grillas comenzó como un ayudante de líneas para el diseño de libros, pero es en la época de la revolución industrial dónde el uso de grillas tiene su mayor demanda, las imprentas comienzan a hacer uso de las mismas con el fin de incrementar la producción en masa.
En palabras muy simples Grid System (sistema de grillas, en inglés) se usa para dividir una página en pequeños y espaciados segmentos.
El proceso que sigue el diseño de cada producto, tanto web ó aplicación móvil, comienza con la elección de un Grid System, en particular, ésta elección no sigue reglas estrictas, siempre va a depender de que se quiera del producto.
Si bien los Grid System, no siguen reglas estrictas, es relevante saber que estos grids usan conceptos de matemática y se pueden manipular dinámicamente.
¿Qué significa?
Hagamos un ejemplo de cómo se armaría un Grid System simple de 12 columnas.
Si tenemos una pantalla de 1200px, entonces usaremos el contenido al 100%
Al tener el 100% del contenido de la pantalla, necesitaremos dividirlo en pequeñas secciones para tener una estructura mejor ordenada, entonces es ahí cuando empezamos a armar nuestro grid, para hacer el cálculo del ancho las columnas, utilizaremos la siguiente fórmula:
La unidad de medida de las cajas de nuestro grid será columnas. Dado de que nuestro grid consiste de 12 columnas, nuestras cajas pueden medir “1 columna”, “2 columnas”, “3 columnas” y así sucesivamente hasta llegar a “12 columnas”. Veamos paso a paso, cómo se calcula el ancho de nuestras cajas, con un ejemplo:
Si nuestra caja mide “6 columnas”, nuestra fórmula será: (6/12) * 100, el resultado de esta operación es 50, por lo que nuestras cajas de “6 columnas” medirán 50% del ancho total.
Visualmente esto se representa de la siguiente manera,
Nuestros cajas ahora medirán 50% cada uno, y así sumarán un 100%, que en columnas serán 6 + 6 para que sumados sean 12.
Entonces hagamos la matemática para tener los valores de las columnas del 1 al 12:
12 columnas = 100%
11 columnas = 91.66666666666666%
10 columnas = 83.33333333333334%
9 columnas = 75%
8 columnas = 66.66666666666666%
7 columnas = 58.333333333333336%
6 columnas = 50%
5 columnas = 41.66666666666667%
4 columnas = 33.33333333333333%
3 columnas = 25%
2 columnas = 16.666666666666664%
1 columna = 8.333333333333332%Con estos valores podemos empezar a armar el grid, siempre teniendo en cuenta de que la suma del ancho de nuestras cajas (colocadas de forma horizontal) ocupen el 100% del espacio, en una grilla con espacios variados se representaría de la siguiente manera:
Con esto tendríamos un Grid System, con el cual podríamos jugar con el espacio y empezar a armar una estructura de diseño.
Tipos de Grid
La grilla manuscrita es la grilla más básica, está hecha de un rectángulo que define los márgenes del formato.
Una grilla de columnas, como se indica, está dividida en columnas y es probablemente el tipo de grilla más usada.
La grilla modular, que está conformada de columnas y filas que no solo le indica las ubicaciones x de sus formularios, sino también guías en el eje y.
El último tipo de cuadrícula se denomina a menudo una grilla jerárquica, aunque es una especie de “catch all” para las cuadrículas que no encajan en las categorías anteriores. Una grilla jerárquica se describe por no tener el mismo espacio entre los módulos.
Usando una Grilla
El punto es trabajar creativamente dentro de la grilla, pero también liberarse cuando sea necesario.
Incluso un grid simple le da mucha variedad en la colocación de su contenido. Utilizando los módulos como base para áreas de contenido más grandes, crea la alineación y el equilibrio en su diseño.
¿Qué es un Layout o una Estructura?
Repasemos un poco de historia sobre como se trabajaba antiguamente con layouts, los sitios web normalmente se dividen en cabecera, menú, contenido y pie de página, que actualmente son los tags <header>,<nav>,<body>,<footer>.
Anteriormente no existían estas etiquetas, y en algún momento ni siquiera existían los divs.
Por ese motivo las páginas web antes se trabajaban con tablas, esta estructura se sigue manteniendo, sin embargo con la llegada de CSS tenemos la ventaja de hacer una mejor estructura.
Y con la mejora de HTML, tenemos etiquetas más semánticas que nos ayudan a mantener la estructura, y a usar las tablas para lo que fueron creadas, que es para tabular data.
Estas son unas ventajas de usar CSS en vez de tablas :
- Mantenimiento: una página diseñada exclusivamente con CSS es mucho más fácil de mantener que una página diseñada con tablas. Cambiar el aspecto de una página creada con CSS es tan fácil como modificar unas pocas reglas en las hojas de estilos. Sin embargo, realizar la misma modificación en una página creada con tablas supone un esfuerzo muy superior y es más probable cometer errores.
- Accesibilidad: las páginas creadas con CSS son más accesibles que las páginas diseñadas con tablas. De hecho, los navegadores que utilizan las personas discapacitadas (en especial las personas invidentes) pueden tener dificultades con la estructura de las páginas complejas creadas con tablas HTML. No obstante, diseñar una página web exclusivamente con CSS no garantiza que la página sea accesible.
- Velocidad de carga: el código HTML de una página diseñada con tablas es mucho mayor que el código de la misma página diseñada exclusivamente con CSS, por lo que tarda más tiempo en descargarse. En cualquier caso, si el usuario accede al sitio con una conexión de banda ancha y la página es de un tamaño medio o reducido, las diferencias son casi imperceptibles.
- Semántica: aunque resulta obvio, las tablas HTML sólo se deben utilizar para mostrar datos cuya información sólo se entiende en forma de filas y columnas. Utilizar tablas para crear la estructura completa de una página es tan absurdo como utilizar por ejemplo la etiqueta
<ul>para crear párrafos de texto.
Entonces, ¿estamos listos para comenzar a hacer nuestros sitios web?
