Web Responsive Design para la nueva generación de celulares plegables o “foldables”
Cómo preparar tu web app para una nueva modalidad de celulares
En tecnología, la innovación es súper importante, y actualmente estamos viendo de cerca nuevas tendencias en términos de hardware y en particular, en las pantallas: los foldables o “dispositivos plegables”. Los foldables son dispositivos cuya pantalla se puede plegar, al momento existen dos tipos según su forma física: los que poseen una sola pantalla flexible (sin división) y dispositivos plegables que se dividen en dos pantallas. Samsung lanzó dos dispositivos del tipo sin división: Galaxy Z Flip y Galaxy Z Fold 2, a este lanzamiento le siguieron otros anuncios de compañías como Huawei y Microsoft, lo que nos indica la presencia de una nueva tendencia en el mundo móvil.
Si bien este concepto para ser bastante nuevo, haciendo un poquito de memoria pareciera ser un dejavú actualizado de otros modelos como el Motorola Razr (se acuerdan?) o de consolas de videojuegos como gameboy (aquellas épocas…). Pero si vamos más atrás en el tiempo, esto de poder “plegar” contenido comenzó con nada más ni nada menos que con una de las fuentes de información más antiguas: los diarios o revistas. Hace un tiempo, los diarios eran un pedazo de papel muy largo y bastante incómodo de manejar, los lectores sólo leían un par de titulares y luego lo tiraban a la basura (de ahí la importancia de ser noticia titular). Es por eso que más tarde, con el nuevo “formato plegable”, los lectores tenían más información al alcance y ganaban comodidad buscando información. Si hablamos de la tecnología actual, este nuevo formato conduce a nuevas formas de interacción para el usuario con una o múltiples pantallas, acompañada de nuevas experiencias móviles. Como desarrolladores, es importante echar un vistazo a lo que esto implica para el diseño web y cómo se puede aplicar conceptos de responsive design para continuar con una buena experiencia de usuario.
Nuevas Formas de crear contenido
L@s programador@s que están familiarizados con responsive design no encontrarán mucha dificultad ajustando el contenido de sus web apps a estos nuevos dispositivos, tengamos en cuenta que la idea no es diseñar para un dispositivo específico sino que su concepto nos indica que el contenido se adapte a las diferentes condiciones de hardware. Responsive Design es algo que es totalmente necesario para brindarle accesibilidad a la web, por ende no es algo que sea opcional, y no olvidemos que además ayuda a mejorar su SEO. Para los usuarios, los foldables traen nuevas funcionalidades y experiencias en cuanto a productividad e incluso pensar en nuevos formatos de “tablet portátil”. A continuación, exploremos algunas de estas nuevas características.
Multiwindow
Con multi-window, el usuario puede realizar varias tareas al mismo tiempo (hola multitasking!) pudiendo ver más de una app en la pantalla, por lo tanto, el dispositivo puede incluso funcionar como una pantalla dual. Recientemente, Samsung Internet lanzó una nueva funcionalidad: app pair para Edge Panel, lo que hace posible que se abra más de una pestaña del navegador utilizando este modo. En términos de diseño, esto se traduce a nuevos tamaños de pantalla a considerar, acá les dejo una guía con las medidas recomendadas para probar los diferentes escenarios de multiwindow, teniendo en cuenta que los viewports pueden ser más estrechos y recordando evitar el scrolling horizontal que para los usuarios resulta ser muy fastidioso.
Galaxy Z Flip admite dos apps al mismo tiempo diviendo la pantalla en superior e inferior, mientras que el Galaxy Fold 2 admite tres ventanas multi-activas.
Pop Up View
La función de Pop Up View está diseñada para permitir que aplicaciones seleccionadas puedan tener una nueva ventana emergente, a la aplicación se le puede ajustar la transparencia, así como minimizar y expandir el tamaño de la ventana.
A pesar de que no es una característica específica de los celulares foldables, está también relacionada con la capacidad de multitarea y el responsive design, el cual nos lleva a uno de sus principios: dejar que el usuario modifique el tamaño de la web app sin perder nada de contenido.
Postura
La principal innovación de estos celulares está en la forma física del dispositivo y las diferentes posturas que este pueda adquirir. Revisemos el Samsung Foldable, por ejemplo, si tenemos una aplicación web que contiene video, la misma página puede comportarse de manera diferente cuando está plana que cuando está en modo Flex .
Actualmente estamos trabajando en conjunto con otras compañías como Intel en estándares relacionados con esta premisa, para que les sea útil a los desarrolladores el poder detectar cuál es la postura actual que tiene el dispositivo, en dónde se encuentra el pliegue, etc. En próximos artículos mostraremos algunos ejemplos que hablen específicamente sobre estas posturas, pero mientras tanto, l@s invito a participar de esta conversación y pensar cómo podrían ser útiles estas posturas a la hora de programar web apps, qué tipo de contenido se podría crear tomando este nuevo diseño como ventaja?
A nuevos problemas, nuevas (o viejas) soluciones
Cuando plegamos un celular foldable y lo volvemos a desplegar, una de las consecuencias de esta acción es que la pantalla cambia de tamaño. Nuevamente, este no es un problema nuevo en el diseño de una web responsive, que el viewport cambie de tamaño o posición es algo que podemos ver sin necesidad de un celular foldable (por ejemplo al tener dos pantallas conectadas y desplazar el navegador entre una pantalla y otra). Algunas herramientas básicas que nos ayudan a construir un website responsive y que nos dan soporte aún en estos casos nuevos son CSS Grid y FlexBox. El desafío en cuanto a foldables es que hay que proporcionar una excelente experiencia de usuario cuando nuestra aplicación web transita de una pantalla a otra. Para los dispositivos que tienen más de una pantalla, por ejemplo, el Samsung Galaxy Fold, que tiene una pantalla externa además de la principal, debemos asegurarnos que en esta transición no se pierda ningún tipo de información y se presente el contenido correctamente. A continuación algunos ejemplos puntuales de problemas que identificamos en websites adaptándose a un dispositivo foldable y su solución.
Extra margen de contenido
Problema: al desplegar el dispositivo, el contenido de la pantalla interna contiene márgenes adicionales y el contenido se ve mucho más estrecho en lugar de aprovechar el espacio adicional.
Solución:
- Establecer el ancho máximo del contenido para que sea más pequeño que el tamaño de la pantalla real, verificar que los diseños no excedan el width: 100%
- Configurar márgenes mínimos / máximos al escalar el contenido.
- Configurar un “contenedor” para definir márgenes izquierdo y derecho utilizando unidades relativas (por ejemplo porcentaje) e incluso media querys para ajustar los márgenes de acuerdo al tamaño de la pantalla.
.container {
margin: 0 5%;
}@media screen and (max-width: 600px) {
.container{
margin: 0 8%;
}
}
Optimización del margen derecho
Problema: cuando el dispositivo se despliega, el contenido no está bien alineado y el margen derecho es demasiado grande. Esto suele ocurrir si el elemento principal no está centrado o por ejemplo cuando se tiene una columna adicional reservada para anuncios.
Solución:
- Usar el ancho del 100% cuando sea conveniente y evitar usar unidades fijas en los diseños. El mismo consejo que mencionamos anteriormente sobre márgenes adicionales se aplica en este caso.
- Evitar perder la calidad del contenido al ampliar el contenido, por ejemplo escalando tamaños de fuente demasiado grandes. Usar media querys para proporcionar diferentes tamaños de imágenes y fuentes si es necesario.
Optimización para pantalla externa
Problema: cuando el dispositivo cambia su postura, el diseño de algunas áreas no se reajusta, lo que causa, por ejemplo, que algunas de las imágenes desaparezcan o se corten. En el caso de la pantalla externa del Samsung Galaxy Fold, una imagen puede estar fuera de la pantalla externa cuando el dispositivo está plegado.
Solución:
- Usar media querys para volver a ajustar la imagen.
- Usar unidades relativas.
- Si el contenido está distribuido en diferentes columnas, se puede usar FlexBox para mostrar elementos como una sola fila, o en múltiples filas, ya que el espacio disponible disminuye.
.items {
display: flex;
justify-content: space-between;
}
Testing
Además de testear los diferentes tamaños de pantalla utilizando el devtools de tu navegador favorito, si querés ver los resultados en un celular “foldable” real, Samsung lanzó una serie de recursos en línea incluyendo un ‘Laboratorio de prueba remoto’. Esto permite probar aplicaciones en la PC usando un dispositivo Galaxy Fold y un emulador, permitiendo que los desarrolladores se puedan familiarizar con esta nueva interfaz de usuario y de esta manera promover la innovación dentro de este ecosistema.
Desplegando la web
Estamos al tanto viendo cuáles son las aplicaciones que la comunidad web está construyendo y cómo se aprovechan las nuevas formas de estos dispositivos. Responsive design sigue vigente y todavía tiene un papel clave en el desarrollo web, incluso en el “fold” y “unfold” de las web apps. CSS ha evolucionado tanto que cada vez nos ofrece más atajos para crear un diseño adaptable sin necesidad de librerías externas, por ejemplo, utilizando recursos como Grid CSS y FlexBox.
Además de las ya mencionadas innovaciones creadas durante el proceso de desarrollo de los celulares foldables, como multiwindow, y los esfuerzos para crear estándares relacionados a esta tecnología, esperamos que no solo creen una mejor experiencia de usuario, sino que también se establezca un legado importante para la próxima generación de teléfonos plegables.
Qué web apps crearías para estos celulareS?
