¿Cómo se llama la estrategia del diseño web adaptativo que se basa en los términos de proporción?

En lugar de usar unidades fijas como píxeles, se emplean unidades relativas (porcentajes) para los elementos de la página. Las imágenes y otros contenidos multimedia se configuran para escalar en proporción al ancho de su contenedor. Asegurando que no se salgan de los márgenes o se vean distorsionados en pantallas más pequeñas. Esto se logra mediante el uso de CSS y propiedades como max-width: 100%.

El diseño responsive permite a los usuarios acceder al contenido online a través de múltiples dispositivos de diferente resolución. 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 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. Los 3 principios básicos del diseño responsive css Sistema de cuadrícula fluida 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. Imágenes fluidas Cuando se usan cuadrículas fluidas para definir un diseño usando valores relativos, nada en el diseño tendrá un tamaño constante en todos los dispositivos. 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. Mejores prácticas para el diseño responsive Adopta el enfoque mobile first: inicia el proceso de diseño de páginas web responsivas para dispositivos móviles primero. Luego escalarás a escritorio. Crea cuadrículas e imágenes fluidas para optimizar el diseño web responsive. Prioriza el uso de gráficos vectoriales escalables. Incluye tres o más puntos de interrupción. Prioriza y oculta el contenido para adaptarse a los contextos de los usuarios. Verifica la jerarquía visual y usa la divulgación progresiva y los cajones de navegación para dar a los usuarios en primer lugar los elementos que necesitan antes. Opta por un enfoque minimalista. Usa patrones de diseño para maximizar la facilidad de uso. Ten muy en cuenta la accesibilidad. 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.

El diseño web adaptable es posible gracias al uso de un sistema de rejilla fluida basada en proporciones. Las consultas de medios son una extensión de la regla @media que se incluye en la hoja de estilos para indicar al documento HTML cómo debe comportarse en diferentes medios. Con la filosofía del diseño adaptativo, si una web se muestra con la resolución habitual de un PC muestra el contenido en 5 columnas, para una tableta necesitaría solo 4 y, en el caso de un teléfono inteligente, las columnas mostradas deberían ser 3. El diseño adaptable debe fluir con una adaptación constante del tamaño de los gráficos y las estructuras que componen un sitio web dentro de los diferentes dispositivos y tamaños de pantalla, considerando de forma automática la orientación en la que se visualizan los contenidos. Con una sola versión en HTML y CSS se pueden cubrir todas las resoluciones de pantalla, con lo que el sitio web estará optimizado para distintos dispositivos y resoluciones de pantalla.