Diseño responsive o adaptable ¿son distintos?

Es curioso como algo que habitualmente incluso se traduce igual, el diseño responsive y/o adaptable en realidad no son lo mismo, y creo que os debo una explicación.

A la hora de elegir un tema WordPress nos podemos encontrar los dos términos, y podemos pensar que es lo mismo, pero no.

El diseño web responsive se ha convertido en un término habitual desde que lo acuñó Ethan Marcotte en 2010. El concepto de web responsive es habitual en cualquier manual o libro sobre CSS, y tiene la suficiente importancia como para dedicarle un momento de nuestras vidas para saber qué hace que una web sea responsive y en qué se diferencia de una web adaptable.

responsive-adaptable wordpress

¿En qué se diferencian un diseño web responsive y uno adaptable?

Primero vamos a intentar definirlos por si te llega con la explicación ¿te parece?

1. ¿Qué es un diseño responsive?

Los sitios responsive y adaptables son iguales en el sentido de que ambos cambian el aspecto basándose en el navegador en que se estén visualizando, y me refiero al ancho del navegador de nuestro dispositivo.

Las webs responsive responden al tamaño del navegador en un punto dado. No importa el ancho del navegador, el sitio se ajusta a su estructura, e incluso funcionalidad, para que esté optimizado para cualquier ancho de pantalla.

¿Importa si el ancho del navegador está a 300 píxeles de ancho o a 3.000? En realidad no importa ya que la estructura responderá a cualquier tamaño, si se hace bien claro.

2. ¿Qué es un diseño adaptable?

Las webs adaptables se adaptan al ancho del navegador en puntos específicos. En otras palabras, a la web solo le preocupa si el navegador es de un ancho concreto, y en qué punto específico se debe adaptar a su estructura.

Pues no me entero ¿algún ejemplo más claro?

Vale, sé que son matices que igual no se entienden. Piensa en la diferencia entre diseño fluido y diseño a saltos.

El diseño responsive es fluido porque la estructura se ajusta de manera fluida independientemente del dispositivo en que se esté visualizando.

Por otro lado, el diseño adaptable se muestra en saltos ya que la página está mostrando algo diferente dependiendo del navegador o dispositivo en que se esté visualizando.

En esta animación lo verás mejor…

Clic para ver la animación (arriba responsive - abajo adaptable)

Clic para ver la animación
(arriba responsive – abajo adaptable)

En la imagen anterior se ve claramente como el diseño responsive fluye con el entorno (arriba) mientras que el adaptable salta a cada entorno (abajo).

¿Otro ejemplo? A ver si esta otra imagen animada te lo aclara…

Clic para ver la animación

Clic para ver la animación

Si quieres, en este enlace tienes más imágenes que muestran las diferencias.

No me entero ¿me lo explicas más?

Lo sé, la diferencia entre webs responsive y adaptables es un poco más profunda que los simples ejemplos anteriores. De hecho es incluso un asunto casi filosófico.

Echemos un vistazo a la definición original que hizo Ethan Marcotte sobre lo que es un diseño web responsive:

Rejillas fluidas, imágenes flexibles y media queries son los tres ingredientes técnicos del diseño web resònsive, pero también requiere un modo diferente de pensamiento. En vez de encerrar nuestro contenido en “experiencias adaptadas a cada dispositivo” podemos utilizar media queries para mejorar progresivamente nuestro trabajo en distintos contextos de visualización.

Observa las palabras fluidoflexible. El diseño responsive implica olvidarse del dispositivo para buscar una experiencia optimizada para cualquier pantalla. Este pensamiento nos reta a crear sitios que cambien el contexto dependiendo de cómo se esté visualizando la web en cualquier situación.

El diseño responsive olvida el dispositivo, busca una experiencia optimizada en cualquier pantalla Clic para tuitear

Esto implica que nuestros contenedores deberían ser fluidos (usando porcentajes como unidad de medida), que los recursos que sirvamos deberían de ser flexibles (sirviendo los recursos adecuados a cada dispositivo concreto en el momento adecuado) y que nuestras media queries debemos definirlas como saltos de contenido (lo contrario a pensar en el ancho de un tamaño de pantalla concreto, por ejemplo un iPhone)

Si lo comparas con el modo de pensar de un diseño adaptable, que no es ni fluido ni flexible, sino que busca puntos concretos a los que adaptarse. Para ello deberás definir los parámetros para cada media query en cada tamaño de pantalla posible/dispositivo.

Si quieres una lista de media queries que se adapten a diversos dispositivos la tienes aquí. No es completa pero si bastante amplia.

¿Es mejor entonces responsive que adaptable?

La palabra mágica, como en casi todo, es… depende.

En principio podría parecer que un diseño web responsive es mejor por su fluidez, por su adaptación suave y flexible, y por la simplificación de su código, pero hay proyectos en los que es mejor definir diseños específicos adaptables a los principales dispositivos, ofreciendo experiencias distintas según el tamaño del dispositivo, con lo que finalmente tendrías ¿un mejor diseño?

Por otra parte, un diseño responsive es más eficiente en cuanto a la gestión de recursos, ya que se adaptará a futuros tamaños de dispositivos y pantallas sin tener que modificar tu CSS.

Una última reflexión

Tanto el diseño web responsive como el adaptable se parecen en que son métodos para gestionar la realidad de que las webs se visualizan en distintos dispositivos y contextos. La diferencia es que abordan esta situación cada uno a su manera.

Además, recuerda que la web es responsive por naturaleza. No necesita responder o adaptarse a ningún dispositivo hasta que no empezamos a diseñarla.

La web es responsive por naturaleza Clic para tuitear

 

 

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

Valora este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (7 votos, promedio: 5,00 de 5)
Cargando…

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Pin It on Pinterest

Share This