Si trabajas en la industria del diseño y desarrollo web, estoy 100% seguro de que has estado trabajando intensamente con el término diseño web responsivo. Es posible que ya utilices frameworks responsivos para construir tus sitios web, y que te hayas unido a innumerables discusiones sobre el tema.
Algunos diseñadores se centran en sitios que se adaptan a varios tamaños de pantalla, navegadores y sistemas operativos; un diseñador web adaptativo creará un sitio que tenga diferentes versiones por adelantado en forma de plantillas. El servidor distingue entonces qué dispositivo o sistema operativo se está utilizando y envía la versión correcta del sitio al dispositivo.
“El diseño responsivo es del lado del cliente, lo que significa que toda la página se entrega al navegador del dispositivo (el cliente), y el navegador entonces cambia cómo aparece la página en relación con las dimensiones de la ventana del navegador.
“El diseño adaptativo es del lado del servidor, es decir, antes de que la página se entregue, el servidor (donde se aloja el sitio) detecta los atributos del dispositivo y carga una versión del sitio optimizada para sus dimensiones y características nativas”.
En los primeros tiempos del diseño web, las páginas se construían para un tamaño de pantalla concreto. Si el usuario tenía una pantalla más grande o más pequeña de lo que el diseñador esperaba, los resultados iban desde barras de desplazamiento no deseadas hasta longitudes de línea demasiado largas y un mal uso del espacio. A medida que se fueron ampliando los tamaños de pantalla, apareció el concepto de diseño web responsivo (RWD), un conjunto de prácticas que permite que las páginas web modifiquen su diseño y apariencia para adaptarse a diferentes anchos de pantalla, resoluciones, etc. Es una idea que cambió la forma de diseñar para una web multidispositivo, y en este artículo te ayudaremos a entender las principales técnicas que debes conocer para dominarla.
Diseños de sitios web históricosEl HTML es fundamentalmente responsivo. Si creas una página web que contenga texto y cambias el tamaño de la ventana del navegador, o muestras la página en un dispositivo con una pantalla más pequeña, el navegador redistribuirá automáticamente el texto para ajustarlo a la ventana.
El problema con este enfoque es que obtendrá una barra de desplazamiento horizontal en pantallas más pequeñas que el ancho del sitio (como se ve a continuación), y mucho espacio en blanco en los bordes del diseño en pantallas más grandes.
Las diferencias entre los enfoques de diseño responsivo y adaptativo ponen de manifiesto opciones importantes para nosotros como diseñadores de webs y aplicaciones. Elegir con conocimiento de causa puede permitirte planificar y ejecutar tus diseños con mejor objetivo, propósito y resultados.Con la omnipresencia y diversidad de dispositivos móviles, como diseñadores tenemos que atender a la variedad de tamaños de pantalla. Este es un reto al que se enfrentan actualmente todos los diseñadores de webs y aplicaciones. Desde el gigantesco monitor corporativo hasta el smartwatch, hay un gran número de formas en que los usuarios pueden acceder a la información en línea hoy en día. Los diseñadores que buscan salvar la brecha entre dispositivos tienen dos opciones para sus diseños: el sitio adaptativo o el sitio responsivo.
Existe cierta confusión en cuanto a la diferencia entre el diseño responsivo y el diseño adaptativo. Los límites pueden parecer borrosos para los que no tienen experiencia en ninguno de los dos estilos de diseño, pero hay claras diferencias cuando se examinan más de cerca los dos.Diseño responsivo
El diseño responsivo permite a los diseñadores mostrar el contenido en función del espacio disponible en el navegador. Esto permite que haya coherencia entre lo que muestra un sitio en un ordenador de sobremesa y lo que muestra en un dispositivo portátil. El diseño responsivo es la opción “tradicional” y sigue siendo el enfoque más popular hasta la fecha.
Un sitio web adaptativo ajusta la estructura, el contenido o la presentación de la información en respuesta a la interacción medida del usuario con el sitio, con el objetivo de optimizar futuras interacciones del usuario. Los sitios web adaptativos “son sitios web que mejoran automáticamente su organización y presentación aprendiendo de los patrones de acceso de sus usuarios”[2] Los patrones de interacción de los usuarios pueden recogerse directamente en el sitio web o extraerse de los registros del servidor web. Se crean uno o varios modelos de la interacción de los usuarios utilizando inteligencia artificial y métodos estadísticos. Los modelos se utilizan como base para adaptar el sitio web a patrones conocidos y específicos de interacción de los usuarios.
Los filtros colaborativos, como los sistemas de recomendación, los métodos de generación y prueba, como las pruebas A/B, y las técnicas de aprendizaje automático, como la agrupación y la clasificación, que se utilizan en un sitio web no lo convierten en un sitio web adaptativo. Todas ellas son herramientas y técnicas que pueden utilizarse para diseñar un sitio web adaptable.