Unidad 7. Maquetación web (VIII)


7.9. Ancho de la página, líquido o elástico

Al crear el diseño de una web, básicamente existen dos tendencias: que la página ocupe todo el ancho de la ventana del navegador (diseño líquido), o que ocupe sólo una columna con un ancho fijo (diseño fijo).

No es que uno sea claramente mejor que otro, tienen sus pros y sus contras:

Diseño fijo.

En el diseño fijo, la página tiene un tamaño exacto, normalmente expresado en píxel. Esto facilita el diseño, sobre todo si está compuesto por imágenes divididas en trozos que deben casar perfectamente, ya que podemos posicionar todo de forma exacta. También nos permite controlar el ancho de los elementos de texto, no creando columnas ni demasiado largas ni demasiado pequeñas.

Por contra, no aprovecha bien el espacio. Pensemos en una página de ancho fijo, de 900px. Si un usuario la ve desde la pantalla de su teléfono móvil, que tiene un ancho de 320px, la mayor parte de la página no quedará visible. En cambio, si se ve desde un monitor panorámico de 24'', con 1920px de ancho, la mayor parte del espacio estará desaprovechado.

Como ejemplo de diseño fijo, tenemos la página de inicio de aulaClic.

Diseño líquido.

En el diseño líquido, en vez de unidades absolutas se utilizan relativas al tamaño de la ventana. Esto hace que la página sea más flexible a los distintos dispositivos de visualización.

Por contra, es más difícil controlar el diseño, sobre todo si se basa en muchas imágenes, porque hay que pensar en qué ocurre si la ventana es muy pequeña o muy grande, y que no se descoloque todo al cambiar de tamaño. También puede producir líneas de texto muy largas, lo que incomoda la lectura. Aunque el usuario siempre tiene la opción de hacer más pequeña su ventana.

Para intentar controlar un poco el tamaño de los elementos, existen las propiedades de estilo max-width (ancho máximo), min-width (ancho mínimo), max-height (alto máximo) y min-height (alto mínimo).

Un ejemplo de diseño líquido puede ser la página de este curso.

Diseño elástico.

Últimamente, se ha acuñado el término "diseño elástico" para el diseño en el que el tamaño de los objetos, no es ni fijo ni en relación al tamaño de la ventana, si no al tamaño del texto (basado en em), dando al usuario la posibilidad de cambiar su tamaño, y en proporción, el de todos los elementos. Aunque permite que el texto se controle, sigue sin adaptarse a las distintas ventanas, y resulta difícil controlar las imágenes.

 

Actualmente, la mayoría de las páginas ofrecen un diseño fijo, sobre todo si tienen un diseño más elaborado. Las que ofrecen un diseño más elástico, suelen mostrar una columna central elástica, que se adapta a la pantalla, y columnas con un ancho fijo, para menús o para la publicidad.

• Ejercicio propuesto la Unidad 7 • Prueba evaluativa de la Unidad 7

Enero-2010
Pág. 7.8

Atrás  Inicio  Adelante




.