Con el lanzamiento de CSS3, obtuvimos acceso a consultas de medios y, poco después, Ethan Marcotte acuñó el término “diseño receptivo” a fines de 2009. Durante más de una década, hemos creado diseños para la web utilizando Responsive Web Design (RWD) como un enfoque del diseño web que permite que las pantallas que diseñamos se adapten a diferentes dispositivos y tamaños de pantalla, una pantalla completa a la vez.
Los conceptos de mejora progresiva y centrados en los dispositivos móviles se convirtieron en enfoques muy populares en los primeros días, cuando los teléfonos móviles aún no entendían las consultas de medios o JavaScript y había una gran cantidad de CSS que todavía no era compatible.
En términos actuales, cuando hablamos de diseño receptivo, pensamos en una página que adapta su diseño al navegador común, el tamaño de la pantalla y las restricciones proyectadas en todo el diseño. Usamos consultas de medios para cambiar el diseño completo de la página cuando cambiamos el tamaño del diseño de escritorio a dispositivo móvil.
Muy pronto, el uso de este enfoque de diseño receptivo podría estar tan desactualizado como el uso de tablas para el diseño de página, como lo hicimos en los años 90.
Tenemos muchas herramientas poderosas de consulta de medios basadas en ventanas gráficas, pero también carecemos de delicadeza, ya que es una solución única para toda la página que es la misma para todos los usuarios. Carecemos de la capacidad de responder a las necesidades de los usuarios, así como de la capacidad de inyectar estilos de respuesta en los propios componentes.
Cuando hablamos de componentes, me refiero a elementos en una página, que pueden estar compuestos por muchos otros elementos. Piense en algo como una postal, un carrusel o un bloque de testimonios, cada uno de los cuales se compone de diferentes “bloques de construcción” más pequeños. Estos componentes se juntan y componen nuestro sitio web. Podemos usar la información de la ventana gráfica global para diseñar estos componentes, pero aún no pueden poseer sus propios estilos. Esto complica aún más la situación cuando nuestros sistemas de diseño se basan en componentes en lugar de páginas.
La buena noticia es que el ecosistema está cambiando, pero al mismo tiempo cambia con bastante rapidez y requiere un cambio en la forma de pensar sobre cómo pensamos sobre el diseño y el estilo de los componentes y cómo se adaptan a su entorno.
CSS está evolucionando y una nueva era de diseño web receptivo está en el horizonte. Han pasado un poco más de 10 años desde que conocimos RWD por primera vez, y el ecosistema está preparado para algunos cambios bastante importantes que se están produciendo en CSS.
Echemos un vistazo a los tipos de cambios que podemos esperar y cómo esto podría cambiar nuestro enfoque y cómo vemos el diseño de nuestras interfaces.
Contenido del Articulo
Los usuarios pueden establecer consultas de medios según sus preferencias
En resumen, podemos esperar que las nuevas consultas de medios basadas en preferencias nos ayuden a responder mejor a nuestros usuarios. Nos darán la posibilidad de diseñar la experiencia web de acuerdo con las preferencias o necesidades específicas de nuestros usuarios. Esto nos permitirá adaptar nuestra UX a la experiencia de un usuario específico.
Esta no es de ninguna manera una lista exhaustiva, pero para darle algunas ideas, estas consultas de medios basadas en preferencias pueden incluir:
@prefers-reduced-motion
@prefers-contrast
@prefers-reduced-transparency
@prefers-color-scheme
@inverted-colors
Esto nos ayudará a crear una experiencia web más sólida y personalizada adaptada específicamente a las necesidades de nuestros usuarios, especialmente aquellos con necesidades de accesibilidad. Para ir aún más lejos, esto puede tener en cuenta cualquier configuración que el usuario ya haya establecido en la configuración de su sistema operativo. Entonces, por ejemplo, cuando han indicado que prefieren el movimiento reducido en su sistema operativo, es muy probable que no aprecien la introducción súper llamativa, los cargadores o las animaciones voladoras de su página. Podríamos respetar sus preferencias y crear una experiencia de movimiento mejorada para todos los demás.
Otra consulta de medios popular: @prefers-color-scheme lo que nos permite cambiar nuestro diseño a modo claro u oscuro según la preferencia del usuario y la configuración en su sistema operativo. Esto es independiente del interruptor de la interfaz de usuario que el usuario debe usar para ingresar al modo oscuro, simplemente sucede automáticamente.
Las consultas de medios basadas en preferencias nos permitirán adaptar nuestra interfaz de usuario a la experiencia de un usuario específico.
Consultas de contenedores para dar nueva vida a su sistema de diseño
Una de las áreas más interesantes de CSS son las “consultas de contenedor”, también conocidas como “consultas de elementos”. Es difícil subestimar la importancia de pasar del diseño receptivo basado en páginas al diseño receptivo basado en contenedores para el desarrollo de un ecosistema de diseño. Si bien no es seguro usar esto hoy, es importante comprender cómo están cambiando las cosas.
En resumen, las solicitudes de contenedor nos permitirán establecer reglas basadas en el contenedor principal en lugar de en toda la página. Esto significa que cualquier componente es más autónomo, coherente con los sistemas de diseño modernos y realmente se convierte en módulos plug-and-play que se pueden mover a cualquier página o diseño sin tener que revisar todo en función de su nuevo entorno.
Las consultas de contenedor brindan un enfoque mucho más dinámico sobre cómo planificamos, diseñamos y construimos ciertos componentes, ya que el componente en sí posee su información operativa.
Incluso el propio Ethan Marcotte explica por qué las solicitudes de contenedores son tan importantes que debemos prestar atención.
Considerando diferentes factores de forma
Dado que hay un cambio y una expansión con diferentes factores de forma, algo así como nuevos tipos de pantallas, como pantallas plegables, necesitamos consultas de medios para lidiar con estos escenarios. De todas las cosas mencionadas aquí, tenga en cuenta que este es el más experimental y el trabajo en progreso para tratar de resolver cualquier complejidad que podamos enfrentar, considerando también cómo podría evolucionar el factor de forma en el futuro.
En el ejemplo de pantalla plegable en el prototipo, hay varias consultas de medios que le permitirán orientar la cobertura de la pantalla y cómo permitimos que nuestro contenido cambie para adaptarse a su nuevo entorno. Por ejemplo, puede colocar una barra lateral (o menú) en una pantalla y permitir que el contenido se desplace en otra pantalla.
Sé lo que estás pensando, llevamos más de 10 años diseñando para la web y utilizando un diseño web adaptable. Somos bastante desdeñosos con esto, entonces, ¿por qué deberían cambiar las cosas? Bueno, si realmente lo miramos al final del día, se trata de la experiencia del usuario de usuarios individuales. Nos esforzamos por un mundo en el que las cosas sean muy relevantes para la audiencia 1. Nuestra experiencia web no debe ser más que un intento de adaptarse a las necesidades del usuario. Además, algo como las consultas de contenedores tiene mucho sentido con el desarrollo de sistemas de diseño y con la forma en que creamos una red más portátil.
