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.
En este contexto se utilizan indistintamente términos como responsive, fluid, adaptive, etc. Pero las empresas deben entender que todos ellos son cosas diferentes y la elección de cuál adaptar depende mucho de los requisitos del negocio. En este blog, describimos la diferencia entre los diseños web Responsive y Adaptive y cuál es el adecuado para cada necesidad.
El diseño web responsivo se adapta a varias resoluciones de pantalla ajustando la altura y la anchura de varios elementos de la pantalla. La plantilla de diseño sigue siendo la misma en todos los tamaños de pantalla. Técnicamente hablando, los sitios web con capacidad de respuesta utilizan el mismo código base y el mismo diseño para todos los dispositivos con algunos ajustes menores en CSS para permitir el ajuste en el factor de forma de la pantalla. Algunas de las características más destacadas del diseño adaptativo son:
A diferencia del diseño responsivo, el diseño adaptativo no es un diseño fluido. En lugar de cambiar el diseño de la pantalla para ajustarse a cada tamaño de dispositivo, se define un diseño fijo estático para ajustarse a cada tamaño de pantalla. Los sitios adaptativos están optimizados para ofrecer la mejor experiencia al usuario: estos sitios utilizan de forma óptima las funciones de toque, se cargan más rápido y utilizan imágenes y menús optimizados para la experiencia móvil. Algunas características destacadas del diseño adaptativo son:
El diseño web responsivo (RWD) es un enfoque de desarrollo web que crea cambios dinámicos en la apariencia de un sitio web, en función del tamaño de la pantalla y la orientación del dispositivo que se utiliza para verlo. El RWD es un enfoque para el problema de diseñar para la multitud de dispositivos disponibles para los clientes, que van desde pequeños teléfonos hasta enormes monitores de escritorio.
El RWD utiliza los llamados puntos de ruptura para determinar cómo aparecerá el diseño de un sitio: se utiliza un diseño por encima de un punto de ruptura y otro diseño se aplica por debajo de ese punto de ruptura. Los puntos de ruptura suelen basarse en la anchura del navegador.
El mismo HTML se sirve a todos los dispositivos, utilizando CSS (que determina el diseño de la página web) para cambiar la apariencia de la página. En lugar de crear un sitio separado y la correspondiente base de código para monitores de pantalla ancha, ordenadores de sobremesa, portátiles, tabletas y teléfonos de todos los tamaños, una única base de código puede dar soporte a usuarios con puertos de visualización de diferentes tamaños.
En el diseño responsivo, los elementos de la página se reorganizan a medida que la ventana gráfica crece o se reduce. Un diseño de escritorio de tres columnas puede cambiar a dos columnas para una tableta y a una sola columna para un smartphone. El diseño responsivo se basa en cuadrículas proporcionales para reorganizar el contenido y los elementos de diseño.
Como cuestión fundamental al emprender cualquier viaje de diseño, las opciones de diseño responsivo y adaptativo tienen consecuencias globales para los sitios web. Aunque ambos métodos tienen en cuenta la realidad de que los sitios web se ven a menudo en dispositivos móviles, difieren en algunos aspectos.
Por ello, las empresas deben contemplar estos dos factores de diseño en relación con su propio negocio y ámbito. Para ayudarte a entender qué diferencia al diseño web adaptativo y al responsivo, vamos a analizar ambos con más detalle.
El diseño responsivo ofrece una experiencia invariable independientemente del tipo de dispositivo que utilicen los usuarios. Los sitios web responsivos responden al tamaño del navegador en cualquier momento, e independientemente de la anchura del navegador, el sitio tiene un diseño que siempre cambia para optimizar la experiencia de visualización.
En cambio, el diseño adaptativo detecta el tamaño de la pantalla e implementa un diseño adecuado para ella. En otras palabras, el sitio web sólo se preocupa de que el navegador tenga una anchura determinada, momento en el que adapta el diseño. Los sitios web adaptativos suelen estar diseñados para 6 anchos de pantalla: 320, 480, 760, 960, 1200 y 1600.