Diseño adaptativo vs diseño responsive

Total
0
Shares

Todos los días, millones de usuarios utilizan distintos dispositivos para acceder a Internet, pero cada vez más, los usuarios utilizan con mayor asuidad los dispositivos móviles entre otros. Por eso existe una gran variación de la resolución y los tamaños de pantalla, ya que ver un contenido en una Smart TV de 55 pulgadas no es igual que verlo en un móvil de 5.5 pulgadas. Esto influye de forma importante a la experiencia de usuario y como se muestran y adaptan todos los elementos en las distintas pantallas.

Aun en 2019 muchas empresas siguen sin darle la gran importancia que tienen los dispositivos móviles, dejando una versión web de escritorio que se pueda visualizar en móvil. Pero esto solamente acarrea una serie de problemas como un tiempo de carga bastante largo, un formato que obliga en muchas ocasiones hacer zoom para ver los detalles o poder interactuar con los botones y sobre todo, las mejoras que se hicieron al algoritmo de Google conocidas como “Mobilegeddon”, la cual prioriza en SEO aquellas web adaptadas a todos los dispositivos.

¿Qué es diseño adaptativo?

El diseño adaptativo trabaja con distintas versiones del sitio web conforme a un tamaño específico de pantalla en diferentes dispositivos. Los sitios web diseñados de este modo, captan el tipo de dispositivo que se usa y el tamaño de ventana del navegador y selecciona la versión más apta el abanico de opciones creado previamente.

Este diseño funciona mediante puntos fijos que le indican al navegador cuando debe saltar a la siguiente versión del sitio web hasta encontrar la más óptima. Normalmente, los diseñadores suelen realizar los seis anchos de pantallas más comunes, 320px, 480px, 760px, 1200pv, y 1600px. Con estos tamaños se lograría albergar desde los móviles más pequeños hasta las pantallas más amplias. Por lo tanto los diseñadores deben recrear el mismo diseño en cada layout estático para que  la web considire el punto fijo que utilizar, lo cual puede ser una tarea bastante tediosa para ellos.

¿Qué es diseño responsive?

El diseño responsive a diferencia del adaptativo, el propio layout se va adaptando al tamaño de la pantalla que el dispositivo utilice para acceder al sitio web. Esto hace que se haya que desarrollar una layout fluida en el que se hacen uso de medias queries (consultas de medios CSS3) y hojas de estilo  que trabajan mediante porcentajes y no mediante píxeles, por lo que se adaptan al tamaño de ventana del navegador desde el cual se accede no viéndose afectada la experiencia de usuario.

¿Cuáles son las diferencias?

  • La primera diferencia es como se realiza la identificación del dispositivo. La carga del proceso recae en el servidor web debido a que el diseño adaptativo utiliza el servidor web para así poder detectar el dispositivo que se está utilizando y adaptar la interfaz a una resolución específica. En cambio el diseño responsive la carga del proceso recae en el ordenador del usuario, utilizando las media queries para así detectar la resolución y así el layout se adapta al tamaño de la pantalla.
  • Cada tipo de diseño optimiza el contenido de forma diferente. El diseño responsive envía toda la información al dispositivo, aunque no sea la que corresponde a ese tamaño, y después se procesa la que es la adecuada para la resolución, lo que produce un mayor consumo de datos y un ligero peor rendimiento de carga. Al contrario, el diseño adaptativo preselecciona la información para solo descargar los ficheros específicos a la resolución del dispositivo que se está utilizando, lo que permite una velocidad de carga algo mayor y un menor consumo de datos.
  • En el adaptativo se habrá que realizar gran números de pruebas para verificar que las distintas pantallas para los diferentes tamaños funcionan bien y evitar que no hayamos tenido en cuenta algún tamaño en concreto. En cambio, el responsivo usa una sola plantilla que sirve para cualquier pantalla.
  • A la hora de desarrollar los sitios web, en adaptativo se suele trabajar empezando el diseño de las resoluciones más bajas e irlas subiendo, lo que implica un mayor trabajo, mayores comprobaciones y por lo tanto un mayor coste. En responsive normalmente se suele realizar la web desde cero teniendo como base una resolución intermedia que posteriormente se ajustará a los diferentes tamaños con media queries, lo que provoca un coste más bajo por lo general.

¿Con cuál diseño mi web entonces?

Para saber cuál elegir, primero hay que saber cómo es nuestro sitio web y como se va a utilizar, ya que ninguno es mejor que otro en términos absolutos sino que según nuestro contenido serás más favorable uno de los dos.

Si nuestro sitio web es complejo y queremos optimizar al máximo la experiencia de usuario en cualquier dispositivo y pantalla, sería mejor un diseño adaptativo aunque haya que invertir más recursos y tiempos. Si nuestros requerimientos no son tan altos, diseñarlo responsive satisfacerá las necesidades de los usuarios con un menor coste. Actualmente, el diseño responsive es el más popular debido a que las webs se modifican constantemente siendo más rápido y menos tedioso realizar esas modificaciones.

4 comentarios
  1. Saludos.
    Buen artículo , la teoría genial pero lo importante es pelearse con el código , CSS3 hacer todo esto es algo durillo , son ajustes muy manuales , rudimentarias , partirse la cabeza para que quede bien y cuadre.
    Con Bootstrap 4 o CSS-Flex las cosas son más “fáciles” de realizar.
    Ya si nos metemos en el desarrollo de aplicaciones moviles … es otro infierno.

Deja un comentario
También puede interesarte