27May08
LÃquidos y elásticos
Me acabo de enterar, ayer ( 
), de la diferencia entre diseño web lÃquido y elástico.
- En el diseño lÃquido, no predefinimos en la CSS los anchos de los contenedores, por lo que la página tiende a ocupar, como si de un lÃquido se tratara, todo el espacio que cada pantalla proporciona. Y esto está muy bien … hasta cierto punto. Por un lado, aprovecha todas las posibilidades en cada sistema, reduce el scroll horizontal y muestra mucha información de un solo vistazo. Pero, por otro, en grandes resoluciones el resultado puede ser desastroso, con laaaargas lÃneas de información incómodas de leer y un diseño de aspecto desparramado.
- En el diseño elástico, los anchos de los contenedores están definidos en em, por lo que dependen y se adaptan al tamaño de fuente elegido por el usuario. En bajas resoluciones y con el tamaño de fuente predeterminado, aparecen esas bonitas barras de scroll que tanto nos gustan :girlblum:
ArtÃculos relacionados:
Tags: css, diseño web, elástico, lÃquido
Archivado en: HTML y CSS
Trackback URI for "LÃquidos y elásticos"
Archivado en: HTML y CSSTrackback URI for "LÃquidos y elásticos"
Ana dice:
¿Y cómo has podido vivir hasta ahora asÃ, a tontas y a locas, sin distinguir el alfa y el omega…? :trinity: Es broma, me das mucha envidia porque estás hecha una gurusa de la cosa esta y a mi me gustarÃa también poder sacar tiempo para profundizar en estas cosillas. Pero, en fin, hay que comer. :pardon:
Oye, que te he leÃdo que vais a lo del árbol el próximo domingo.¿Si? ¿Si? :pompon1: :pompon2: :pompon2:
kruzul dice:
uhmm: seamos elásticos entonces.
sisi dice:
Pues Ana … haciendo diseños de ancho fijo :jiji:
Allà estaremos el domingo … yo no sé si correré porque tengo la espalda fatal pero iremos en cualquier caso :pompon1:
:hmm: Kruzul, es difÃcil la elección. Parece que hay una propiedad de css llamada max-width o algo asà que resolverÃa el problema de los diseños lÃquidos pero que no está soportada por explorer … voy a experimentar a ver qué tal y ya os cuento
Jose Ignacio Hita dice:
Muy buena entrada, conocÃa estos conceptos pero no sabÃa que se llamasen asÃ. Ciertamente, cuando uno se compra una pantalla grande, muchas veces maldice una y mil veces los anchos fijos y el no poder aprovechar todo el ancho de la pantalla para escribir o lo que sea.
Cuando desarrollo aplicaciones web, la filosofÃa que solemos seguir en nuestro equipo de desarrollo es una técnica mixta, me explico. Configuramos una especie de “huevo de pascua” (pulsado doble clic en una esquina o similar) para que se establezca el ancho y el alto de la aplicación de forma fija a la resolución mÃnima soportada (normalmente 1024) y poder ver cómo quedarÃa. Una vez que nos aseguramos que se va a ver bien en esa resolución mÃnima, trabajamos con resoluciones mayores y damos la posibilidad al usuario (con controles dinámicos) de poder ajustar los anchos de los paneles de textos, escrituras, etc. Con esto a mà siempre me ha ido bastante bien y la gente queda contenta
Un buen ejemplo de esta filosofÃa es el Google Reader, con su botón de “expandir”. La verdad es que no sé si me he explicado, pero bueno :yupi:
sisi dice:
Gracias Jose pero lo que es bueno es tu comentario…
Mola mucho que el usuario final pueda ajustar el diseño a su sistema … para mà que el diseño web fijo es una reminiscencia del diseño gráfico sobre papel … hay que ir haca otros caminos más “elásticos” y quizá algo menos controlados … hasta cierto punto claro :hmm:
Tenoch dice:
Hola, disculpa que te saque del tema, pero que plugin usas para los smilyes? me han encantado y los quiero poner en mi blog.
sisi dice:
Hola Tenoch
El plugin se llama “Smiley Javascript Buttons”: http://aranea.zuavra.net/index.php/18/
Los “smilies” que salen por defecto son pocos y yo he añadido algunos más copiando algunos de aquà y de allá en la carpeta wp-includes/images/smilies y luego editando el archivo /wp-includes/vars.php
saludos :dance2: