Diseño fijo contra diseño líquido: ¿cuál es mejor?

20-04-2004 - Luis Villa - Comentar este artículo

Gracias al aumento de resolución de los monitores y la aparición de nuevos dispositivos, se reaviva el viejo debate entre los diseñadores de interfaz sobre el uso de diseño líquido frente diseño fijo.

La polémica entre los diseñadores de interfaz sobre el uso de diseño líquido (aquel que se adapta a la resolución del dispositivo) y diseño de dimensiones fijas lleva años en la palestra. Con el aumento de resolución de los monitores y la aparición de nuevos dispositivos móviles el debate cobra nuevas perspectivas.

En el medio digital, “cada usuario es un mundo”.

Las combinaciones de plataforma (Windows, Mac, Linux), navegador (Explorer, Mozilla, Safari) y sus plugins (Flash Player, Acrobat , Active X…) , resolución (640×480, 800×600, 1024×768), y tipografías instaladas entre otros, hacen que el resultado final de un trabajo sea “incontrolable”.

Diseñar para la web requiere una mentalidad flexible capaz de adaptarse a posibilidades de presentación diferentes y a un cierto “descontrol”.

El diseño como consecuencia de una herramienta

El diseño es consecuencia del uso de una técnica de diseño o una herramienta.

Por ejemplo, el diseño fijo es consecuencia del uso de herramientas cuyo resultado final es un interfaz de proporciones fijas. Tal es el caso de Photoshop.

El diseño líquido, suele provenir de profesionales que diseñan utilizando código (CSS y HTML) y se apoyan en herramientas gráficas para completar detalles (imágenes, logotipos, ornamentos).

¿Qué usan “los clásicos”? Entre los sitios pioneros de internet se observan varias posiciones: desde el diseño fijo de Ebay, Yahoo o Expedia, hasta los diseños líquidos de Amazon o Wired.

Al plantear el diseño de un interfaz web, deberemos pues tomar una decisión:

¿Deberá “mi diseño” adaptarse a la resolución de pantalla del usuario o por el contrario la disposición de los elementos será la misma independientemente del ancho de pantalla?

No daré respuestas porque no las tengo, pero veamos algunos argumentos y que cada cual saque su conclusión.

Uno de ellos es la legibilidad: Existen estudios realizados sobre usuarios que determinan que es más sencillo leer y asimilar la información cuando las líneas tienen una longitud adecuada. Recordemos que los usuarios suelen “escanear” el texto en pantalla antes de proceder a una lectura detallada y para ello es importante el ancho de línea y la estructuración del contenido en párrafos. (Enlace a redactar en tono web).

Control de la presentación: el diseño fijo permite un control casi total acerca de cómo se va a visualizar la información en diferentes monitores.

Diseño fijo

Los elementos de maquetación adoptan un ancho fijo. El diseñador “impone” un diseño con una distribución de elementos en pantalla que se visualice igual en todos los dispositivos y resoluciones.

Esta visión es propia de los medios impresos, en las que un diseñador controla al milímetro el aspecto final de su trabajo (papel, tamaños, disposición, tipografías).

A favor: control por los diseñadores de la apariencia final de su trabajo, heredado de los medios impresos tradicionales.
Controlar la longitud de línea implica mejor legibilidad.

En contra: en monitores de alta resolución desaprovecha espacio. Por ejemplo, en textos largos puede generar un scroll vertical excesivo .

Es poco “web”. Desaprovecha la “adaptividad” del medio “on line” e impone criterios de diseño papel.

Diseño líquido

Aprovecha al máximo el ancho de pantalla adaptando los elementos y su disposición a la resolución de monitor del usuario.

A favor: Esta opción reduce el scroll en pantalla y permite presentar más información de un solo vistazo.

En contra: El mayor problema del diseño líquido mal aplicado es que el texto se “desparrama” por la pantalla obligando al usuario a realizar un esfuerzo para leer.

Problemas con Explorer: Al aplicar “liquidez” al diseño, se deben tener en cuenta unos límites en el ancho de los “contenedores” para que las líneas de texto no resulten demasiado largas. Este problema se plantea en los navegadores Explorer que de momento no soportan las propiedades CSS min-width y max-width que permiten asignar anchos mínimos y máximos a los contenedores para evitar “desparrames” (Existen trucos para evitarlo).

Que el popular y defectuoso Explorer no soporte correctamente estos y otros estándares hace más complejo la creación de diseños líquidos usables.

Diseño elástico

Ideado por Patrick Griffiths, es una variación sobre las dos opciones anteriores en las que el ancho de elementos en pantalla depende del tamaño de letra configurado por el usuario en su navegador.

Se pueden ver dos demostraciones en su propio sitio y en CSS ZenGarden y un artículo acerca de cómo crear este tipo de diseños en A List Apart.

¿Y si elige el usuario?

Prometí no tomar partido en este debate, por eso al final lo dejo abierto.

Partiendo de la base de que la CSS controla el aspecto de un documento, al igual que con DOM y CSS se puede cambiar colores, tipografías y tamaños en cualquier sitio web, se puede ofrecer las opciones de hoja de estilos con diseño líquido y con diseño fijo y dejar de mano del usuario la elección del tipo de diseño mediante un selector de hoja de estilo CSS, como styleSwitch, utilizado en muchos sitios para cambiar el aspecto o la tipografía.

Comentar este artículo