¿Qué es el diseño líquido?


El diseño líquido permite crear diseños que se adaptan correctamente a diferentes dispositivos, pero en situaciones extremas (pantallas muy pequeñas o muy grandes) presenta algunos problemas, además no permite transformaciones profundas en el diseño de la página.

En la actualidad, esto es muy importante porque una página web se debe de visualizar correctamente en diferentes dispositivos.
 
En este tipo de 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 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. Se usa un porcentaje para definir el tamaño de cada bloque.



Con el uso de porcentajes logramos que las diferentes columnas de la página se adapten correctamente a la anchura de la página.



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.

Sin embargo 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 de
leer
.
 
 


Imagen que ilustra mediante un ordenador contenido en una gota de agua la idea del diseño web líquido, en el cual el contenido de la página se adapta al recipiente.




 Fuente: Activate, Google España

 
 

 




















    
















Comentarios

Entradas populares de este blog

Códigos Hex de color

Enlaces Intradocumentales

Etiqueta header HTML5