El diseño responsive permite a los usuarios acceder al contenido online a través de múltiples dispositivos de diferente resolución. De hecho, cuanto más usamos la red, más esperamos que un sitio web sea responsive; es decir, que podamos verlo sin problemas tanto desde el escritorio como desde nuestros dispositivos móviles. A satisfacer estas necesidades se dedican los expertos en user experience y desarrollo. Las Pautas de Accesibilidad para el Contenido Web (WCAG) establecen la capacidad de respuesta web (llamada Reflow) como uno de los criterios de éxito para el contenido accesible. Un sitio web responsive también se posiciona mejor en los resultados de búsqueda y es crucial para una buena estrategia SEO.
Cuando hablamos de diseño responsive nos referimos a una forma de desarrollar contenido web para que el mismo sea accesible desde todos los dispositivos posibles, independientemente de su resolución. Por lo general, se logra definiendo puntos de interrupción de la ventana gráfica (límites de resolución para cuando el contenido se escala a esa vista) y asegurándose de que las ventanas gráficas se ajusten lógicamente en tabletas, teléfonos y ordenadores de cualquier resolución.
Las páginas web responsivas reaccionan a los cambios en el ancho del navegador ajustando la ubicación de los elementos de diseño para que encajen en el espacio disponible. Si abres un sitio creado con diseño responsive en el escritorio y luego cambias el tamaño de la ventana del navegador, el contenido se moverá dinámicamente para organizarse de manera óptima para ese nuevo tamaño. En los teléfonos móviles, el sitio verifica el espacio disponible y luego se presenta en la disposición ideal.
Para el diseño web responsive, el método de tamaño absoluto no funciona porque los dispositivos varían en tamaño. Por lo tanto, el diseño de páginas web responsivas se basa en tamaños relativos.
Cuando se usan cuadrículas fluidas para definir un diseño usando valores relativos (como porcentajes), nada en el diseño tendrá un tamaño constante en todos los dispositivos. Esto significa que será necesario cambiar el tamaño de las imágenes del diseño para cada tamaño. Ahí es donde las imágenes fluidas entran en escena. Al igual que el agua, las imágenes fluidas adquieren el tamaño del contenedor en el que se encuentran. Por lo tanto, el diseño responsive permite crear una sola imagen e indicarle al navegador que la escale de acuerdo con el tamaño del contenedor.
Las consultas de medios son instrucciones para modificar el diseño del sitio según se den o no ciertas condiciones. Por ejemplo, un enfoque de dos columnas podría no ser práctico en el espacio real de la pantalla de un smartphone.
Se puede usar una consulta de medios para indicarle al navegador que reorganice el espacio real de la pantalla si el tamaño de la misma es más pequeño que un tamaño dado. Este tamaño específico en el que se rompe el diseño se denomina “punto de interrupción”.
Las consultas de medios funcionan mejor con un enfoque mobile first en el que se definen los parámetros para el móvil y luego se escala a partir de ellos. Será necesario probar el contenido para ver dónde se producen los puntos de interrupción y planificarlos. Con el tiempo, se pueden predecir los puntos de interrupción en función de la resolución de pantalla de un dispositivo.
Hoy en día, el diseño responsive es el enfoque predeterminado en el mundo del diseño web. Se trata de un enfoque crucial para crear experiencias accesibles y optimizadas para motores de búsqueda. Es especialmente relevante en la optimización de landing pages, sobre todo de venta. Para producir diseños web responsive, los diseñadores de UX trabajan con cuadrículas e imágenes fluidas. Debes trabajar en estrecha colaboración con los desarrolladores para especificar puntos de interrupción y probar si se procesan correctamente.
¿Quieres saber más sobre experiencia de usuario? Lee este artículo sobre usabilidad web.