Las causas de que este tipo de diseños se vean poco son varias:

• Desconocimiento. Si no se ve a menudo no existe y por lo tanto los desarrolladores no lo tienen en cuenta como una opción a elegir.
• Falta de soporte por versiones antiguas de Internet Explorer.
  La técnica no es en absoluto nueva, pero cuando surgió sólo podía funcionar correctamente en algunos navegadores.
• Dificultad. En este tipo de diseños es necesario usar porcentajes como unidad de medida, que no suelen ser tan exactos como los píxeles.

Hoy en día, con Internet Explorer 8 superando en porcentaje de uso las versiones anteriores de este navegador, es el momento de empezar a usar este tipo de diseño con la seguridad de que será beneficioso para la mayoría de usuarios y por lo menos, no perjudicial para los que todavía usan versiones antiguas de Internet Explorer.

Uso navegadores en España. Fuente StatCounter Global Stats

Explico a continuación los tipos de diseño o layout más utilizados y las ventajas e inconvenientes de cada uno.

Diseño fijo

Son aquellos en los que las medidas de los distintos bloques de la página se definen en píxeles. Son los más fáciles de llevar a cabo y los que obtienen unos resultados más fieles a los diseños.

Las Pautas para la Accesibilidad Web del W3C recomiendan utilizar unidades de medida relativas como los porcentajes o las emes, ya que algunos navegadores como Internet Explorer 6 y versiones antiguas de Firefox o Google Chrome, no pueden escalar los elementos de la página (hacer zoom) cuando se utilizan píxeles. Por otra parte, cuando los tamaños de fuente se definen en píxeles, en Internet Explorer 6 no se puede aumentar o disminuir el tamaño de fuente a voluntad, lo que supone una dificultad para personas con problemas de visión.

A estos inconvenientes hay que sumar que un diseño fijo cuya anchura supere la resolución de pantalla del usuario, no se verá completo en la ventana del navegador y aparecerán barras de scroll horizontales.

Hoy en día se usan mayoritariamente resoluciones de 1024 píxeles o mayores, por lo que el típico dilema de diseñar para 800 x 600 o mayor casi ha pasado a la historia, sin embargo, nunca podemos tener la certeza de que el usuario tenga la ventana maximizada o paneles que limiten la anchura de página.

Navegador con paneles

Diseño elástico

Los diseños elásticos son aquellos en los que las medidas de los bloques se definen en emes, de manera que al aumentar el tamaño de fuente, aumenta también la anchura de estos bloques, es decir, aumentar el tamaño de fuente provoca un efecto zoom sobre toda la página.

Las emes son una unidad relativa, y por lo tanto este tipo de diseños cumple la pauta anteriormente mencionada de no utilizar unidades absolutas, sin embargo en la práctica se comportan exactamente igual que los diseños fijos y tampoco están libres de problemas, aunque son una de las técnicas recomendadas para cumplir con las Pautas para la Accesibilidad Web.

La principal ventaja que tienen frente a los diseños fijos es que sí permiten aumentar el tamaño de texto y hacer zoom de todos los elementos de la página en navegadores antiguos. Los navegadores modernos pueden hacer zoom de página en cualquier tipo de diseño.

Diseño líquido

En los diseños líquidos la anchura de bloques se define en porcentajes, de manera que se adaptan a la resolución de pantalla del usuario ocupando por completo la anchura de la ventana del navegador. Como ejemplo tenemos la Wikipedia.

Los diseños líquidos funcionan bien en pantallas pequeñas, sin embargo en pantallas grandes dan lugar a líneas de texto muy largas que dificultan su lectura. La cantidad máxima recomendada de caracteres por línea es de 80. A mayor longitud, resulta difícil leer en pantalla sin perderse entre líneas.

Longitud excesiva de líneas en pantallas grandes

Diseño híbrido líquido-elástico

Estos diseños tienen las ventajas de los elásticos (anchos de línea óptimos y escalables en navegadores antiguos) y los líquidos (adaptables a resoluciones pequeñas).

La anchura de los bloques de contenido se define en emes y se añade la propiedad max-width de CSS que permite especificar la anchura máxima que podrá tener un bloque.

El resultado es un diseño aparentemente fijo, que se adapta a resoluciones menores y mayores sin que aparezcan barras horizontales de desplazamiento en el navegador.

Como ejemplo tenemos nuestro sitio web.

Diseño aparentemente fijo a una resolución de 1280 x 1024

Tamaño de texto aumentado en una ventana de 1024 píxeles de ancho. La anchura de los bloques se adapta a la ventana del navegador sin que aparezcan barras de scroll horizontal.

Layout adaptado a una ventana de 800 píxeles de ancho

Por supuesto, este tipo de diseño también tiene sus inconvenientes:

• Los porcentajes no proporcionan la exactitud de los píxeles.
• En Internet Explorer 6 la propiedad max-width no funciona y en Internet Explorer 7 lo hace de manera deficiente.

A pesar de estos inconvenientes, Internet Explorer 6 y 7 pueden seguir beneficiándose con los diseños híbridos de las ventajas de los diseños elásticos. Es un ejemplo perfecto de lo que se suele llamar Progressive Enhancement.

Cómo conseguir un diseño híbrido líquido-elástico

La clave de estos layouts consiste en utilizar emes como unidad de medida para los bloques contenedores y añadir la propiedad max-width de CSS para establecer su anchura máxima.

Suponiendo que tenemos un diseño de dos columnas, el bloque contenedor de ambas tendría un max-width del 100% y sus bloques anidados tendrían como ancho máximo el porcentaje relativo a la anchura del bloque que los contiene.

Ejemplo esquemático de un layout de dos columnas

El código que se utilizaría en la imagen del ejemplo podría ser similar a este:

#contenedor{width: 100em; max-width: 100%;}
#navegacion{width: 40em; max-width: 40%;}
#contenido{width: 60em; max-width: 60%;}

Para este sitio web hemos adaptado la CSS del sistema de retícula de 960.gs, reemplazando las unidades de medida en píxeles por emes y añadiendo la propiedad max-width para cada ancho de columna.

Esta técnica aparece explicada con detalle en el libro CSS Mastery: Advanced Web Standards Solutions, publicado en español por Anaya Multimedia como CSS. El capítulo dedicado a los distintos tipos de layouts se puede leer completo online en Web Reference.