Configuraciones de pantalla

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 cómo debían verse y funcionar los sitios web en los dispositivos portátiles. Eso cambió con el aumento meteórico de los teléfonos celulares con navegadores web integrados.

El diseño web adaptable alentó una mentalidad que cuestionaba las suposiciones. Mientras que anteriormente 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 superó al de las computadoras de escritorio en la Web.

Esta mentalidad receptiva te servirá para el futuro. Es totalmente posible que los usuarios vean sus sitios web en dispositivos y pantallas que hoy ni siquiera podemos imaginar. Y esta mentalidad va 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 usas una base sólida de HTML semántico.

También hay experimentación en el mundo de las pantallas. En la actualidad, existen dispositivos con pantallas plegables en el mercado. Esto introduce algunos desafíos para tus diseños.

Pantalla doble

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 se dividirá por la bisagra entre las dos pantallas. No se ve muy bien.

Segmentos de viewport

Existe una función experimental de medios 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. Existen dos variedades: horizontal-viewport-segments y vertical-viewport-segments.

Si la función multimedia horizontal-viewport-segments informa un valor de 2 y vertical-viewport-segments informa un valor de 1, significa que la bisagra del dispositivo se extiende de arriba abajo y que divide el contenido en dos paneles en paralelo.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  // Styles for side-by-side screens.
}

Si la función multimedia vertical-viewport-segments informa un valor de 2 y horizontal-viewport-segments informa un valor de 1, la bisagra se extiende de lado a lado y divide el contenido en dos paneles, uno encima del 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 en torno a esa molesta bisagra. Necesitas una forma de conocer el tamaño de la bisagra. Aquí es donde las variables de entorno pueden ayudar.

Las variables de entorno en CSS le permiten tener en cuenta las intrusiones de dispositivos incómodas en sus estilos. Por ejemplo, puedes diseñar en torno a la "muesca" en el 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 unen 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 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 completará de forma segura el documento con los valores de inserción proporcionados por el dispositivo.

Para las 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;
  }
}

En el caso de las pantallas dobles con una bisagra vertical, configura la primera columna para que sea 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;
  }
}

Trata a las pantallas dobles como una oportunidad. Quizás una pantalla se pueda usar 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 serán la próxima gran innovación? Quién sabe. Nadie podría haber predicho la popularidad de los dispositivos móviles, por lo que vale la pena tener una mente abierta sobre los factores de forma futuros.

Por sobre todas las cosas, es importante asegurarse de que sus sitios web puedan responder a lo que sea que depare el futuro. Eso es lo que el diseño adaptable te ofrece: no solo un conjunto de técnicas prácticas, sino una mentalidad que te servirá para construir la red del futuro.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre configuraciones de pantalla