Responsivo VS Adaptativo

En este video te explicamos las diferencias entre el enfoque de diseño responsivo y el enfoque de diseño adaptativo a la hora de desarrollar páginas web.

Diferentes enfoques para el desarrollo de páginas web

Para enfrentarnos al problema de hacer páginas web para multitud de pantallas y dispositivos, hay dos enfoques principales: el diseño responsivo y el diseño adaptativo.

Vamos a ver en qué consiste cada uno y vamos a ver cuáles son las ventajas y desventajas de cada uno de ellos.

Diseño adaptativo

En el diseño adaptativo vamos a tener un layout o un diseño diferente para cada tipo de dispositivo.

Esto presenta una serie de ventajas y una serie de desventajas:

• Ventajas: La principal ventaja es que es más fácil de conseguir, ya que se basa en hacer un layout diferente por cada tamaño, es decir, se hace el trabajo de maquetación tantas veces como layouts diferentes quiera.
• Desventajas: Los principales problemas de este enfoque son varios.

El primero es que no fluye, es decir, si hay un cambio de tamaño en la venta del explorador este diseño no se actualizará de forma inmediata, habrá un cambio brusco de diseño cuando llegue al tamaño que has definido para cada layout.

El segundo es que tiene una carga más lenta, ya que existen diferentes tipos de layouts. Y el tercero es que al tener que hacer un layout diferente para cada tipo de dispositivo, podemos encontrarnos con un dispositivo que no hayamos tenido en cuenta.

Diseño responsivo

En el diseño responsivo hay un único layout, para todo tipo de pantallas y para todo tipo de dispositivos, orientaciones, colores, etcétera.

De la misma forma que el diseño adaptativo, el diseño repsonsive también presenta ventajas e inconvenientes:

• Ventajas: Una de sus ventajas es que carga más rápido, ya que tenemos un único fichero para todos los layouts, en el que se incluyen las media_queries y otro tipo de estructuras. Otra de sus ventajas es que fluye, vemos evolucionar el layout, es decir, vemos como crece y encoge conforme va creciendo y encogiendo la pantalla, no solo cuando se produce el salto de un tipo a otro.
• Desventajas: Su principal desventaja es que es bastante más difícil de conseguir, porque hay interacción en los puntos de ruptura, en los breakpoints, en esos puntos donde se pasa de una pantalla más grande a una pantalla más pequeña o al revés, cuando hay un cambio de diseño.

Al existir interacciones entre el diseño anterior y el diseño actual, es un diseño que resulta más complicado conseguir.

Casos de uso de diseño reposnive y adaptive

Vamos a ver dos ejemplos para que se entienda mejor todo lo comentado previamente. En el primer ejemplo tenemos un layout responsivo, dónde el contenedor principal ocupa el 80% y tiene dos elementos, una caja roja y una azul.

En el video podemos ver que el 80% se mantiene fijo aunque cambiemos el ancho de pantalla, hasta que llegamos a los 768 píxeles, que es el punto en el cambia el layout. Hasta ese momento podemos ver cómo evoluciona el mismo, se adapta en todo momento.

Vamos a ver la diferencia con un diseño adaptativo con el segundo ejemplo, dónde tenemos el mismo contenedor y los mismos elementos que lo componen.

Vemos que cuando la pantalla va creciendo no hay evolución, no fluye el diseño, y lo mismo ocurre cuando la pantalla encoge, cuando se produce el cambio tampoco fluye, no hay responsividad.

En este caso se adapta pero no responde a los cambios de manera inmediata, sólo hay un cambio cuando se produce el breakpoint, y a partir de ahí queda fijo.

¿Cuál usar?

A día de hoy las tendencias indican que es mejor el diseño responsive, porque responde a cualquier cambio de dispositivo, aunque se siguen creando páginas con el enfoque adaptativo.

Lo mejor es elegir el diseño que se quiere conseguir y elegir cuál es la forma más adecuada para trabajar con el mismo, puede que un tipo de diseño le convenga más un enfoque u otro.

Aprende a crear páginas Web responsive utilizando HTML y CSS, y empieza a realizar páginas Web profesionales que se adapten a todo tipo de dispositivos y navegadores.

Recuerda que puedes comenzar este curso con tu suscripción de OpenWebinars. Si todavía no estás suscrito, aprovecha para hacerlo ahora.