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!
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.
Leave a Reply