Diseño adaptativo o responsive: ¿son lo mismo?

En los últimos años, sobre todo desde la extensión de los smartphones y tabletas, los diseñadores de páginas webs y apps se han visto en la necesidad de adaptar sus trabajos a una gran variedad de resoluciones de pantalla. Las opciones por las cuales accedemos a la información contenida en una página web van desde la pantalla de un ordenador de mesa hasta la diminuta pantalla de un smartwatch. Todo esto puede resultar un auténtico desafío para los desarrolladores. Tanto el diseño adaptativo como el responsive -o receptivo- pueden afrontar este reto.

Ambos conceptos pueden parecer similares. Y, de hecho, lo son. El diseño responsive es una mera evolución del diseño web adaptativo, pero sendas tipologías suponen lo mismo: mejorar la experiencia del usuario con la página web independientemente del dispositivo desde el que navegue.

¿Hay alguna diferencia entre el diseño web adaptativo y el responsive?

No. Son sólo dos nombres diferentes para definir el mismo concepto. El diseño web receptivo, adaptativo o responsive significa enfocar el desarrollo y funcionamiento de una página al dispositivo -móvil, tablet, ordenador o TV- que utilice el usuario. Como hemos dicho en la introducción del artículo, el término de responsivo es sólo una evolución del adaptativo, pero a nivel funcional no existen diferencias. En cualquier caso, vamos a ver por qué surge la confusión entre ellos:

Qué es el diseño web responsive o receptivo

Una web responsive es aquella que se adapta automáticamente al tamaño de la pantalla donde se muestra. Dependiendo de las características de ésta, texto e imágenes se redimensionarán según la resolución de la pantalla. Esto, además de facilitar la navegación, ofrece una ergonomía óptima para cualquier tipo de dispositivo. Se puede hacer con HTML y CSS o HTML5 y CSS3 y todo debe responder, perfectamente, al dispositivo o navegador empleado por cualquier usuario: diseño, contenido e interfaz.

Cuando se habla en otros medios o webs de diseño receptivo, la visualización en la que se muestra una página web lo decide la ventana del navegador. En el caso del diseño adaptativo, la disposición viene determinada por el backend y es el servidor el que detecta el tipo de dispositivo o sistema operativo utilizado.

El receptivo supone, además, un gran avance en la mejora de la velocidad y la carga de la página. A nadie le gusta clicar en un resultado de Google y que la web se cargue con lentitud -más de dos segundos se considera muy lenta-. Al hacer los ajustes necesarios en el código fuente de la página, la web estará optimizada independientemente del dispositivo que se utilice para acceder a ella.

Lo que significaba diseñar una web adaptativa

Para el diseño adaptativo el desarrollador crea diferentes versiones fijas del sitio que se adaptan a tamaños de pantallas específicos. Introducido en 2011 por el diseñador web Aaron Gustafson, en el caso del diseño adaptativo lo habitual es diseñar seis diseños que se corresponden con los anchos de resolución más habituales: 320, 480, 760, 960, 1200 y 1600 píxeles. Esto quiere decir que una página web de diseño adaptable utiliza una plantilla preparada para cada dispositivo.

A menudo se argumenta que las páginas adaptativas presentan para el trabajo del diseñador más dificultades que las receptivas. Esto se debe a que necesitará hacer diferentes diseños para diferentes dispositivos. Sin embargo, esta es una falsa suposición. En realidad un diseño receptivo requiere más trabajo, pues implica una atención adicional a la modificación de las CSS.

Las páginas web creadas con diseño adaptativo incluyen las consultas de medios CSS propias de los diseños receptivos. Además, un diseño adaptativo contiene mejoras basadas en JavaScript. Esto permite cambiar el marcado HTML del sitio según las capacidades del dispositivo. Este proceso se conoce como mejora progresiva.

El diseño adaptativo se enfrenta con el problema de que los tamaños de las pantallas varían constante. Esto obliga a estar añadiendo diseños de manera continuada. Esto no ocurre con los diseños receptivos, puesto que son lo suficientemente flexibles como para adaptarse, por si mismos, a nuevos tamaños. Esta es la motivación de la evolución del concepto de diseño web adaptativo al responsive.

Ventajas de las páginas web adaptativas o responsive

Como se deduce de las definiciones anteriores, ya no tiene sentido diseñar páginas web adaptativas. La técnica de diseño web a emplear por los desarrolladores debe ser la responsive, donde la página se ajusta por completo al dispositivo para ofrecer la mejor UX –user experience o experiencia de usuario- a la persona. Hay negocios o determinados medios digitales que por su naturaleza deberán acompañar la versión de navegadores con una versión móvil.

Enumeremos algunas de las ventajas de esta técnica de desarrollo web:

• Se puede utilizar, sin problemas y sin definir varias plantillas, de un dispositivo a otro
• Poca dedicación al mantenimiento, al adaptarse a diferentes tamaños de pantallas… incluso a los aún no existentes
• Las facilidades de configuración e implementación ahorran costes en desarrollo, soporte y mantenimiento
• Mejor eficiencia de rastreo e indexación de los motores de búsqueda. Google recomienda y recompensa los sitios que utilizan un diseño receptivo. Un sitio web optimizado para dispositivos móviles ocupa un lugar más alto en las páginas de resultados de los motores de búsqueda.
• Mejora de la UX