comparte el articulo 

¿Cómo hacer que un sitio móvil se sienta como una app? Parte 2

Actualizado el 07/10/2013 < > 0 Comentarios

Resumen: Explicamos las dos primeras técnicas para mejorar el rendimiento percibido y lograr un comportamiento similar al de una aplicación móvil nativa

Lograr que el usuario perciba un rendimiento y desempeño adecuadamente rápido al desplegar nuestro sito web en su dispositivo móvil, nos permitirá obtener su aprobación, al sentir que el comportamiento es similar al de una aplicación nativa. Para poder lograr mejorar este comportamiento percibido, es necesario seguir e implementar ciertos procedimientos.

A continuación expondremos algunas de las mejores técnicas para lograr dicho objetivo.

Añadir propiedades touch a los botones

Una de las maneras más fáciles de mejorar el rendimiento percibido en un sitio es habilitando el estado “active” en el dispositivo móvil.

Cada vez que un usuario da un toque sobre un botón de una página tiene que esperar por lo menos 300ms antes de que algo pase, esto se debe a que los navegadores añadieron un tiempo para asegurarse de que el usuario no intenta realizar otra acción, como por ejemplo dar un doble toque. Así que esperan un tercio de segundo para ver que más va a hacer el usuario, si no hace nada simplemente realizan la opción inicial y cuando la acción finalmente sucede, simplemente pone una capa gris y luego continua.

Esto se traduce en una muy mala experiencia de usuario, ya que estudios han demostrado que cualquier acción que tarde en responder más de 100ms hace sentir al usuario que se encuentra en espera. Sin embargo, la mayoría de los sitios móviles no se ocupan de este problema de rendimiento percibido, los diseñadores suelen dejar el estado touch tal y como viene por defecto para los enlaces y botones.

Para hacer que un sitio se sienta más rápido, se necesita lograr que los botones respondan inmediatamente al toque de un usuario y dar una indicación visual de que algo está pasando. Existe una propiedad en la web para mostrar cuando se hace clic en un botón o enlace, esta tiene el nombre de estado “:active”, y es comúnmente utilizada para los navegadores de escritorio.

Lamentablemente, ni iOS ni Android respetan esta propiedad cuando un enlace o botón es tocado en un equipo móvil. Para habilitar los estados “active”, es necesario agregar un evento simple a la página con JavaScript:

document.addEventListener("touchstart", function(){}, true)

Después, tendrás que utilizar un poco de CSS para agregar estilo al estado activo de nuestros botones y quitar el highlight:

-webkit-tap-highlight-color: rgba(0,0,0,0);

Con esta propiedad establecida en los botones, se sentirá que responden más rápido a pesar de que en realidad responden a la misma velocidad. Como se puede apreciar esto se logró de manera sencilla, solamente estamos dando información a los usuarios de forma inmediata en lugar de hacerlos esperar 300ms para ver si pasa algo.

Si quisieras ir un paso más adelante y hacer que las acciones en realidad responden inmediatamente, puede realizar un paso más. Utilizando una función JavaScript llamada fasttap o fastclick, se puede eliminar por completo que el retraso de 300ms. Esto, junto con los estados activos, hará que tus sitios web se sientan más rápidos.

Urilizar desplazamiento dinámico (Momentum Scrolling)

Si alguna vez has intentado crear un contenedor desplazable en un dispositivo móvil, es muy probable que hayas terminado con un desplazamiento bastante lento y nada adaptable como resultado. Afortunadamente Android 3+ e iOS 5+ han implementado una nueva propiedad llamada overflow-scrolling, la cual habilita el desplazamiento dinámico o mejor conocido por el término en inglés, momentum scrolling.

Al utilizar un desplazamiento dinámico en un sitio web este se siente nativo, ya que es nativo. Todo lo que necesitas hacer es añadir esta propiedad CSS a nuestros contenedores de desplazamiento:

-webkit-overflow-scrolling: touch;

Sin embargo, existe un problema con esta propiedad, y éste es que deshabilita la opción de tocar la barra superior de los teléfonos iPhone para regresarse al inicio de la página. Este error ha estado presente por un tiempo, y no parece que se arreglará en la versión más reciente del navegador Safari para iOS 7.

Una forma de evitar esto es creando una clase que agregue la propiedad “overflow-scrolling: touch” al contenedor y luego utilizar JavaScript para que aplique esa clase sólo cuando el contenedor este visible.

Para Android 4, ni siquiera es necesario utilizar esta propiedad. Cada contenedor desplazable tiene desplazamiento dinámico.

Para las versiones antiguas de Android, se tiene un par de opciones para hacer funcionar este desplazamiento. Una es la detección de desplazamiento dinámico utilizando Modernizr y modificar el layout para que el desbordamiento de contenedores se visible. La otra opción es utilizar alguna librería de JavaScript como iScroll, las cuales te permiten realizar funciones similares.

Publicado el 08/10/2013, última actualización 07/10/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras