Diferencias entre diseño líquido y diseño responsive

Cada día accedemos más a internet a través de teléfonos y tabletas. Cuando analizo las métricas de mis clientes del sector de la hostelería me encuentro (mayo 2012) que aproximadamente el 40% de las visitas a sus webs se realizan a través de teléfonos móviles. En clientes más tradicionales observo (octubre 2012) incrementos mensuales del 19% en el acceso a su web con dispositivos móviles.

En España el 56% de los teléfonos móviles son smartphones (somos el segundo país del mundo con un porcentaje tan alto). En 2015 seremos uno de los primeros países del mundo en donde habrá más accesos a internet desde dispositivos móviles (smartphones y tablets) que desde ordenadores de escritorio. Adaptar nuestras webs a las pantallas de los dispositivos móviles resulta ya más que necesario.

Diseño líquido o fluido (liquid or fluid layout). Una web tiene diseño líquido o fluido cuando su tamaño se ajusta a la dimensión horizontal de la pantalla de forma automática y sin necesidad de una barra de desplazamiento horizontal (scroll). El diseño se expande al ancho disponible de la pantalla porque el tamaño de los distintos elementos (div) es un porcentaje del total disponible (100%) de la pantalla.

El problema surge en pantallas muy grandes como por ejemplo una TV Full HD de 1.920 x 1080 px porque el diseño se desajusta y aparecen grandes espacios en blanco. Pero también sufren problemas las pantallas con resoluciones inferiores a 1.024 px de ancho (tablets en posición portrait y móviles en posición landscape) porque las imágenes se miniaturizan y los textos se vuelven ilegibles. Si para evitar estos problemas se fija un ancho mínimo aparecen las barras de scroll de desplazamiento horizontal.

Como muestra la imagen, para obviar estos problemas los diseñadores crean versiones de layouts según la pantalla donde se vaya a visualizar la web: pantalla de televisión, ordenador de escritorio, tablet, móvil.

• Layout con un ancho mínimo de 1.420 px para pantallas Full HD TV hasta 1.980 px
• Layout con un ancho mínimo de 1.236 px y un máximo de 1.420 px para ordenadores de escritorio con una alta resolución de pantalla (por ejemplo un iMac)
• Layout con un ancho mínimo de 986 px y un máximo de 1.235 px para ordenadores de escritorio normales
• Layout para tablets con un ancho mínimo de 720 px en posicion vertical (portrait) y un máximo de 985 px para tablets en posición horizontal (landscape)

El principal problema de un diseño líquido es el mantenimiento de diferentes versiones de CSS. En una web con 16 páginas es más o menos fácil. Pero un un site de ecommerce con más de 5.600 referencias vivas en permanente actualización (alta y baja de productos, versiones de color, tamaño, etc) es realmente un suplicio.

Diseño responsive. Se basa en la retícula (normalmente de 960 px de ancho) que se divide en un número igual de columnas ya sean pares o impares. Estas columnas pueden ser también elásticas (un porcentaje del ancho total) que hacen un ajuste aún más fino al dispositivo. La hoja de estilos CSS3 define por medio de media queries en qué pantalla se visualizará la página en función de una serie de parámetros como:

• Ancho y alto de la ventana del navegador (width, high)
• Orientación del dispositivo (puede ser portrait o landscape, es decir vertical u horizontal)
• Aspect-ratio (proporción entre el ancho y el alto de la pantalla por ejemplo 16:9)
• Grid (número de columnas que muestra)
• Resolución del dispositivo (densidad de píxeles que muestra la pantalla)
• Color (número de colores que representa la pantalla)
• Hay cuatro parámetros mas (monochrome, device aspect-ratio, color-index, scan) que ayudan a definir con mayor exactitud el dispositivo

En función del ancho de la pantalla del dispositivo los bloques div se ordenan y jerarquizan, de tal manera que los elementos que estamos viendo en la imagen superior se verían en un dispositivo móvil en una columna ordenada en la que todos los elementos tendrían el mismo ancho.

Las ventajas del diseño responsive son:

• Con una misma web (un sólo HTML y CSS) se cubren todas las resoluciones de pantalla
• Se reducen los costes de creación y mantenimiento de una web, se acorta el desarrollo
• Optimización SEO, sólo hay una URL, se ahorran las redirecciones a otros layouts (mobile.dominio.com)
• Todos los usuarios disfrutan del mismo contenido (suele ser frustrante obtener versiones light de las webs)

De esta manera el diseño responsive nos proporciona una visualización controlada de la página, muy similar a la que nos ofrece el diseño de ancho fijo.