Controlar el diseño macro y micro en la nueva era del diseño web adaptable.
Diseño adaptable en la actualidad
Hoy en día, cuando se usa el término "diseño adaptable", lo más probable es que pienses en usar consultas de medios para cambiar el diseño cuando se cambia el tamaño de un diseño desde el tamaño para dispositivos móviles hasta el tamaño para tablets hasta el tamaño de escritorio.
Sin embargo, pronto, esta percepción del diseño responsivo podría considerarse tan desactualizada como el uso de tablas para el diseño de páginas.
Las consultas de medios basadas en viewports te proporcionan algunas herramientas potentes, pero carecen de mucha delicadeza. No tienen la capacidad de responder a las necesidades de los usuarios ni de inyectar estilos responsivos en los componentes.
Puedes usar la información global de viewport para aplicar diseño a tus componentes, pero estos aún no tienen sus diseños, 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 bastante rápido. CSS está evolucionando, y se aproxima una nueva era del diseño responsivo.
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.
Así que resulta que, una vez más, el ecosistema está listo para que ocurran cambios bastante grandes en el CSS. Los ingenieros de Chrome y de toda la plataforma web están creando el prototipado, las especificaciones y el inicio de la implementación para la próxima era del diseño responsivo.
Estas actualizaciones incluyen funciones multimedia basadas en las preferencias de los usuarios, consultas de contenedores y de medios para nuevos tipos de pantalla, como pantallas plegables.
Responsivo 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 multimedia de preferencias te permiten adaptar tus experiencias del usuario a las de tus usuarios.
Entre estas funciones multimedia de preferencias de los usuarios, se incluyen las siguientes:
prefers-reduced-motionprefers-contrastprefers-reduced-transparencyprefers-color-schemeinverted-colors- Y mucho más
Las funciones de preferencias recogen las preferencias que un usuario estableció en su sistema operativo y ayudan a crear una experiencia web más sólida y personalizada, en especial para aquellos con necesidades de accesibilidad.
prefers-reduced-motion
Los usuarios que configuraron preferencias del sistema operativo para movimiento reducido solicitan menos animaciones cuando usan sus computadoras en general. Por lo tanto, es probable que no quieran una pantalla de presentación llamativa, una animación de giro de tarjetas, un cargador intrincado ni otras animaciones llamativas mientras usan la Web.
Con prefers-reduced-motion, puedes diseñar tus páginas teniendo en cuenta las imágenes de movimiento reducido y crear una experiencia mejorada con movimiento para quienes no tengan este conjunto de preferencias.
Esta tarjeta tiene información en ambos lados. La experiencia de movimiento reducido del modelo de referencia es un encadenado para mostrar esa información, mientras que la experiencia mejorada con movimiento es un giro de tarjetas.
Esta opción no debe significar "sin movimiento", ya que el movimiento es muy importante para transmitir información en línea. En cambio, proporciona una experiencia de referencia sólida que guíe a los usuarios sin movimiento innecesario y mejora progresivamente esa experiencia para los usuarios sin esas necesidades o preferencias de accesibilidad.
prefers-color-scheme
Otra función multimedia de preferencia 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 de escritorio o dispositivos móviles, los usuarios pueden establecer una preferencia por los temas claro, oscuro o automático, que cambian según la hora del día.
Si configuras tu página con propiedades personalizadas de CSS, intercambiar los valores de color es sencillo. Puedes actualizar rápidamente tus valores de 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 emulación en lugar de abrir las preferencias del sistema cada vez.
Cómo diseñar para el tema oscuro
Cuando diseñas para un tema oscuro, no se trata solo de invertir los colores del fondo y del texto o las barras de desplazamiento oscuras. Hay algunas consideraciones que quizás no sepas. 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 delante, puedes usar luz en el color de fondo del elemento para dibujarlo hacia adelante. Esto se debe a que las sombras no serán tan eficaces 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 cada vez son más populares en los dispositivos móviles.
Un estudio de Android de 2018 sobre temas oscuros reveló un ahorro de consumo de energía de hasta un 60%, según el brillo de la pantalla y la interfaz de usuario en general. La estadística del 60% provino de comparar la pantalla de reproducción de YouTube con un video pausado con un brillo del 100% de la pantalla usando el tema oscuro para la IU de la app en comparación con un tema claro.
Siempre que sea posible, debes brindar una experiencia de tema oscuro a los usuarios.
Responsivo al contenedor
Una de las áreas emergentes más interesantes del CSS son las consultas de contenedores, también llamadas consultas de elementos. Es difícil subestimar qué hará el cambio del diseño responsivo basado en páginas al diseño responsivo basado en contenedores para evolucionar el ecosistema de diseño.
Este es un ejemplo de las capacidades potentes que proporcionan las consultas de contenedores. Puedes manipular cualquiera de los estilos del elemento de tarjeta, incluida la lista de vínculos, los tamaños de fuente y el diseño general, según el contenedor superior:
En este ejemplo, se muestran dos componentes idénticos con dos tamaños de contenedor diferentes, que ocupan espacio en un diseño creado con la cuadrícula de CSS. Cada componente se adapta a su asignación de espacio única y se diseña a sí mismo en consecuencia.
Esta flexibilidad es algo que no es posible solo con las consultas de medios.
Las consultas de contenedores proporcionan un enfoque mucho más dinámico del diseño responsivo. Esto significa que, si colocas este componente de la tarjeta en una barra lateral o en una sección hero, o dentro de una cuadrícula dentro del cuerpo principal de una página, el componente posee su información responsiva y sus tamaños según el contenedor, no el viewport.
Esto requiere la regla at @container Funciona de manera similar a una consulta de medios con @media, pero, en su lugar, @container consulta al contenedor superior para obtener información, en lugar del viewport 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 superior. Luego, escribe una consulta @container
para aplicar diseño a cualquiera de los elementos dentro del contenedor en función de su tamaño,
mediante min-width o max-width.
El código anterior usa max-width y establece los vínculos en display:none. Además, se reduce el tamaño de la fuente de tiempo cuando el contenedor tiene un ancho inferior a 850px.
Tarjetas de consulta de contenedores
En este sitio web de demostración de plantas, cada una de las tarjetas de productos, incluida la de hero, la barra lateral de los artículos vistos recientemente y la cuadrícula de productos, tienen exactamente el mismo componente con el mismo lenguaje de marcado.
No se usan consultas de medios para crear todo este diseño, solo se usan consultas de contenedores. Esto permite que cada tarjeta de producto cambie al diseño adecuado para llenar su espacio. La cuadrícula, por ejemplo, usa un diseño de columna mínimo para permitir que los elementos fluyan a su espacio y vuelve a diseñar la cuadrícula cuando ese espacio está demasiado comprimido (lo que significa que alcanza 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 si se establece en display: flex, que tiene una dirección flexible predeterminada de "fila".
Con menos espacio, las tarjetas de productos se apilan. Cada tarjeta de producto se diseña por sí misma, algo que sería imposible solo con los estilos globales.
Combina consultas de contenedores con consultas de medios
Las consultas de contenedores tienen muchos casos de uso, uno es un componente de calendario. Puedes usar consultas de contenedor para volver a diseñar los eventos de calendario y otros segmentos según el ancho disponible del elemento superior.
Este contenedor de demostración consulta 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 fuente en los eventos programados para que se adapten mejor al espacio.
Luego, usa una consulta de medios para cambiar todo el diseño a tamaños de pantalla más pequeños. En este ejemplo, se muestra lo potente que es combine consultas de medios (ajustando los estilos globales o de macro) con consultas de contenedor (ajustando los elementos secundarios del contenedor y sus microestilos).
Ahora podemos pensar en los diseños de macro y micro dentro del mismo componente de la IU para permitir algunas decisiones de diseño con muchos matices realmente agradables.
Cómo usar las consultas de contenedores en la actualidad
Ahora puedes probar estas demostraciones 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 LayoutNG Grid.
La marca también habilita las funciones correspondientes de las Herramientas para desarrolladores de Chrome. Aprende a inspeccionar y depurar consultas de contenedores en Herramientas para desarrolladores.
Estilos con alcance
Para compilar en las consultas de contenedores, el grupo de trabajo de CSS también debate de forma activa los estilos con alcance a fin de ayudar con el espacio de nombres adecuado y la prevención de colisiones para los componentes.
Los estilos con alcance permiten un diseño de transferencia y de componentes específicos para evitar colisiones de nombres, algo que muchos frameworks y complementos, como los módulos CSS, ya nos permiten hacer en los frameworks. Esta especificación ahora nos permitiría escribir estilos encapsulados de forma nativa para nuestros 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 nos permitiría crear selectores con “forma de anillo”, en los que podemos especificar dónde mantener un estilo encapsulado y dónde salir de ese estilo con alcance para hacer referencia a un estilo más global.
Un ejemplo de esto sería un panel de pestañas, en el que queremos que las pestañas obtengan el estilo específico y que el panel dentro de las pestañas obtenga un estilo superior.
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 necesitaremos diseñar como comunidad web (como la pantalla con cambio de forma o la realidad virtual).
Las pantallas plegables o flexibles, y el diseño para abarcar la pantalla es un ejemplo de dónde podemos ver un cambio de factor de forma hoy. La expansión de la pantalla es otra especificación en la que se está trabajando para cubrir estos nuevos factores de forma y necesidades.
Una consulta de contenido multimedia experimental para la expansión de pantalla podría ayudarnos. Actualmente, se comporta de la siguiente manera: @media
(spanning: <type of fold>). La demostración configura un diseño de cuadrícula con dos columnas: una tiene un ancho de --sidebar-width, que es 5rem de forma predeterminada, y la otra es 1fr. Cuando el diseño se visualiza en una pantalla doble que tiene un solo pliegue vertical, el valor de --sidebar-width se actualiza con el valor de 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;
}
De esta manera, se habilita un diseño en el que la barra lateral (la navegación en este caso) ocupa el espacio de uno de los pliegues, donde la IU de la app llena el otro. De esta manera, se evita un "crecimiento" en la IU.
Puedes probar pantallas plegables en el emulador de Herramientas para desarrolladores de Chrome para ayudar a depurar y crear prototipos de pantallas que abarquen 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 permiten aislar estilos de componentes del diseño de página y los estilos globales, además de los estilos del usuario, lo que permite un diseño responsivo más resiliente. Esto significa que ahora puedes diseñar diseños de macros con consultas de medios basadas en páginas, incluidos los matices de intervalo de pantalla. Al mismo tiempo, usa microdiseños con consultas de contenedores en los componentes y agrega consultas de medios basadas en las preferencias del usuario para personalizar las experiencias del usuario en función de sus preferencias y necesidades únicas.
Este es el nuevo diseño responsivo.
Se utiliza la combinación del diseño de macros con el diseño micro y, además de todo eso, tiene en cuenta la personalización del usuario y el factor de forma.
Cualquiera de estos cambios por sí solos constituiría un cambio considerable en la forma en que diseñamos para la Web. Pero, combinados, representan 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 del viewport y comenzar a considerar todos estos ejes nuevos para obtener mejores experiencias personalizadas y basadas en componentes.
La próxima era del diseño responsivo ya está aquí, y ya puedes comenzar a explorarla por tu cuenta.
web.dev/learnCSS
Por ahora, si quieres mejorar tu juego de CSS y volver a revisar algunos conceptos básicos, mi equipo lanzará un curso y una referencia de CSS nuevos y totalmente gratuitos en web.dev. Puedes acceder a él a través de web.dev/learnCSS.
Espero que hayas disfrutado esta descripción general sobre la próxima era del diseño responsivo y algunas de las primitivas que vienen con él. También espero que estés tan entusiasmado como yo sobre lo que esto significa para el futuro del diseño web.
Nos brinda una gran oportunidad como comunidad de IU para adoptar diseños basados en componentes, nuevos factores de forma y crear experiencias responsivas para el usuario.