¿Cuál es la diferencia entre el diseño responsive y el diseño adaptativo?

En el diseño adaptativo vamos a tener un layout o un diseño diferente para cada tipo de dispositivo. En el diseño responsivo hay un único layout, para todo tipo de pantallas y para todo tipo de dispositivos, orientaciones, colores, etcétera. 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. 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. 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. 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. 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. 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.

La principal diferencia es que el diseño responsive se adapta literalmente. En lo que respecta al diseño adaptativo, se hace un diseño para cada dispositivo. Un solo diseño que se adapta según la pantalla. Utiliza tamaños proporcionales, en lugar de valores fijos en píxeles. Establece medidas en porcentajes. Emplea media queries y diferentes hojas de estilo para cada medida de pantalla. Utiliza tamaños de pantalla fijos y preestablecidos para cada uno de los dispositivos. Diferentes diseños de forma independiente en los que podemos variar lo que mostramos, aumentando la calidad de la experiencia de navegación del usuario. Utiliza valores fijos en píxeles. No necesita tanto código. No se ajusta exactamente a cualquier resolución. El dispositivo recibe solo lo necesario para su visualización.

El objetivo de ambos es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarlas. El diseño responsive es fluido porque la estructura se ajusta de manera fluida independientemente del dispositivo en que se esté visualizando. En cambio, 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. Un diseño web responsive es mejor por su fluidez, por su adaptación suave y flexible, por la simplificación de su código y 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. Pero hay proyectos en los que es mejor definir diseños diferentes y específicos, ofreciendo experiencias distintas según el tamaño del dispositivo desde el que veamos la web.