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: