Cómo adaptar una aplicación Angular para dispositivos móviles.

Principales características a tener en cuenta para la adaptación de una aplicación móvil.

Tamaño y orientación de pantalla

La diferencia más evidente que podemos encontrar cuando un usuario accede a una web con un dispositivo móvil frente a uno de escritorio es el tamaño de la pantalla. Y no sólo es que sea mucho más pequeña que en un ordenador de sobremesa o portátil, sino que el ancho y el alto pueden intercambiarse repentinamente sólo con el hecho de girar el aparato. Si los componentes de nuestra aplicación tienen definidos tamaños fijos y no son capaces de adaptarse a esos cambios. Es probable que se vean solapados e incluso se muestren fuera de la zona visible del usuario, quedando la página impracticable para el visitante.

Teclado

Por si eso fuera poco, cuando mostramos un campo de formulario o cualquiera otro que requiera de la introducción de texto por parte del usuario. El teclado ocupará una buena parte de esa pantalla, reduciendo todavía más el espacio disponible para mostrar datos. Esto es especialmente importante para formularios que requieran mostrar algún texto de ayuda que debe ser visualizado a la vez que se escribe. La aparición del teclado puede desplazar un campo necesario fuera de la zona visible y, en tan poco espacio, es poco usable que el usuario tenga que realizar un desplazamiento de pantalla.

Ventanas de información

Lo mismo ocurre con ventanas modales que puedan abrirse sobre la aplicación que se está visualizando. Son buenos recursos para desplegar contenido, pero suelen añadir un nuevo marco alrededor, reduciendo el tamaño disponible. Si hacemos uso de ellas en vista móvil, deben de estar adecuadamente preparadas para no confundir al usuario. Además, debemos adaptar su botón de cierre pues, al no tener cursor, la precisión del usuario será menor.

Eventos de ratón

En relación a esto último, si tenemos alguna información que sólo se muestre con algún evento de ratón, como puede ser el mouse-over (posar el cursor encima), será totalmente inaccesible para el usuario móvil.

Rapidez

Otra cosa a tener en cuenta es que, cuando estamos con el móvil, solemos ser más impacientes en cuanto a los tiempos de espera. Hacemos una navegación más dispersa y, si se trata de una web cuyo objetivo es la retención del usuario, hay que tratar de optimizar el tiempo que tenemos al visitante bloqueado mirando una pantalla de carga. El riesgo de que decida cerrar la ventana y dedicarse a otra cosa es más alto que si estuviera con un dispositivo de escritorio.

Pérdida de cobertura o conexión

Por último, es especialmente importante que la aplicación esté preparada para perdidas repentinas de conexión, a causa de problemas de cobertura de la red. Si el usuario está introduciendo datos, es recomendable guardarlos cada cierto tiempo porque puede quedarse sin conexión justo en el momento de finalizar y podría perderlo todo. En caso de formularios de datos, es mejor dar la opción de rellenar campos de uno en uno (con su correspondiente guardado), que mostrarle una pantalla con todos los campos juntos para rellenar.

Adaptando aplicaciones Angular para móvil

A continuación daremos  a conocer algunos puntos clave a tener en cuenta en la creación/transformación de una aplicación Angular. Para hacerla accesible a dispositivos móviles. Sin embargo, la mayoría de cosas pueden ser también aplicables para cualquier tecnología web que utilice HTML, CSS i/o Javascript/Typescript.

Identificar el tipo de dispositivo

Lo primero que debemos decidir es si queremos que la visualización desde todos los dispositivos sea la misma (que sea flexible y se adapte) o queremos hacer una versión específica para cuando se acceda con dispositivos móviles.

Si nos decidimos por esta segunda opción, tenemos que saber detectar si el usuario accede desde móvil. Para ello, podemos fijarnos en las dos siguientes características:

• Propiedad userAgent del navegador. Accedemos a ella mediante la clase navigator y, utilizando una expresión regular que la compare contra una lista de los navegadores móvil más comunes. Podemos ser capaces de detectar la mayoría de casos.
• Resolución de la pantalla. Como podemos habernos dejado algún navegador en la lista, o puede que salgan nuevos que no tenemos detectados, está bien hacer una segunda comprobación utilizando el ancho y el alto de la pantalla incluidos en la propiedad window.screen. Debemos fijar un límite superior cuyos valores inferiores consideremos que pertenecen a un dispositivo móvil.

Combinando estas dos validaciones, podemos crear un servicio con un método esVistaMovil() que nos indique si la navegación se está realizando desde un dispositivo móvil o no.

A partir de aquí, tendremos que tener dos componentes y modificar el app.component para hacer uso del nuevo servicio y redirigir la navegación a uno u otro según el tipo de dispositivo.

Sin embargo, si no hay otras restricciones que nos lo impidan, la mejor opción es realizar un componente común para todos los dispositivos, de manera que los elementos se adapten al espacio disponible. Es decir, seguir la técnica de diseño web adaptativo o responsive.

Adaptar el contenido a la pantalla

El primer paso sería añadir en nuestro html de entrada (index.html) la siguiente etiqueta:

Al incluir la propiedad viewport le decimos al navegador como queremos que renderice el contenido y, con los valores que se muestran, indicamos que ajuste el ancho de la web al de la pantalla, teniendo en cuenta el zoom aplicado en ese momento.

A la hora de distribuir los componentes, tenemos que evitar el uso de valores fijos en las posiciones, los anchos y los altos de los elementos. Mejor utilizar valores relativos como porcentajes. Todo, incluidas las imágenes y otros elementos multimedia, tiene que ser susceptibles de ser escalados

Web de Viewnext en navegador de escritorio y móvil

Una buena opción para distribuir adecuadamente los elementos puede ser el uso de la librería opensource PrimeFlex de PrimeFaces, disponible en npm: npm install primeflex –save

En esta librería se incluyen diversas utilidades y estilos que pueden ser de gran ayuda para renderizar nuestros elementos correctamente. Por ejemplo, el sistema Grid System es un conjunto de clases que nos permite optimizar el espacio y distribuir los elementos como queramos. Su funcionamiento comienza utilizando la clase CSS grid en un elemento y, a partir de ahí, utilizamos la clase col en sus elementos hijos. Cada elemento grid puede incluir hasta 12 elementos col, pero si queremos que alguno de los hijos ocupe más de una unidad utilizamos col-n en lugar de col, siendo n el número de unidades a ocupar (col-12 si queremos que ocupe todo el ancho). Es otra forma de usar porcentajes, pero nos permite jugar con los números para distribuir los elementos en las filas y columnas que necesitemos.

Por ejemplo, supongamos que queremos mostrar un texto y, a continuación, dos filas de tres botones cada una y, al final, un botón más que ocupe todo el ancho disponible. Usando el Grid System, el html de nuestro componente sería:

Distribuciones

Visualizándolo en distintas resoluciones, vemos como el contenido se adapta al espacio disponible, respetando la distribución que hemos indicado.

• Móvil en horizontal:

• Móvil en vertical:

• Escritorio:

Adaptar el contenido con Media Queries.

Aun así, puede haber una serie de características que queramos que tengan una apariencia diferente según el dispositivo. Por ejemplo, si una pantalla es pequeña es recomendable: que el tamaño del texto sea más grande que si es un monitor. Consiguiendo así facilitar la lectura. En este tipo de cosas podemos utilizar las Media Queries, que es una característica de CSS que nos permite aplicar estilos condicionalmente según el valor de alguna propiedad.

Teniendo en cuenta el ejemplo anterior, si queremos hacer que el texto sea el doble de grande en la versión móvil añadimos el siguiente estilo al archivo css de nuestro componente:

Esto duplicará el tamaño de los textos que tengan aplicada la clase grande, siempre y cuando el tamaño de la pantalla sea menor que 600px. Si añadimos esta clase al texto inicial del ejemplo, el resultado será el siguiente:

Para tamaños superiores de pantalla, el texto se mantendrá igual, ya que el estilo no se aplicará. Podemos consultar la lista completa de propiedades a evaluar en la web del World Wide Web Consortium, que es la organización encargada de mantener el estándar.

Emulación de vistas de dispositivos móviles

Por último, recordar que los navegadores web de escritorio suelen tener una opción para emular dispositivos móviles y poder ver como se vería nuestra aplicación. Para activarla, hemos de abrir las Herramientas para desarrolladores mediante F12 o CTRL+SHIFT+I (Chrome y Firefox) y pulsar en el icono de dispositivo que se muestra en la siguiente imagen.

En la barra que nos aparece podemos seleccionar el dispositivo a emular e incluso cambiar la orientación vertical/horizontal. Cabe recordar que, aunque esta utilidad nos puede venir muy bien, no representa el dispositivo seleccionado a la perfección y podremos encontrar alguna diferencia cuando accedamos mediante el móvil.

Conclusiones

El acceso a internet únicamente desde el ordenador de sobremesa ha quedado atrás. Los smartphones son ahora el principal método de navegación, pero no hay que olvidar otras interfaces que también nos permiten acceder a aplicaciones web, como son los televisores, videoconsolas o centros multimedia. Las características de los dispositivos son cada vez más diversas y no podemos encorsetar nuestra aplicación a un único modelo estándar.

Por su parte, los dispositivos móviles continúan en evolución y ya pueden ser conectados a accesorios como teclados, ratones o pantallas, por lo que la línea entre móvil y escritorio se irá haciendo cada vez más difusa. En ese sentido, la comunidad W3C publica estándares técnicos de referencia llamados WCAG (Web Content Accessibility Guidelines), con el objetivo de que las aplicaciones web sean perceptibles, operables, comprensibles y robustas. Si seguimos estas pautas conseguiremos que nuestras aplicaciones sean aptas para cualquier tipo de dispositivo.