Controlar el diseño macro y micro en una nueva era del diseño web adaptable
Diseño responsivo hoy
Actualmente, cuando se usa el término "diseño responsivo", es muy probable que se piense en usar consultas de medios para cambiar el diseño cuando se cambia el tamaño de un diseño de tamaño móvil a tamaño de tablet y, luego, a tamaño de escritorio.
Sin embargo, pronto, esta percepción del diseño adaptable podría considerarse tan obsoleta como usar tablas para el diseño de la página.
Las consultas de medios basadas en el viewport te brindan algunas herramientas potentes, pero carecen de mucha precisión. No pueden responder a las necesidades de los usuarios ni insertar estilos responsivos en los componentes.
Puedes usar la información global del viewport para aplicar estilo a tus componentes, pero estos no son propietarios de sus estilos, y eso no funciona cuando nuestros sistemas de diseño se basan en componentes y no en páginas.
La buena noticia es que el ecosistema está cambiando, y lo está haciendo con bastante rapidez. El CSS está evolucionando, y una nueva era del diseño adaptable está a la vuelta de la esquina.
Esto sucede aproximadamente cada 10 años. Hace 10 años, entre 2010 y 2012, vimos un gran cambio con el diseño responsivo y para dispositivos móviles, y el surgimiento de CSS3.
Por lo tanto, el ecosistema está listo para que se produzcan cambios bastante grandes en CSS. Los ingenieros de Chrome y de toda la plataforma web están creando prototipos, especificando y comenzando la implementación de la próxima era del diseño responsivo.
Estas actualizaciones incluyen funciones de medios basadas en las preferencias del usuario, consultas de contenedores y consultas de medios para nuevos tipos de pantallas, como las pantallas plegables.
Capacidad de respuesta al usuario
Las nuevas funciones multimedia de preferencias del usuario te permiten diseñar experiencias web que se alineen con las preferencias y necesidades específicas del usuario. Esto significa que las funciones de medios de preferencia te permiten adaptar tus experiencias del usuario a las experiencias de tus usuarios.
Estas funciones multimedia de preferencias del usuario incluyen lo siguiente:
prefers-reduced-motionprefers-contrastprefers-reduced-transparencyprefers-color-schemeinverted-colors- Y mucho más
Las funciones de preferencias detectan las preferencias que un usuario configuró en su sistema operativo y ayudan a crear una experiencia web más sólida y personalizada, especialmente para las personas con necesidades de accesibilidad.
prefers-reduced-motion
Los usuarios que configuraron preferencias del sistema operativo para reducir el movimiento solicitan menos animaciones cuando usan su computadora en general. Por lo tanto, es probable que no les guste una pantalla de presentación llamativa, una animación de volteo de tarjetas, un cargador complejo ni otras animaciones llamativas mientras usan la Web.
Con prefers-reduced-motion, puedes diseñar tus páginas teniendo en cuenta el movimiento reducido y crear una experiencia mejorada con movimiento para quienes no tienen establecida esta preferencia.
Esta tarjeta tiene información en ambos lados. La experiencia de movimiento reducido básica es una transición cruzada para mostrar esa información, mientras que la experiencia mejorada con movimiento es un giro de tarjeta.
Prefers-reduced-motion no debería significar "sin movimiento", ya que el movimiento es fundamental para transmitir información en línea. En su lugar, proporciona una experiencia básica sólida que guíe a tus usuarios sin movimientos innecesarios y mejora progresivamente esa experiencia para los usuarios sin esas necesidades o preferencias de accesibilidad.
prefers-color-scheme
Otra función de medios de preferencias es prefers-color-scheme. Esta función te ayuda a personalizar tu IU según el tema que prefiera el usuario. En su sistema operativo, ya sea en computadoras o dispositivos móviles, los usuarios pueden establecer una preferencia para los temas claros, oscuros o automáticos, que cambian según la hora del día.
Si configuras tu página con propiedades personalizadas de CSS, intercambiar los valores de color será sencillo. Puedes actualizar rápidamente los valores de tu tema de color, como backgroundColor y textOnPrimary, para que se ajusten de forma dinámica al nuevo tema dentro de la consulta de medios.
Para facilitar la prueba de algunas de estas consultas de preferencias, puedes usar DevTools para la emulación en lugar de abrir las preferencias del sistema cada vez.
Diseño para el tema oscuro
Cuando se diseña para un tema oscuro, no se trata solo de invertir los colores de fondo y de texto, o de usar barras de desplazamiento oscuras. Hay algunas consideraciones que tal vez no tengas en cuenta. Por ejemplo, es posible que debas reducir la saturación de los colores en un fondo oscuro para reducir la vibración visual.
En lugar de usar sombras para crear profundidad y dibujar un elemento hacia adelante, es posible que desees usar luz en el color de fondo del elemento para dibujarlo hacia adelante. Esto se debe a que las sombras no serán tan efectivas sobre un fondo oscuro.
Los temas oscuros no solo proporcionan una experiencia del usuario más personalizada, sino que también pueden mejorar significativamente la duración de la batería en las pantallas AMOLED. Esas son las pantallas que vemos en los teléfonos de alta gama más nuevos, y se están volviendo cada vez más populares en los dispositivos móviles.
Un estudio de Android de 2018 sobre los temas oscuros mostró un ahorro de energía de hasta el 60%, según el brillo de la pantalla y la interfaz de usuario general. La estadística del 60% surgió de la comparación de la pantalla de reproducción de YouTube con un video pausado con el brillo de la pantalla al 100% usando el tema oscuro para la IU de la app en comparación con un tema claro.
Siempre que sea posible, debes proporcionar una experiencia de tema oscuro para tus usuarios.
Se adapta al contenedor
Una de las áreas emergentes más interesantes en CSS son las consultas de contenedor, que también se suelen llamar consultas de elementos. Es difícil subestimar lo que el cambio del diseño adaptable basado en páginas al diseño adaptable basado en contenedores hará para evolucionar el ecosistema de diseño.
Este es un ejemplo de las potentes capacidades que proporcionan las consultas de contenedores. Puedes manipular cualquiera de los diseños de los elementos de la tarjeta, incluidas la lista de vínculos, los tamaños de fuente y el diseño general según su contenedor principal:
En este ejemplo, se muestran dos componentes idénticos con dos tamaños de contenedor diferentes, ambos ocupando espacio en un diseño creado con CSS Grid. Cada componente se ajusta a su asignación de espacio única y se diseña en consecuencia.
Esta flexibilidad no es posible solo con las consultas de medios.
Las consultas de contenedor proporcionan un enfoque mucho más dinámico para el diseño responsivo. Esto significa que, si colocas este componente de tarjeta en una barra lateral, una sección de héroe o dentro de una cuadrícula en el cuerpo principal de una página, el componente en sí posee su información adaptable y se ajusta según el contenedor, no la ventana gráfica.
Esto requiere la regla @ @container. Funciona de manera similar a una consulta de medios con @media, pero, en cambio, @container consulta el contenedor principal para obtener información en lugar de la ventana gráfica y el usuario-agente.
.card {
container-type: inline-size;
}
@container (max-width: 850px) {
.links {
display: none;
}
.time {
font-size: 1.25rem;
}
/* ... */
}
Primero, establece la contención en el elemento principal. Luego, escribe una consulta @container para aplicar estilo a cualquiera de los elementos dentro del contenedor según su tamaño, usando min-width o max-width.
El código anterior usa max-width y establece los vínculos en display:none, además de reducir el tamaño de la fuente de hora cuando el contenedor tiene menos de 850px de ancho.
Tarjetas de consultas de contenedores
En el sitio web de demostración de la planta, cada una de las tarjetas de productos, incluida la de la sección principal, la barra lateral de elementos vistos recientemente y la cuadrícula de productos, son exactamente el mismo componente, con el mismo lenguaje de marcado.
No se usan consultas de medios para crear todo este diseño, solo consultas de contenedores. Esto permite que cada tarjeta de producto cambie al diseño adecuado para ocupar su espacio. Por ejemplo, la cuadrícula usa un diseño de columna minmax para permitir que los elementos fluyan en su espacio y vuelvan a diseñar la cuadrícula cuando ese espacio está demasiado comprimido (lo que significa que alcanzó el tamaño mínimo).
.product {
container-type: inline-size;
}
@container (min-width: 350px) {
.card-container {
padding: 0.5rem 0 0;
display: flex;
}
.card-container button {
/* ... */
}
}
Cuando hay al menos 350px de espacio en la cuadrícula, el diseño de la tarjeta se vuelve horizontal y se establece en display: flex, que tiene una flex-direction predeterminada de "row".
Con menos espacio, las tarjetas de productos se apilan. Cada tarjeta de producto se diseña a sí misma, algo que sería imposible solo con los diseños globales.
Combinación de consultas de contenedores con consultas de medios
Las consultas de contenedores tienen muchos casos de uso, uno de los cuales es un componente de calendario. Puedes usar consultas de contenedor para volver a diseñar los eventos del calendario y otros segmentos según el ancho disponible de su elemento principal.
Este contenedor de demostración realiza consultas para cambiar el diseño y el estilo de la fecha y el día de la semana del calendario, además de ajustar los márgenes y el tamaño de la fuente en los eventos programados para que se ajusten mejor al espacio.
Luego, usa una consulta de medios para cambiar todo el diseño para tamaños de pantalla más pequeños. En este ejemplo, se muestra lo potente que es combinar las consultas de medios (ajustar los estilos globales o macro) con las consultas de contenedores (ajustar los elementos secundarios del contenedor y sus microestilos).
Ahora podemos pensar en diseños macro y micro dentro del mismo componente de IU para permitir algunas decisiones de diseño matizadas muy agradables.
Cómo usar las consultas de contenedor hoy
Estas demostraciones ahora están disponibles para probarlas detrás de una función experimental en Chrome Canary. Ve a about://flags en Canary y activa la marca #enable-container-queries.
Esto habilitará la compatibilidad con los valores @container, inline-size y block-size para la propiedad contain y la implementación de cuadrícula de LayoutNG.
La marca también habilita las funciones correspondientes de las Herramientas para desarrolladores de Chrome. Obtén más información para inspeccionar y depurar consultas de contenedores en Herramientas para desarrolladores.
Estilos con alcance
Para compilar sobre consultas de contenedor, usa estilos con alcance con @scope para limitar el alcance de tus selectores.
Los estilos con alcance permiten aplicar estilos específicos a los componentes para evitar conflictos de nombres, algo que muchos frameworks y complementos, como los módulos CSS, ya nos permiten hacer dentro de los frameworks. Los estilos con alcance te permiten escribir estilos encapsulados de forma nativa para componentes con CSS legible sin necesidad de ajustar el lenguaje de marcado.
/* @scope (<root>#) [to (<boundary>#)]? { … } */
@scope (.tabs) to (.panel) {
:scope { /* targeting the scope root */ }
.light-theme :scope .tab { /* contextual styles */ }
}
El alcance te permite crear selectores con forma de "donut", en los que puedes especificar un límite superior y uno inferior. Los selectores incluidos en la regla @scope coinciden entre esos límites.
Un ejemplo de esto sería un panel de pestañas, en el que querrías que las pestañas obtuvieran los estilos con alcance, pero que el panel dentro de esas pestañas no se viera afectado por esos estilos con alcance.
Se adapta al factor de forma
El siguiente tema de nuestra conversación sobre la nueva era del diseño responsivo es un cambio en los factores de forma y las crecientes posibilidades de lo que tendremos que diseñar como comunidad web (como pantallas que cambian de forma o realidad virtual).
Las pantallas plegables o flexibles, y el diseño para abarcar pantallas son un ejemplo de dónde podemos ver un cambio en el factor de forma hoy en día. Además, la expansión de pantalla es otra especificación en la que se está trabajando para cubrir estos nuevos factores de forma y necesidades.
Una consulta de medios experimental para el uso de pantalla completa podría ayudarnos en este caso. Actualmente, se comporta de la siguiente manera: @media
(spanning: <type of fold>). En la demostración, se configura un diseño de cuadrícula con dos columnas: una tiene un ancho de --sidebar-width, que es de 5 rem de forma predeterminada, y la otra es 1fr. Cuando el diseño se ve en una pantalla doble que tiene un solo pliegue vertical, el valor de --sidebar-width se actualiza con el valor del entorno del pliegue izquierdo.
:root {
--sidebar-width: 5rem;
}
@media (spanning: single-fold-vertical) {
--sidebar-width: env(fold-left);
}
main {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
}
Esto permite un diseño en el que la barra lateral, la navegación en este caso, ocupa el espacio de uno de los pliegues, mientras que la IU de la app ocupa el otro. Esto evita que se produzca un "pliegue" en la IU.
Puedes probar las pantallas plegables en el emulador de Chrome DevTools para depurar y crear prototipos de expansión de pantalla directamente en el navegador.
Conclusión
Explorar el diseño de la IU más allá de una pantalla plana es otra razón por la que las consultas de contenedores y los diseños con alcance son tan importantes. Te brindan la oportunidad de aislar los estilos de los componentes del diseño de la página y los estilos globales, así como los estilos del usuario, lo que permite un diseño responsivo más resiliente. Esto significa que ahora puedes diseñar diseños generales con consultas de medios basadas en páginas, incluidas las sutilezas que abarcan la pantalla. Al mismo tiempo, usa diseños pequeños con consultas de contenedor en los componentes y agrega consultas de medios basadas en las preferencias del usuario para personalizar las experiencias según sus preferencias y necesidades únicas.
Este es el nuevo diseño responsivo.
Combina el diseño macro con el diseño micro y, además, tiene en cuenta la personalización del usuario y el factor de forma.
Cualquiera de estos cambios por sí solo constituiría un cambio considerable en la forma en que diseñamos para la Web. Sin embargo, en conjunto, significan un gran cambio en la forma en que conceptualizamos el diseño responsivo. Es hora de pensar en el diseño responsivo más allá del tamaño de la ventana gráfica y comenzar a considerar todos estos nuevos ejes para lograr mejores experiencias personalizadas y basadas en componentes.
La próxima era del diseño adaptable ya está aquí, y puedes comenzar a explorarla por tu cuenta.
web.dev/learnCSS
Por ahora, si quieres mejorar tu juego de CSS y, tal vez, repasar algunos conceptos básicos, mi equipo lanzará un curso y una referencia de CSS completamente nuevos y gratuitos en web.dev. Puedes acceder a ellos a través de web.dev/learnCSS.
Espero que hayas disfrutado de este resumen sobre la próxima era del diseño adaptable y algunas de las primitivas que la acompañarán. También espero que estés tan entusiasmado como yo con lo que esto significa para el futuro del diseño web.
Esto nos brinda una gran oportunidad como comunidad de IU para adoptar estilos basados en componentes, nuevos factores de forma y crear experiencias que respondan a las necesidades de los usuarios.