Imagen ilustrativa para la entrada '¡La nueva era del Responsive Design ya está aquí!'Imagen ilustrativa para la entrada '¡La nueva era del Responsive Design ya está aquí!'

¡La nueva era del Responsive Design ya está aquí!

Cuando pensamos en diseño responsive, pensamos en realizar consultas de medios para cambiar este diseño cuando se produce un cambio de tamaño móvil a un tamaño tablet o a un tamaño de escritorio. Sin embargo, esta percepción podría considerarse ya tan desfasada como usar tablas en el diseño de una página. ¿Por qué?

Si bien es cierto que las consultas de medios basadas en viewport nos dan herramientas muy buenas para trabajar, éstas carecen de la capacidad de responder a ciertas necesidades de los usuarios y de asignar estilos responsive a los propios elementos, así como a aquellos elementos que se componen a su vez de otros elementos, como podría ser, por ejemplo, una barra lateral.

¿Qué ocurre entonces? Pues, como ley de vida, el ecosistema evoluciona para dar soluciones a nuevas necesidades. Y así lo hace CSS, trayéndonos, confirmado por la web.dev, lo que está siendo ya la nueva era para el Responsive Design. ¡Atento/a que empezamos!

CONTENIDO

Actualizaciones de CSS para el diseño responsive

Podemos observar que, cada 10 años, aproximadamente, se producen cambios significativos, siendo el último gran cambio en 2010-2012 con la llegada del CSS3. Lo que quiere decir que ya estamos listos para volver a experimentar grandes cambios en CSS.

¿Qué incluyen estos cambios? Estos cambios están pensados para responder a las preferencias del usuario, a consultas de contenedores y a consultas de factor de forma para nuevos tipos de pantalla, como pueden ser la llegada de las pantallas plegables.

Vamos a ver más en detalle qué funciones incluyen cada uno de estos cambios por separado ??

Responsive para el Usuario

Las consultas de medios van a proporcionar experiencias en la web acorde a las preferencias de los usuarios. Estas consultas de preferencia incluyen, entre otros:

  • @prefers-reduced-motion
  • @prefers-contrast
  • @prefers-reduced-transparency
  • @prefers-color-scheme
  • @inverted-colors
  • Y más

Todas estas consultas crean una experiencia web más estable y personalizada, especialmente para quienes necesitan accesibilidad, adaptandose a las preferencias del SO (Sistema Operativo).

Por ejemplo, los usuarios que establecieron preferencias en el SO para movimiento reducido, no apreciarían las animaciones llamativas, al igual que no apreciarían animaciones de giro u otras animaciones complejas. En su lugar, con prefers-reduced-motion es posible diseñar las páginas teniendo en cuenta esta reducción de movimiento y crear así una mejor experiencia de movimiento para estos usuarios.

«Preferir movimiento no reducido» no debería significar una ausencia de movimiento, ya que el movimiento es fundamental para transmitir información en línea. Por lo tanto, tenemos que proporcionar una experiencia que guíe al usuario y mejore la experiencia de aquellos que la necesiten y tengan preferencias de accesibilidad.

Responsive para el Container

Gracias a las consultas de contenedor, o consultas de elementos, podemos manipular cualquiera de los estilos de los elementos, y diseño en general, basándonos en su contenedor principal.

Podemos ver un ejemplo proporcionado por la web oficial de web.dev donde se muestran dos componentes idénticos con dos tamaños de contenedor distintos y ambos ocupan espacio en un diseño creado con CSS Grid. Cada elemento se ajusta a su espacio asignado único y se diseña en consecuencia a sí mismo.

Fuente: web.dev

Dado que esa flexibilidad no es posible sólo con @media, las consultas a contenedor proporcionan una utilidad más dinámica para el responsive design. Por ejemplo, podemos poner los elementos de esa tarjeta en una barra lateral dentro del cuerpo principal de una página y, de esta manera, el elemento en sí tiene su propia información responsive y tamaños de respuesta según el contenedor.

¿De qué manera conseguimos esto? Usando la propiedad @container, que sería similar a usar una consulta de medios con @media. La diferencia es que @container consulta el contenedor principal para obtener información en lugar de hacerlo con el viewport global y el agente de usuario.

Estas consultas a contenedor permiten que cada tarjeta cambie para adaptarse al diseño adecuado llenando su espacio y ofreciendo así un estilo basado en elementos.

Responsive para el Form-Factor

Las pantallas plegables son un ejemplo de los actuales cambios en el factor de forma. La expansión de pantallas es otra espeficación en la que se está trabajando para cubrir los nuevos formatos y necesidades del dispositivo.

En esta ocasión podemos usar consultas de medios experimentales para la expansión de pantalla y añadir entre paréntesis «spanning».

Cuando tenemos una pantalla dual que tiene un solo pliegue vertical, actualizaremos el valor de la variable del ancho de la barra lateral con el valor de entorno de los pligues de la izquierda. Esto nos permite crear un diseño donde la barra lateral, o de navegación, llene el espacio de uno de los pliegues, mientras que la IU de la app llena el otro, evitando así un doblez en la interfaz.

Con el emulador de Chrome DevTools puedes hacer pruebas para pantallas plegables y crear prototipos de pantallas directamente en el navegador.

En conclusión

Estas nuevas actualizaciones nos dan la posibilidad de agrupar estilos de elementos, de diseño de página, estilos globales y estilos de usuario. Nos permite incluir variaciones de expansión de pantallas y microdiseños usando consultas de contenedor en nuestros elementos, consultas de medios basadas en preferencias de usuario y adaptarse al nuevo factor de forma.

Así, podemos crear una experiencia de usuario personalizada en función de sus necesidades y conseguimos que el diseño responsive sea más resiliente.

«Adapt your user experience to your user’s experience».

La siguiente era del diseño responsibe ya está aquí. ¿Te animas a explorarla por tí mismo?

¡Llegan las Core Web Vitals de Google a 2021! 8 Ventajas de tener una tienda online o e-Commerce