¿Qué es diseño web fluido o líquido?
El diseño web fluido o diseño web líquido, fluid web design o liquid web design, es aquel que tiende a ocupar todo el ancho de la pantalla, sea cual sea el tamaño de esta. Es un tipo de diseño menos utilizado que el anterior, ya que requiere de mucho más trabajo por parte del diseñador web y a que si no se realiza correctamente su resultado puede resultar bastante atractivo para tamaños de pantalla “normales” y pequeñas, pero cuando se emplean pantallas de muchas pulgadas su estética resulta, cuanto menos, horrible, a no ser que se utilicen técnicas como el uso de max-width para limitar el máximo ancho aceptado por nuestro diseño. En este caso el diseñador web utiliza porcentajes en lugar de píxeles para establecer los anchos de sus diseños, aunque también se pueden emplear píxeles y medidas máximas y mínimas con min-width y max-width. Por suerte es un tipo diseño que cada vez va tomando más terreno y va sustituyendo al diseño fijo.
El diseño web fijo, o fixed web design en inglés, es, con diferencia, el más utilizado de la Internet, y es aquel que permanece inalterable sea cual sea el dispositivo donde se visualiza el sitio web. Es indiferente al tamaño de la pantalla y a la anchura del navegador web que la visualiza. Sean cuales sean las características del dispositivo, pantalla o navegador, siempre se visualiza el mismo tamaño preestablecido por el diseñador web en píxeles.
El diseño web elástico, elastic web design, es un tipo de diseño muy parecido al fluido, sólo que en este caso el contenido también crece junto al ancho del diseño para rellenar la pantalla. Es, con diferencia, un tipo de diseño prácticamente residual y muy poco usable. Volvemos a lo mismo que en el caso del diseño fluido, el diseño elástico puede resultar más o menos agradable en tamaños de pantalla más o menos pequeños, pero cuando se utilizan pantallas muy grandes el contenido se vuelve exageradamente irracional, por lo que salvo contadas excepciones, no tiene ningún tipo de razón de ser. En este caso el diseñador web utiliza em para fijar los anchos de su diseño web y del resto del contenido que alberga. Es un tipo de diseño del que debemos alejarnos lo más posible.
En este tipo de diseño se usan porcentajes o ems (unidad de medida tipográfica) en vez de pixeles, para que los elementos se adapten según el ancho de la pantalla. Si bien el resultado puede parecer atractivo en pantallas medianas, como computadores de escritorio y tablets, se producen muchos problemas en las pantallas grandes y pequeñas. Por ejemplo, en televisores las imágenes se estiran mucho y en teléfonos los textos son difíciles de leer.
Como una forma de evitar estos errores, es posible fijar el ancho máximo y mínimo. El problema es que esto hace que aparezcan áreas en blanco en las pantallas grandes y barras de desplazamiento horizontal en las más pequeñas.