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

Ejemplo responsive design

Cada día accedemos más a internet a través de teléfonos y tabletas. Cuando analizamos las métricas de nuestros clientes del sector de la hostelería nos encuentramos (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 observamos (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.

Retícula de diseño líquido o fluido
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 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

Responsive grid
Responsive web designEn 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.

Hemos escrito otro artículo en el que si te interesa el tema podrás ampliar información sobre el diseño responsive. 

Anuncios

8 pensamientos en “Diferencias entre diseño líquido y diseño responsive

  1. Pingback: Diseño web sensible, responsive web design o diseño adaptativo | Visibilidad, tráfico y conversión

  2. aunque el artículo me ha parecido genial, he echado en falta alguna referencia para seguir aprendiendo sobre el tema.

    Gracias, de todos modos.

    Me gusta

  3. La verdad es que un post sobre diseño adaptable le va al pelo a este sitio. Con las mejoras en SEO (una única URL vs varias con sitios independientes para cada dispositivo) y las mejoras de usabilidad (mejor conversión) tenemos mucho ganado. Enhorabuena por el artículo.

    Me gusta

  4. Yo no sería tan tajante con respecto a las deficiencias del diseño líquido. Está claro que en el 2012 toca hacer responsive pero yo hice una web en el 2007 con diseño líquido y con más de 10.000 referencias y no teníamos ningún suplicio con el mantenimiento de las css. También es que solo hicimos un layout y medio. No había tantos dispositivos en el 2007… hablo de edetiendas.com

    Me gusta

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s