Diseño líquido CSS (fluido) frente a responsive-design. max-width, min-width, max-height, min-height (CU01053D)

Una primera aproximación o intento de resolver este problema es el denominado diseño líquido o fluido. Se dice que una página web tiene diseño líquido cuando la anchura de sus elementos está definida utilizando porcentajes. Supongamos que tenemos una cabecera cuyo ancho fijamos en el 100 %, una columna lateral cuyo ancho fijamos en el 25 % y una parte principal de contenidos cuyo ancho fijamos en el 75%. El resultado será que al visualizarse en distintos dispositivos la anchura de los elementos será un porcentaje de la anchura disponible. Veamos algunos ejemplos:

Supongamos que establecemos un ancho “fijo” para nuestra página web de 900 px y que para el contenedor que conforma la columna lateral definimos #columnaLateral {widht: 225px; } y para el contenedor del espacio principal definimos #espacioCentral {width: 675px;}. Con estas reglas decimos que el diseño no es fluido porque no se adaptarán al ancho disponible de pantalla. En la TV Full HD de nuestro ejemplo el ancho disponible es de 1920 px, mientras que el ancho total que ocuparemos con la definición indicada es de 900 px. Esto supone que 1920 – 920 = 1000px de la pantalla del televisor quedará libre, con lo que la sensación será que la página web se ve muy pequeña y se desaprovecha la pantalla.

Por el contrario, si consideramos el iPhone del ejemplo, su ancho disponible es de 640 px mientras que nuestra página web tiene 900 px de ancho. Como la página web no cabe en la pantalla, aparecerá cortada y para poder ver las partes no visibles aparecerán unas barras de scroll. La sensación será que la página web se ve muy grande y cortada.

Pasamos ahora al diseño fluido. Para ello definiríamos las anchuras en porcentajes. Fíjate que siempre hablamos de anchuras porque se entiende que las páginas web en vertical son muy largas y el usuario ya está acostumbrado a tener que subir y bajar por ellas. En cambio, tener que moverse lateralmente es algo que suele considerarse “desagradable”.  En el diseño fluido definiríamos los anchos de esta manera: para la columna lateral #columnaLateral {widht: 25%; } y para el contenedor del espacio principal #espacioCentral {width: 75%;}.

Parece una solución ideal. Ahora el tamaño de la página web se ajustará a la pantalla y no se desaprovechará ninguna parte de las pantallas grandes ni aparecerán barras de scroll lateral en las pantallas pequeñas. ¿Qué ocurre en la práctica? En la práctica esta solución no es ideal ni mucho menos. Nos encontramos que ocurre lo siguiente: en las pantallas grandes, un párrafo que en una pantalla de un ordenador mediano se ve en 5 líneas se verá quizás en una sola línea ya que el ancho disponible es muy grande. El efecto es una línea muy larga que resulta desagradable de leer. Por el contrario, cuando un párrafo consta de una sola línea corta, en una pantalla muy grande se verá en el lateral izquierdo mientras que a su derecha queda un gran espacio en blanco. En general, el diseño fluido dará lugar a una deformación de contenidos que quedan muy a lo largo o demasiado cortos, y la impresión general es mala.

En las pantallas pequeñas como las de un smartphone, el diseño fluido hará que la página web “se comprima” para ocupar el ancho disponible que es muy poco. Cuando la pantalla es realmente pequeña, el efecto que se genera es de “miniaturización” o que todo se ve “diminuto”, tan pequeño que prácticamente no se puede leer. Por ello en la práctica es más habitual establecer estas anchuras principales en pixeles antes que en porcentajes.

La solución a obtener una correcta visualización en páginas web puede pasar por distintas vías:

a) Utilizar lo que se denomina “responsive design” que se podría traducir como “diseño sensible al dispotivo” aunque muchas veces en español se habla simplemente de “diseño responsive”. Esta técnica trata de usar un único HTML y CSS pero mediante la detección del dispositivo en que se va a visualizar la página, ofrecer un diseño adecuado para cada tipo de dispositivo (esto obliga a escribir diferentes reglas según el tipo de dispositivo en que se vaya a visualizar la web).

b) Utilizar diferentes dominios para el acceso con dispositivos pequeños o dispositivos grandes. Por ejemplo el dominio http://www.iberia.com/ está destinado a dispositivos de pantallas medianas o grandes mientras que http://iberia.mobi/ está destinado a tablets, smartphones y similares. Los diseños son distintos: más simples para los dispositos pequeños. Puede utilizarse la detección de dispositivo para redirigir del dominio principal al .mobi.

c) Definir ancho en pixeles, que como indicamos al hablar de medidas CSS podría considerarse una medida híbrida entre relativa y absoluta y es la que suele ofrecer un mejor resultado “intermedio”.

d) Utilizar otras técnicas.

En general cuando hablamos de las diferentes técnicas que se pueden emplear hay algunas propiedades CSS que suelen resultar útiles y que son: max-widht, min-width, max-height y min-height.

PROPIEDAD MAX-WIDTH

Esta propiedad permite definir la anchura máxima de un elemento, indicada en una unidad de medida válida con CSS (admitiéndose porcentajes). Su valor por defecto es none, que equivale a que esta propiedad no esté declarada. Se puede aplicar a cualquier elemento excepto elementos inline (aunque sí a elementos inline tipo imagen u objetos incrustados), filas de tablas o grupos de filas de tablas.

Si se usa un porcentaje, se refiere al ancho del elemento contenedor.

En el diseño fluido, nos puede servir para evitar que en las pantallas muy grandes la página web se expanda demasiado lateralmente. De este modo podemos permitir que se vea más grande, pero con un límite máximo. Ejemplo: #columnaLateral {width: 25%; max-widht: 420px; } #espacioCentral {width: 75%; max-widht: 1680px;}.

PROPIEDAD MIN-WIDTH

Esta propiedad permite definir la anchura mínima de un elemento, indicada en una unidad de medida válida con CSS (admitiéndose porcentajes). Su valor por defecto es none, que equivale a que esta propiedad no esté declarada. Se puede aplicar a cualquier elemento excepto elementos inline (aunque sí a elementos inline tipo imagen u objetos incrustados), filas de tablas o grupos de filas de tablas.

Si se usa un porcentaje, se refiere al ancho del elemento contenedor.

En el diseño fluido, nos puede servir para evitar que en las pantallas muy pequeñas la página web se miniaturize. De este modo podemos permitir que se vea más pequeña, pero con un límite mínimo. Ejemplo: #columnaLateral {widht: 25%; max-widht: 420px; min-widht: 180px; } #espacioCentral {width: 75%; max-widht: 1680px; min-width: 720px; }.

PROPIEDAD MAX-HEIGHT

Esta propiedad es análoga a max-widht, pero menos usada ya que como hemos indicado el sentido vertical suele tomarse menos en consideración. Se puede aplicar a cualquier elemento excepto elementos inline (aunque sí a elementos inline tipo imagen u objetos incrustados), columnas de tablas o grupos de columnas de tablas. En caso de usar porcentajes, se calculan respecto al valor height del contenedor. Si este valor no está establecido, aplicar esta regla puede no tener efecto alguno.

PROPIEDAD MIN-HEIGHT

Esta propiedad es análoga a min-widht, pero menos usada ya que como hemos indicado el sentido vertical suele tomarse menos en consideración. Se puede aplicar a cualquier elemento excepto elementos inline (aunque sí a elementos inline tipo imagen u objetos incrustados), columnas de tablas o grupos de columnas de tablas. En caso de usar porcentajes, se calculan respecto al valor height del contenedor. Si este valor no está establecido, aplicar esta regla puede no tener efecto alguno.