Tipos de layout en diseño web

La layout o plantilla es un esquema de la distribución de los elementos dentro de una página web. Se compone de una serie de bloques de ciertas dimensiones en los que se colocará el contenido. Estos bloques suelen trazarse a través de etiquetas HTML comunes, como div, o semánticas, como header, nav, section, article, aside y footer, incorporadas en HTML5.

Elegir una forma de disponer los elementos en la página es determinar de qué manera navegarán los usuarios, por lo que es importante tomar la mejor decisión. Si bien las layouts tradicionales siguen vigentes, cada vez nos encontramos frente a más variantes. Conozcamos algunas de ellas, clasificadas por la unidad de medida que usan para calcular el ancho.

Líquida/fluida. Un mismo diseño que se expande hasta ocupar todo el ancho de la pantalla, sin importar el dispositivo. El usuario verá la misma disposición de columnas tanto en un smartphone como en un monitor grande: lo único que variará será el ancho de las mismas, que será relativo a la pantalla (expresado en porcentaje).

Líquida/fluida. Un mismo diseño que se expande hasta ocupar todo el ancho de la pantalla, sin importar el dispositivo. El usuario verá la misma disposición de columnas tanto en un smartphone como en un monitor grande: lo único que variará será el ancho de las mismas, que será relativo a la pantalla (expresado en porcentaje).

Fija. El ancho del diseño es siempre el mismo (expresado en píxeles), asegurando que cada elemento tenga exactamente el tamaño que queremos, pero sin poder adaptarse a todos los entornos (en una pantalla más chica habrá que hacer scroll horizontal, y en una más grande quedarán espacios vacíos).

Elástica. El diseño se adapta al tamaño de texto que el usuario haya configurado en su navegador: si decide agrandarlo o achicarlo con respecto a la fuente original, la layout variará en consecuencia. La unidad de medida es el em.

Absoluta. Se mide en unidades habituales en medios impresos, como milímetros, centímetros o pulgadas. Muy poco utilizada.

Equiparada. La función calc de CSS permite establecer anchuras a través de una operación aritmética que combine distintas unidades de medida, así sean fijas o relativas. Así, podemos hacer que las dimensiones de un bloque dependan tanto del ancho de la pantalla como de un elemento de tamaño invariable que colocamos al lado.

A estas opciones hay que sumar todas las que permiten las media queries de CSS3, base del diseño responsivo, a través de las cuales podemos modificar el diseño de acuerdo con el ancho de la pantalla del dispositivo, su orientación y colores, entre otros factores.