Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a mostrar el diseño líquido, también llamado fluido, de una página web.

En la parte anterior de este vídeo, vimos el diseño elástico, en el que el tamaño de la página y sus elementos está declarado en relación con el tamaño del texto, que se suele especificar en em. Este estilo de diseño resuelve algunos problemas, pero no funciona correctamente en resoluciones extremas, ya sean resoluciones pequeñas o resoluciones grandes. En la actualidad, esto es muy importante porque una página web se debe de visualizar correctamente en diferentes dispositivos.

El diseño líquido o fluido tiene como objetivo lograr que una página web se visualice correctamente en diferentes dispositivos. El nombre de este diseño lo explica todo: en este diseño, los elementos de una página web se comportan como el agua: se extienden por la superficie de la página web como el agua sobre una superficie, y se adaptan al recipiente que los contiene.

En realidad, este es el comportamiento natural de una página web si no se hace nada. Por ejemplo, la primera página web de la historia se visualiza correctamente a 1920 píxeles de ancho, a 640 píxeles de ancho, o incluso a 480 píxeles de ancho. Así era la Web desde su nacimiento: líquida, fluida, pero entonces llegaron los diseñadores y metieron la mano con sus reglas y calculadoras, y pasó lo que pasó.

En el diseño líquido, el ancho de la página no es fijo. El tamaño de la página y sus elementos está declarado en relación con el ancho de la ventana, que se suele especificar en porcentaje. La principal ventaja de este diseño es que se ajusta a los distintos dispositivos de visualización.

¿Cómo se realiza un diseño líquido? Este es el esquema de la página de prueba que estoy utilizando como ejemplo en estos vídeos. Es curioso, pero un diseño realizado con tablas, que era lo normal hace ya más de 14 años, se puede considerar un diseño líquido porque la página se adapta automáticamente a diferentes resoluciones. Pero recuerda lo que ya te expliqué en otro vídeo: diseñar con tablas es estúpido.

Como en otras ocasiones, voy a utilizar varios elementos div para definir las diferentes columnas que componen el diseño de la página. En realidad, este código HTML es el mismo que he empleado en otros diseños. Las diferencias no están en el HTML; las diferencias están en el CSS.

¿Por qué se usa porcentaje para definir el tamaño de cada bloque? Recuerda que en la Web, las dimensiones del dispositivo de visualización son desconocidas. Bueno, en realidad, no son del todo desconocidas; podemos suponer un rango, desde una resolución mínima de VGA de 640x480 hasta una resolución máxima QSXGA de 2560x2048. Pero es un rango muy amplio. Con el uso de porcentajes logramos que las diferentes columnas de la página se adapten correctamente a la anchura de la página.

La página también se visualiza correctamente si se amplía mediante zoom, y también se ve correctamente con diferentes navegadores. Los diseños líquidos funcionan bien en pantallas pequeñas o medianas; 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 suele ser de 80, y en este ejemplo hay líneas con más de 220 caracteres. A mayor longitud, resulta difícil leer en pantalla sin perderse entre las líneas. Este problema lo podemos solucionar fácilmente con las propiedades de CSS min-width y max-width.

Pero sigue existiendo un problema importante: en resoluciones pequeñas, el contenido de la página puede quedar muy apelotonado o se puede visualizar tan pequeño que sea muy difícil leerlo. ¿No existe una alternativa? Sí, existe el diseño adaptable, mal llamado diseño sensible, pero eso te lo explicaré en la siguiente parte de este vídeo.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo: a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora. Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web”, que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.