Comunidad de diseño web y desarrollo en internet online

Fallos miserables del diseño web liquido y elástico

Es posible que hayas leído algún artículo sobre diseños web líquidos (De ancho variable) contra diseños sólidos (De ancho fijo). Los diseñadores nos enfrentamos a la decisión de elegir uno de esos dos caminos a la hora de trabajar nuestro layout:

  1. Diseño sólido basándonos en la resolución de pantalla más común según estadísticas.
  2. Aprovechar las virtudes que nos ofrece las medidas porcentuales en CSS e intentar una web que se adapte a TODAS las resoluciones.
En la primera opción, nos encontramos con la posibilidad de encajar todos los elementos gráficos a nuestro antojo junto con el contenido en texto, teniendo la seguridad de saber como será la visualización del usuario final en el 100% de los casos.

En cambio, si optamos por un diseño "líquido", por más que seamos maestros en aplicar estándares y medidas porcentuales para garantizar esa "liquidez", siempre será imposible redimensionar los gráficos. Aún si nuestro diseño es sencillo y textual, como mínimo, tenemos el logo.

La solución que más abunda en la red al día de hoy es hacer un diseño en plan mix: medio líquido / medio sólido. Consiste en dar un 100% de ancho al contenedor general de nuestra página y dentro de las columnas de contenido, hacer que sólo una de ellas disfrute de un ancho porcentual: la columna central.

Bajo este recurso existen grandes portales de alta calidad e incluso supuestas web 2.0 que presumen tener un "diseño líquido". Es decir, lo que tenemos es un contenido central que se aposenta a sus anchas a grandes resoluciones de pantalla y que deja unas ridículas columnitas laterales con menús y contenido importante. Por último, un loguito de risa en la parte superior izquierda que parece gritar: ¡¡¡¡Eeeehhh ooohhhh!!!! ¡¡¡¡¡Estoy aquííííí!!!! ¿Es una sensibilidad de diseñador o a todos nos produce escarlatina esa "solución" a la variedad, cada día mayor, de resoluciones de pantalla?

¿Por qué no admitir que hay hacer algo?

¿Por qué no todos los diseñadores que sienten una punzada en el estómago ante el momento “mini-columnas sobre contenedor poderoso” hacen algo?


Sufrimos un bloqueo y así será hasta el día que todos los recursos favorezcan una adaptación lógica e incluso matemática de los elementos que integran nuestra página. Gráficos sean redimensionables, diseñadores y desarrolladores usando correctamente los valores .em y los porcentajes, etc. Ese día habremos superado la crisis U_U

Jamás volveremos a ver cosas semejantes a:


Por el contrario, encontraremos más casos como este brillante ejemplo de cómo redimensionar adecuadamente a cualquier resolución de pantalla.

Sabemos que la tecnología actualmente no nos proporciona las herramientas necesarias para corregir ciertos detalles, pero con un poco de ingenio y sobre todo mucha planificación, podemos evitar convertirnos en grandes maestros de las “mini-columnas”, (así como lo fuimos alguna vez de las tablas).

Lo primero y más importante, planificar, ¡¡PLANIFICAR!! Nunca es demasiada planificación para lograr un buen resultado.

Lo segundo, estudiar mucho, en la web siempre encuentras recursos nuevos, ideas nuevas. Ser curioso es un elemento indispensable en ser un buen diseñador/desarrollador.

En último lugar, estas son algunas pistas que pueden ayudarnos a encontrar the_Road® a los layouts verdaderamente líquidos:
Agradecimientos a Ramm por completar el artículo con ejemplos y sabios consejos de buenas prácticas en diseño líquido

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate