Desde que hablé en mi cuenta de twitter y en este blog sobre el responsive design he podido comprobar como algunas personas están un poco confundidas y no distinguen muy bien cuando un layout es fluido y cuando sensible.
Así que me he decidido a escribir este post explicando la diferencia entre layout fluid y responsive para que el asunto quede mucho más claro y el lector no tenga problemas en diferenciar un tipo de layout del otro porque la verdad, es que son muy diferentes entre si.
Aunque el layout fluido es un avance interesante en contraposición con el layout fijo (bloque central con un ancho fijo, regularmente de 960px) no es ni mucho menos algo novedoso, hace muchos años que los diseñadores web lo usan. El layout responsive va mucho más allá.
Layout Fluido (Fluid)
Los layouts fluidos o líquidos se diseñan con la idea en mente de que se expandan hasta ocupar el total disponible de pantalla del dispositivo que renderiza la página web. Estos layouts están basados en anchos por porcentaje y sus elementos se redimensionan si cambiamos la resolución o si visualizamos la página desde diferentes dispositivos.En la mayoría de las ocasiones, no todos los contenedores usan valores con porcentaje, muchos usan valores con un ancho fijo en píxeles. Esto último es muy común en menús laterales por ejemplo en los que el diseñador asigna un valor absoluto para que el menú no se deforme y mantenga sus proporciones.
Como podrás imaginar, este tipo de layout tiene sus ventajas con respecto al diseño de ancho fijo, pero también tiene sus inconvenientes. Por ejemplo, el fluid layout se adapta a más resoluciones de pantalla y dispositivos pero esto es su vez una desventaja cuando el ancho del dispositivo que visita la página es muy grande y el contenido es escaso.
También puede darse el caso contrario, que el ancho disponible del dispositivo sea demasiado pequeño y el layout haga uso de la propiedad min-width en el cual aparecerán las temidas barras horizontales que como todo buen diseñador web conoce, siempre deben evitarse.
Seguramente el lector conoce el tan aclamado framework CSS Bootstrap (del que ya hablamos en Genbeta Dev) de Twitter. El framework dispone de layouts fijos y fluidos pero obviamente sufre de los problemas explicados. Así es como se ve el layout fluido de bootstrap en mi monitor a 1920×1080 (screenshot redimensionada):
Puede apreciarse como el texto del marco del Hello World no queda demasiado elegante con una línea tan larga y otra no, aunque es pasable. Los bloques heading si que pegan más el cantazo y se nota que por muy fluido que sea, está diseñado para una resolución máxima de 1280px de ancho:
Como se ve en la anterior imagen, a 1280px de ancho el layout se ve de escándalo pero no es lo que andamos buscando cuando necesitamos que nuestros layouts se vean perfectamente en cualquier dispositivo sin crear páginas diferentes (como en el caso de Genbeta Dev para móviles ;P). Si redimensionamos a 800px de ancho llega el apocalipsis:
Aparece la temida barra de desplazamiento horizontal, no se ve todo el contenido, el menú de la izquierda es demasiado grande al igual que el bloque de Hello World y en definitiva es un desastre. Habrá quien piense que 800px de ancho es una resolución de los monitores del siglo pasado, pero no hay que olvidarse de que 800px es algo más que la resolución horizontal del iPhone en posición landscape o del iPad en portrait.
Es inaceptable que al visualizar una página web con un dispositivo móvil, bien sea este un smartphone o un tablet el layout no se visualice de forma correcta y nos obligue a imaginar la foto completa y a hacer scroll horizontal. Por ello se ideó el layout responsive.
Layout Sensible (Responsive)
El diseño sensible (o responsive) nos ofrece todo el control que tendríamos con un diseño de ancho fijo y nos ofrece muchísima más flexibilidad que el diseño fluido. Nos permite desarrollar páginas que se visualicen de forma correcta en cualquier dispositivo y resolución.Los diseños sensibles usan un poco de la magia de CSS3 pero existen hacks para dar soporte a navegadores tan obsoletos como el obsoletísimo IE6. Podría utilizar el diseño de una de mis páginas como ejemplo, pero como no nos gusta el autobombo, utilizaremos la página de la boda de Javier y Marta compañeros del sector y grandes profesionales.
Así es como se ve en una resolución de 1920×1080 (otra vez estas screens están redimensionadas):
No parece nada especial, un layout fijo centrado a una columna con menú en el header y footer, pero eso, es solo en apariencia. Redimensionemos a 1280px a ver que ocurre:
Podemos apreciar como se adapta el header y el menú a la nueva resolución, no solo redimensionando el contenedor sino modificando el contenido para que encaje mucho mejor con la nueva resolución, veamos ahora como se ve en a 800px:
No solo el contenedor se redimensiona para adaptarse al nuevo ancho, el contenido del mismo se redimensiona a lo alto y a lo ancho, modifica el tamaño de su fuente y se rediseña sobre la marcha para ofrecer una lectura perfecta del contenido.
Pero ¿qué ocurre si usamos una resolución aún menor, digamos, 400px?
Pues que va a pasar, que el layout fluye y cambia una vez más para adaptarse perfectamente a la resolución del dispositivo que visita la página web ofreciendo una experiencia de usuario superior. Mientras que el diseño fluido se basa en porcentajes, el sensible se basa en proporciones.
Conclusión
Existe una gran diferencia entre diseño fluido y sensible (fluid y responsive), hacer un layout fluido puede mejorar la navegabilidad y usabilidad de nuestra página, hacerlo sensible lo eleva al nivel de la excelencia.P.D: Felicidades a los tortolitos por cierto ;)
En Genbeta Dev | Responsive Web Design (Ethan Marcotte)