No hacer diseño líquido
por Juan Carlos García, 12 de Marzo de 2007
El 85% de las universidades hace un diseño de ancho fijo
Es recomendable crear las páginas con un diseño líquido, flexible, adaptable al tamaño de la pantalla sea éste el que sea, lo cual se consigue utilizando unidades relativas. Es decir, que independientemente de cuál sea la resolución del monitor del usuario éste debería ver bien los contenidos, sin que le aparezca la molesta barra de scroll horizontal. En teoría en una página principal tampoco debería aparecer el scroll vertical, pero vamos, creo que no hay que ponerse hecho un talib al respecto (por cierto, ‘talib’ es singular, ‘talibán’ es plural y ‘talibanes’ es un disparate similar a ‘españoleses’).
Una de las fijaciones de algunos diseñadores, especialmente de los que aprendieron a diseñar haciendo carteles y folletos impresos, es querer que SU página se vea siempre igual, en cualquier monitor y configuración. Eso es algo que se puede controlar en el mundo del papel, pues el diseñador decide (o conoce) el tamaño del papel, su gramaje, tamaño de la letra, las tintas, los tipos de letra… Sin embargo en internet controlar éso no sólo es casi imposible, dada la infinidad de equipos y resoluciones, sino nada recomendable, pues el usuario es soberano y es quien debe decidir cómo quiere ver lo que tiene en pantalla.
Por otro lado, esto está muy bien en la teoría, pero en la práctica últimamente nos estamos topando con un problema importante dado el espectro de resoluciones posibles. Hace años había que tener en cuenta que las resoluciones tendrían un ancho de 640 px, 800 px y, como mucho, 1200 px. Ahora, con los monitores de 21 pulgadas, que ya no son un capricho para excéntricos podemos encontrar resoluciones que abarcan desde los 800 (cerca del 12% del total aún) hasta cosas inimaginables en mi modesto monitor de 15 pulgadas.
A donde quiero llegar a parar es a los problemas de legibilidad que pueden ocasionar páginas con un diseño totalmente líquido que contengan renglones de más de 200 cpl (caracteres por línea). Algo así sería muy complicado de leer. Algunos estudios sobre legibilidad sugieren que el ideal está en torno a 60-80 cpl y que por debajo y por arriba de esa cifra se empieza a hacer difícil la lectura, en el caso de renglones demasiado cortos porque hay que saltar con mucha frecuencia de renglón, y en el de los largos porque el desplazamiento lateral del ojo es excesivo.
Aún no tengo claro cuál es la solución, pues un diseño líquido basado en una maquetación clásica de tres columnas de distinto ancho porcentual (raíl de navegación, contenido, raíl de navegación secundaria) ya no se adapta bien a pantallas con una gran resolusión. De momento, no obstante, consideraremos una mala práctica el diseñar con anchos fijos, pues estaremos diseñando sólo para los usuarios que tengan una resolución igual o algo mayor a la del diseño, despreciando a todos los demás, a unos no dejándoles ver todo el ancho de la página en su pantalla, y a otros limitando el espacio útil a un pequeño espacio central.
Imagino que el camino es hacer CSS “inteligentes” que sepan modularizar los contenidos (organizar bloques) en función del espacio disponible. Hace tiempo que no leo novedades sobre ese aspecto. ¿Alguien está trabajando en ese campo?. Podríamos darle un ancho máximo, con un maxwidth o algo por el estilo, pero eso parece que aún no funciona en todos los navegadores.
En total, de las universidades españolas observamos que el 85% de ellas empleaba un diseño fijo (88% las púbicas y 78% las privadas).
Veamos un par de ejemplos en positivo y negativo. Por ejemplo, la página principal de la Universidad de Castilla La Mancha en un monitor a 1440×900 tiene este aspecto:
[Ver la imagen en tamaño real]
Mejor es el funcionamiento en este aspecto de la página principal de la Universidad Pompeu Fabra, que es líquido hasta cierto tamaño, a partir del cual deja de “crecer”.
A 800×600 px tiene este aspecto:
Y este es el que tiene a 1440×900 px:
[Ver la imagen en tamaño real]
Artículos relacionados: Columnas, anchos de línea y legibilidad. (Úsalo)
La solución ante el dilema fijo-fluido suele ser: ¡elástico!
He aquí algunos enlaces al respecto (bastante conocidos, aunque en inglés…):
http://www.alistapart.com/articles/elastic/
http://www.htmldog.com/articles/elasticdesign/demo/
No recuerdo si había llegado a comentar aquí antes, pero me gusta mucho este sitio
Y si no nos ponemos talibanes… ¿Podemos seguir diciendo “talibanes”? Además alguno habrá que se majo, quizás no sea plan generalizar…
Saludos.
Comparto tu punto de vista, Juan Carlos. Llevo ya un tiempo insistiendo en que no podemos tomar como paradigma hacer diseños que se adapten al ancho de pantalla, que lejos de hacer un favor al usuario le vamos a ocasionar un perjuicio.
El argumento que se suele dar es el de ‘aprovechar espacio’. Yo no estoy de acuerdo. Por ejemplo, este blog que tu escribes: yo tengo una resolución de 1920px de ancho, y prefiero ver dos amplios márgenes blancos a ambos lados que tener unas líneas interminables.
Yo también estoy como tú, no sé cual es exactamente la mejor opción; tal vez un diseño de mínimos y máximos, es decir que no crezca por encima de un determinado tamaño y permita controlar siempre los cpl, y que tampoco reduzca por debajo de un tamaño mínimo.
Un saludo y felicidades por el blog
En mis últimos diseños/maquetaciones siempre he apostado por anchos dependientes de la resolución. He llegado a utilizar diseños fijos a 800×600 y menor, líquidos entre esa y 1024, y fijos de nuevo a partir de entonces.
Y si no dispones de javascript, te quedas con la hoja de estilos más general.
Supongo que la solución a largo plazo es min-width y max-width, pero mientras su correcta implementación no se extiende más… tendremos que sacarnos las castañas del fuego de otra manera.
Una de las páginas que más me gusta cómo maneja esto es el blog de Duopixel http://blog.duopixel.com/ donde las columnas “suben” a mayor espacio disponible, y cuando la resolución es pequeña, forman una columna, aunque a 800×600 no han hecho los deberes y aparece scroll.
Esto yo lo vería interesante en páginas donde el scroll vertical no fuera tan grande, de forma que a resoluciones más o menos grandes casi todo el contenido quedara a la vista, aunque para ayudar a la legibilidad creo que unos márgenes de un 3 o 4% del ancho total no deberían faltar, hagamos lo que hagamos después con el contenido.
El diseño elástico, con los márgenes mínimos y máximos (que IE 6.0 no contempla), permite que se el diseño se adapte a la resolución sin que la longitud de línea crezca indiscriminadamente, como apuntan por aquí.
También permite, si se usa correctamente, que al hacer crecer el tamaño de texto desde los navegadores, las cajas que contienen a los textos crezcan armónicamente con ellos, de modo que los textos no se salgan de los contenedores donde están colocados.
Por cierto, el apunte etimológico sobre talibán es el mismo que en el diccionario panhispánico de dudas, pero la RAE ya ha incorporado talibán como singular por la extensión de su uso…así que lo veo una causa perdida, por justa que sea.
¿Por qué hay que suponer que quién tenga una resolución de pantalla de 1440×900 necesariamente “maximiza” el navegador?
El pretender diseños que se adpatan a cualquier resolución es muy poco realista y desde luego nada funcional por las cuestiones comentadas de la longitud de línea de texto y otras.
Por otro lado, la funcionalidad de las páginas en pestañas hace algo más complicado este tema…
Perdona la intromisión, pero no estoy de acuerdo con lo de talib.
Se dice talibán al seguidor del profeta Ali Ibn Abi Talib (http://es.wikipedia.org/wiki/Ali_ibn_Abi_Talib). La RAE admite el término talibán: http://buscon.rae.es/draeI/SrvltGUIBusUsual?TIPO_HTML=2&TIPO_BUS=3&LEMA=talib%E1n
Por lo demás, me encanta tu blog, no quiero que me acuses de talibanismo en esto
Según la misma Wikipedia a la que citas: “Talibán (plural pashtún de la palabra árabe طالب talib, que significa «estudiante»), grupo integrista tribal y guerrillero, estudiantes del Islam, surgido en 1989 durante la guerra civil que comenzó luego de la toma de Kabul (Afganistán) por parte de Burhanuddin Rabbani y su jefe militar, Ahmed Shah Massoud” http://es.wikipedia.org/wiki/Taliban. Está aceptado por la RAE, al igual que otros cuantos disparates que hemos ido repitiendo como loros cuando se lo hemos oído a políticos incultos o periodistas indocumentados. El que esté aceptado no quita para que el singular sea talib, el plural talibán, y talibanes sea un disparate, generalizado y aceptado, sí, pero disparate.
creo que deberían de poner más informacio para el usuario
probablemente sea el camino actual a seguir y el del futuro en diseño web
Es un comentario lingüístico simplemente.
Dices en el primer párrafo que crees que «no hay que ponerse hecho un talib al respecto (por cierto, ‘talib’ es singular, ‘talibán’ es plural y ‘talibanes’ es un disparate similar a ‘españoleses’).»
Me pareció un dato curioso, así que acudí a la RAE y esto es lo que encontré:
talibán -na. 1. ‘De cierta milicia integrista musulmana’. Aunque en el dialecto del persa que se habla en Afganistán la forma talibán es plural (singular talib), esta voz se ha acomodado ya a la morfología española y se usa talibán para el singular y talibanes para el plural: «El líder talibán estaba rodeado por las fuerzas que negociaban su rendición» (Prensa [Nic.] 7.1.02); «Los talibanes impusieron la ley islámica a la población» (Universal [Ven.] 15.10.96). Se desaconseja el plural invariable los talibán.
(http://buscon.rae.es/dpdI/ y buscar por ‘talibán’)
Yo personalmente pienso que depende de para quien sea y vaya dirigida la página, la información que contenga y demas no puedes hacer todas de una misma forma.
Personalmente no me gusta que abarquen toda la pantalla al menos que no aprovechen bien el espacio
si no pienso que el usuario se agobia con tanta información de golpe.
yo estoy de acuerdo… a que debemos de efectuar las paginas web en un resolucion de acuerdo a que publico va dirigida la pagina… si el pagina esta prediseñada o tiene un contenido para publico que lo va a visitar desd los ciber cafes… etc.. entonces debemos usra una resolucion vaja pero si va dirigida a empresas o a latos mando debe de subir la resolucion..
Les cuento que cambié la resolución de mi monitor y esta página peca de no aprovechar el ancho de la pantalla, es decir se ve la info en el medio y el resto rodeado de blanco… mmm yo entendí mal o justamente esto es lo que critican???,
Cabe destacar que no tienen problemas con el scrol vertical porque manejan un caudal de información importante, pero igualmente no están aprovechando del todo el soporte del medio en altas resoluciones, obligando al usuario a scrolear interminables sábanas blancas con una mancha diminuta de texto en el.
Igualmente coincido en que este problema todavía no tiene solución.
Actualmente, yo diseño en 1024 por 768 pixeles, porque ahora se ha convertido en las medidas standars para diseñar paginas web en el peru, en mi empresa Remisero Studio, http://www.remiserostudio.com/proyectos/bormiolix, esta pagina la diseñe en 1024 pero verticalmente, si escrolea, y creo que mucho, ustedes que opinan, los clientes no ven muy bien que la pagina cambie dependiendo a la resolucion, en cambio esta pagina http://www.remiserostudio.com/proyectos/creditrestoration-usa/ esta tambien en 1024 de ancho, pero es mas corta verticalmente, cualquier cosa escribanme en http://www.remiserostudio.com/contactanos.php, para responderles.
Yo considero que diseñando en promedio a 760px casi todos los monitores pueden ver el diseño.
Si yo dispongo de un diseño liquido y tengo la imagen de una manzana alineada al lado derecho de la pantalla, con 5 líneas de texto que fluyen debajo de la manzana… ¿cómo se verá esa página en un monitor de 19″? las líneas debajo de la manzana, -que también juegan un papel importante en la diagramación- dejarían de aportar la estética de su posición en el diseño.
Yo considero que al diseñar una página con un ancho fijo “promedio” de 760px, permitiría que los usuarios visualicen la página en monitores desde resoluciones de 800px 600 pasando por monitores con resoluciones de 19″ (como el que utilizo) y hasta por monitores de 21″.
Cuando diseñamos, no diseñamos al azahar, ni para que la resolución de los monitores completen la tarea de ofrecer al usuario ciertas visualizaciones en pantallas… el usuario puede elegir el tamaño de su resolución en sus respectivos monitores, pero no “diagrama”, eso lo decidimos nosotros tratando de ofrecer alternativas de presentación en las que la posición de los elementos se ajusten a nuestros patrones estéticos de presentación , -en ese sentido- van a mostrar en la medida de lo posible el diseño tal y como fue concebido inicialmente por el diseñador.
Considero que combinar el diseño líquido con el estático puede aportar soluciones en vez de problemas en cuanto a la diagramación de publicaciones en línea, y no tengamos que perder el control de lo que estamos diseñando. Es cierto que en muchas ocasiones nos vamos a encontrar entre la espada y la pared, pero para eso estamos hechos los diseñadores, para lidiar con esos problemas y aportar soluciones que satisfagan al grueso de usuarios.
//Miker
Con lo claro que veo yo que es mejor un diseño líquido que funcione en la mayor parte de contextos, y lo difícil que es a veces convencer al cliente de hacerlo así.
En mi caso, numerosas veces se acaba optando por un ancho fijo tan solo para tener más controlada la disposición de algunos elementos (grupos de miniaturas, por ejemplo).
Pero bueno, supongo que será cuestión de tiempo hasta que hagamos todas las páginas de esta forma, mucho más versátil, aunque es cierto que la cantidad de caracteres por linea es un tema que habrá que solucionar.
no sé cual es exactamente la mejor opción; tal vez un diseño de mínimos y máximos, es decir que no crezca por encima de un determinado tamaño y permita controlar siempre los cpl….Thanks Nice Post
Pienso que ese va ser el dilema por mucho tiempo. imagino un boton en la web que se enganche con la resolucion del monitor y lo cambie automaticamente
Me parece interesante lo que se plantea acá, diversidad de opiniones.
Ahora que estoy por finalizar una tesis sobre usabilidad web, busco referencias recientes sobre el ancho ideal de una pagina. De acuerdo a lo que menciona Jacob Nielsen “padre de la usabilidad web” su referencia es de monitores de 800×600. Incluso el recomienda el uso de los diseños líquidos. Este estudio es del 2000; pero en el sentido de que los monitores son de resoluciones cada vez mayores, no me parece lógico eso de que quedan espacios “blancos” cuando abrimos la pantalla al máximo.
Me parece que mas allá de hacer un diseño ¨inteligente¨; como usuarios inteligentes debemos entender que los monitores se diseñaron mas anchos para tener dos o tres documentos a la vista en el mismo momento, y no para diseñar paginas que se adapta a nuestro capricho.
A final de cuentas el diseño seria tachado de malo si la lectura es incomoda o las imágenes no “cuadran” con el diseño. Yo estoy mas de acuerdo con el diseño estático o elástico (que tiene ciertas limitantes de anchura min/max). Por lo demas mientras no se diseñe teniendo en cuenta al usuario, es diseño para el cliente o el mismo diseñador.
Raul en el artículo Columnas, anchos de línea y legibilidad que menciono en esta entrada hay unas cuantas referencias, aunque ya van teniendo unos años. Aunque Nielsen habla de diseño líquido lo que en realidad se persigue es que la página se adapte bien a todos los dispositivos que utilices. Hoy en día, conviviendo monitores de 21 pulgadas con dispositivos móviles pequeñitos el diseño líquido sin más parece ya insuficiente como requisito, parece que el debate ya está casi cerrado y ahora debemos hablar más de diseño “elástico” que de diseño “líquido” como objetivo deseable.