Este artículo se escribió en 2001 cuando en la web solamente se accedía a través de ordenadores personales con monitores que tenían por lo general resoluciones pequeñas. Hemos actualizado el artículo para reflejar mejor el tema de las páginas fluidas en la actualidad, ya que el panorama ha cambiado bastante, y no solamente tenemos ordenadores, sino móviles, tablets, relojes, etc.

Si te interesas por el concepto de páginas fluidas el artículo te explicará bien de qué se trata, pero si quieres ver una visión más actual sobre el panorama de diseño web para distintos tamaños de pantalla y tipos de dispositivos sería ideal que te informases sobre el concepto de Responsive, aplicado al diseño web.

Una de las preguntas más habituales que se hacen las personas que comienzan a desarrollar para la web consiste en entender los modos de crear unas páginas web que se ajusten a la anchura de la ventana del navegador del usuario. Eso es muy fácil de conseguir, pues de manera predeterminada, los contenedores donde colocas los contenidos, como párrafos o capas, ocupan siempre todo el ancho disponible.

Por contra, también podemos hacer una página que ocupe siempre un tamaño fijo en su anchura, colocando los contenidos en contenedores a los que les ajustaremos la anchura, ya sea por CSS o por atributos HTML en los contenedores.

Actualmente se recomienda usar solamente CSS para temas como definir las anchuras de los contenedores. Nunca debemos definir el formato en los atributos del HTML.

Dejaremos para otras referencias la documentación de CSS sobre cómo hacer uno u otro tipo de página. Como esto es un manual de usabilidad, lo que nos interesa más es saber en qué casos son recomendables uno u otro modelo de página: fluida o de anchura fija.

Paginas fluidas: definición

Dentro del esquema general de una pagina web existen varias opciones:

• Que la pagina este centrada o justificada a la izquierda.
• Que la pagina tenga un tamaño fijo o se adapte al tamaño del navegador.

Cuando el tamaño de la pagina se adapta a las dimensiones del navegador tenemos una pagina fluida. Esta adaptacion se consigue haciendo las tablas que componen nuestra pagina con tamaños relativos (%).

Amazon.com es una pagina fluida, que crece a medida que la pantalla del navegador es más o menos grande.

En la actualidad Amazon crece hasta un determinado tamaño. No crece de manera indefinida, puesto que en ese caso se descolocaría todo. Es una tendencia generalizada en las páginas fluidas actuales, crecer siempre y cuando la página se vea bien y parar de crecer cuando ya la página empieza a ser demasiado ancha.

Ejemplos donde podemos usar páginas fluidas o no

Otros ámbitos donde se recomendarían páginas fluidas o de tañanos fijos son por ejemplo.

• Para noticias y texto intensivo es mejor el usar paginas fluidas
• Para paginas con texto y noticias es mejor el crear nuestras paginas "fluidas" ya que no perjudicamos la navegacion en resoluciones de monitor bajas (640x480) y si aprovechamos el uso de monitores con mayor resolucion al ofrecer mas informacion en la parte superior (menos scroll).
• Para aplicaciones "web" es mejor usar tamaños fijos
• En el caso de aplicaciones "web" tipo "web mail", "carrito de la compra" y formularios, es mejor usar paginas con tamaño fijo ya que en monitores con resolucion de pantalla superior a 1024 la distancia entre la informacion y los botones es muy grande y se pierda el contexto (botones situados en el margen derecho y el campo de texto en el margen izquierdo).

Compromiso entre ambos mundos en el diseño web

Esto no evita que podamos tener la pagina construida con zonas "fluidas" y zonas rigidas. Dentro de una misma pagina, zonas de botones y navegacion es bueno conservar el tamaño fijo y zonas de informacion es mejor ofrecer una solucion "fluida".

El inconveniente de usar tamaños "fluidos" es que el navegador Netscape tarda mas en pintar la informacion.

Actualmente ni existe Netscape pero en general con los ordenadores actuales y los navegadores modernos no existe una diferencia perceptible entre el tiempo de renderizado de un diseño fluido o un diseño rígido.

Para acabar, te recomendamos que estudies el concepto de Responsive Web Design que aplica de manera más actual a las corrientes de diseño web que verdaderamente debemos aplicar en la web.