El diseño web adaptable fue, en muchos sentidos, una reacción a los teléfonos móviles. Antes de que aparecieran los teléfonos inteligentes, muy pocas personas consideraban seriamente el aspecto que debían tener los sitios web en los dispositivos portátiles. Eso cambió con el meteórico auge de los teléfonos móviles con navegadores web integrados.
El diseño web adaptable fomentaba una mentalidad que cuestionaba las suposiciones. Mientras que antes era común suponer que un sitio web solo se vería en una computadora de escritorio, ahora es una práctica estándar diseñar ese mismo sitio web también para teléfonos y tabletas. De hecho, el uso de dispositivos móviles eclipsó el uso de computadoras de escritorio en la Web.
Esta mentalidad receptiva te servirá para el futuro. Es totalmente posible que tus sitios web se vean en dispositivos y pantallas que ni siquiera podemos imaginar hoy en día. Y esta mentalidad se extiende más allá de las pantallas. Incluso ahora las personas usan dispositivos sin pantallas para acceder a tu contenido. Los asistentes de voz pueden utilizar tus sitios web si utilizas una base sólida de HTML semántico.
También hay experimentación en el mundo de las pantallas. Hoy en día, hay dispositivos en el mercado con pantallas plegables. Esto presenta algunos desafíos para tus diseños.
Pantallas dobles
Los usuarios de dispositivos plegables pueden elegir si quieren que su navegador web ocupe solo una de las pantallas o que abarque ambas. Si el navegador abarca ambas pantallas, el sitio web en pantalla estará dividido por la bisagra entre las dos pantallas. No se ve muy bien.
Segmentos del viewport
Existe una función multimedia experimental diseñada para detectar si tu sitio web se muestra en un dispositivo con pantalla doble. El nombre propuesto para la función multimedia es viewport-segments. Hay dos variedades: horizontal-viewport-segments y vertical-viewport-segments.
Si la función de medios horizontal-viewport-segments informa un valor de 2 y vertical-viewport-segments informa un valor de 1, significa que la bisagra del dispositivo se desplaza de arriba abajo, lo que divide el contenido en dos paneles lado a lado.
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
// Styles for side-by-side screens.
}
Si la función de medios vertical-viewport-segments informa un valor de 2 y horizontal-viewport-segments informa un valor de 1, la bisagra se desplaza de un lado a otro y divide el contenido en dos paneles, uno sobre el otro.
@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
// Styles for stacked screens.
}
Si tanto vertical-viewport-segments como horizontal-viewport-segments informan un valor de 1, significa que el sitio web se muestra en una sola pantalla, incluso si el dispositivo tiene más de una. Esto equivale a no usar ninguna consulta de medios.
Variables de entorno
La función multimedia viewport-segments por sí sola no te ayudará a diseñar con esa molesta bisagra. Necesitas una forma de conocer el tamaño de la bisagra. Aquí es donde las variables de entorno pueden ser útiles.
Las variables de entorno en CSS te permiten tener en cuenta las intrusiones de dispositivos extraños en tus estilos. Por ejemplo, puedes diseñar en torno a la “muesca” del iPhone X con los valores de entorno safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom y safe-area-inset-left. Estas palabras clave se incluyen en una función env().
body {
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
}
Las variables de entorno funcionan como propiedades personalizadas. Esto significa que puedes pasar una opción de resguardo en caso de que la variable de entorno no exista.
body {
padding-top: env(safe-area-inset-top, 1em);
padding-right: env(safe-area-inset-right, 1em);
padding-bottom: env(safe-area-inset-bottom, 1em);
padding-left: env(safe-area-inset-left, 1em);
}
Para que esas variables de entorno funcionen en el iPhone X, actualiza el elemento meta que especifica la información de viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
Ahora el diseño de la página ocupará todo el viewport y rellenará de forma segura el documento con los valores de inserción proporcionados por el dispositivo.
Para pantallas plegables, se proponen seis variables de entorno nuevas: viewport-segment-width, viewport-segment-height, viewport-segment-top, viewport-segment-left, viewport-segment-bottom y viewport-segment-right.
Este es un ejemplo de un diseño con dos columnas, una más ancha que la otra.
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
Para pantallas dobles con una bisagra vertical, configura la primera columna para que tenga el ancho de la primera pantalla y la segunda columna para que sea el ancho de la segunda pantalla.
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
main article {
flex: 1 1 env(viewport-segment-width 0 0);
}
main aside {
flex: 1;
}
}
Considera la pantalla doble como una oportunidad. Quizás se pueda usar una pantalla para mostrar contenido de texto desplazable mientras que la otra muestra un elemento fijo, como una imagen o un mapa.
El futuro
¿Las pantallas plegables se convertirán en la próxima gran herramienta? ¿Quién sabe? Nadie podría haber predicho cómo serían los dispositivos móviles populares, por lo que vale la pena tener una mente abierta sobre los factores de forma futuros.
Sobre todo, vale la pena asegurarse de que tus sitios web puedan responder a todo lo que el futuro pueda traer. Eso es lo que te da el diseño adaptable: no solo un conjunto de técnicas prácticas, sino también una mentalidad que te servirán mientras construyes la red del mañana.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre la configuración de la pantalla
¿Qué consulta de medios se orienta a un dispositivo plegable en modo horizontal dividido?
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1)@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1)@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 2)@media (vertical-viewport-segments: 1) and (horizontal-viewport-segments: 1)¿Qué son las variables de entorno? P. ej., env(safe-area-inset-top)