Este listado ofrece una serie de directrices a seguir en el desarrollo de WebApps, Algunas son ampliamente aplicables a cualquier sitio web para móviles mientras que otras son específicas para la creación de aplicaciones.
Hemos dividido esta lista en tres categorías principales:
- Experiencia de usuario (UX) e Interfaz de usuario (UI)
- Rendimiento
- Pantalla de inicio y fuera de línea
UX y UI
No pongas las interacciones táctiles demasiado cerca de los bordes de la pantalla.
Por desgracia, las aplicaciones web móviles son consideradas de segunda clase en relación con las aplicaciones nativas. Con frecuencia los navegadores han omitido interacciones táctiles predeterminadas que no puedes cambiar. Por ejemplo el "swipe a la izquierda" en Safari. Es importante que cuando estés diseñando una aplicación te asegures de dejar margen suficiente con el borde de la pantalla.
Cuidado con el click delay
Cuando tocas algo en una web en el móvil, por defecto aplica un retraso de 300 ms entre cuando tocas y cuando se activa el evento. Esto se ha corregido en android 4.4+, pero sigue siendo un problema en iOS. La solución es utilizar una biblioteca como fastClick.
FastClick detecta cuando el dedo del usuario sale de la pantalla, a través de eventos touchEnd, e inmediatamente activa eventos de clic sin el retardo inherente en el comportamiento por defecto.
Posición absoluta de tu cabecera fija
Es recomendable no fijar la cabecera en la parte superior del contenido. En su lugar, poner el contenido en un contenedor con la propiedad absolute-positioned con scroll overflow.
A continuación, poner la cabecera en un contenedor relacionado que también sea absolute. De esta manera, el desplazamiento del contenido no afecta a la cabecera ya que no se fija sobre la parte superior del otro. Esta técnica también funciona bien con Overscroll.
ADVERTENCIA: Esto hará que el doble toque en la parte superior de Safari móvil no se desplace a la parte superior de la página, puesto que ya no está el cuerpo de desplazamiento.
Utiliza siempre el impulso de desplazamiento
Ahora que el desplazamiento está en un contenedor independiente, ocurre que ha perdido su impulso. Para recuperarlo, hay que añadir -webkit-overflow-scrolling: touch; al contenedor con overflow: scroll. Esto le da al elemento el impulso del scroll, en lugar de finalizar el desplazamiento en el momento en que el usuario pone el dedo fuera de la página.
Prevenir el Overscroll en el body.
Si quieres que tu aplicación web se parezca a una App nativa, tienes que deshacerte del Overscroll. El Overscroll es lo que ocurre cuando un usuario es capaz de hacer scroll en un elemento que ha sobrepasado los límites. Cuando esto ocurre en un elemento del body, aparece un fondo gris que y todo el diseño previsto para la pantalla se va al garete.
Puedes solucionar este problema fácilmente con cordova / PhoneGap con esta sencilla configuración xml.
<preference name="DisallowOverscroll" value="true" />
También es posible solucionar este problema con simple javascript.
Hacer que las cosas que no deberían ser seleccionables no lo sean
Es realmente molesto cuando un usuario que intenta interactuar con un elemento hace que el elemento, o el texto dentro de él se seleccione en su lugar. Añadiendo user-select: none a todo, a excepción de aquello que se deba poder copiar y pegar puede ser la solución.
Añadir -webkit-touch-callout: none; previene la posibilidad de abrir un menú contextual al hacer un toque mantenido sobre un enlace o imagen.
user-select: none;
-{prefix}-user-select: none;
-webkit-touch-callout: none;
En Android, para evitar que estos menús aparezcan:
if ( navigator . userAgent . match ( /Android/i ) ) noContextMenu . addEventListener ( 'contextmenu' , function ( e ) { e . preventDefault ( ) } )
Cambia el gris al resaltar un elemento por cualquier otro color.
Por defecto, los navegadores web para móviles muestran un color gris al seleccionar algún elemento. Este es un claro indicativo de que la aplicación no es nativa.
La solución realmente fácil es agregar esto a tu css.
* {
-webkit-tap-highlight color : rgba (0,0,0,0) ;
}
Utiliza estados : active o añade clases activas
Una vez solventado el gris del elemento seleccionado tenemos que dar a los usuarios información cuando toque algo que es “tocable”.
La forma más fácil de hacer esto es agregar estados : active a los elementos al tocarlos.
button:active {
color: green;
}
Oculta el navegador cuando añaden tu aplicación a la pantalla de inicio
Si a alguien le gusta tu aplicación lo suficiente como para añadirla a su pantalla de inicio, ¿por qué no hacer que su experiencia sea aún más real? Puedes quitar la barra de direcciones, los botones siguiente y atrás, y otros controles del navegador con unas pocas etiquetas meta.
<!-- android --> <meta name="mobile-web-app-capable" content="yes"> <!-- iOS --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="translucent-black"> <meta name="apple-mobile-web-app-title" content="My App">
Ocultar con opacidad o traslada fuera de la pantalla un elemento si lo vas a animar
Si tienes un elemento que puede aparecer en pantalla en cualquier momento, no lo hagas con display: none;. Si lo haces, tendrás que cargarlo antes de que aparezca. Así, para cosas como menús ocultos, lo mejor es ocultarlos mediante el establecimiento de la opacity a 0 o trasladándolo fuera de la pantalla (translate3d (-9999px, 0, 0) . De esta manera ya está cargado y dispuesto para actuar sobre él.
No utilices un desplazamiento personalizado a menos que realmente lo necesites
Pero no debería ser necesario.
A menos que estés tratando de hacer algo de fantasía como paralax, o efectos muy especiales al desplazarse hacia abajo por ejemplo. Sin embargo, es difícil ver buen comportamiento de efectos paralax u otros en el móvil.
Prevenir el escalado por parte del usuario
Si estás construyendo una aplicación que pretendes equiparar a nativa, es probable que no quieras permitir al usuario ampliar arbitrariamente la pantalla.
< meta name = " viewport " content = " width = device-width,height = device-height,user-scalable = no,initial-scale = 1.0,maximum-scale = 1.0,minimum-scale = 1.0 " >
Si utilizas esta etiqueta meta, evitarás que el usuario escale y también evitarás la ampliación debido al foco de entrada y la ampliación debido a la orientación del dispositivo.
Pon a prueba tus botones Atrás y Adelante y linkability
A pesar de que tu aplicación proporcione su propia navegación, no puedes simplemente ignorar la navegación por defecto del navegador. Aprende a utilizar pushState, o encuentra un framework que lo maneje por ti.
Activa el IE cleartype
Puedes activar ClearType en los navegadores basados ??en IE para que el texto en tu aplicación móvil se vea mejor en pantallas pequeñas.
<meta http-equiv="cleartype" content="on">
Rendimiento
Construir con rendimiento
Es mucho más fácil construir algo que está optimizado desde el primer día, que construir algo que "funciona" y luego tratar de optimizarlo. Si algo no funciona, trata de entender de inmediato qué ocurre, antes de tener múltiples problemas posteriores imposibles de depurar, o se habrán convertido en parte integral de la forma en que funciona la aplicación.
Anima sólo lo referente a transformar y la opacidad
Esto es importante. La animación de propiedades como la anchura, la altura, box-shadow, o cualquier cosa que no sea transform o opacity no es aconsejable. La animación de cualquier otra propiedad hará que se resienta el rendimiento. Tu escritorio seguramente será lo suficientemente potente como para redibujar la animación, ya que cambia 60 veces por segundo, pero los teléfonos de los usuarios no lo serán, y como resultado obtendrás una aplicación lenta y que no responde.
Esto puede cambiar a medida que los navegadores móviles se van mejorando y optimizando. En las últimas versiones de Chrome para Android, si especifica una etiqueta meta especial, puedes animar una gran cantidad de propiedades que antes eran lentas a 60fps. Aunque nuestra recomendación de momento es limitarse a animar transform y opacity.
Añadir translateZ o will-change a los elementos animados
Para mejorar el rendimiento de tus animaciones, añade transform: translateZ y/o will-change: transform o will-change: opacity. Esto permite que el navegador sepa que vas a animar esta propiedad y que debe cargar una capa en la GPU.
No utilices jQuery animate o desvanecimiento
JQuery animate utiliza un setInterval en lugar de requestAnimationFrame, y no tiene un buen soporte para la animación de las transformaciones CSS, que son básicamente lo único que puedes animar de forma segura en el móvil (excepto la opacidad). Utiliza sólo animaciones CSS, transiciones, Velocityjs y/o Impulse.
No cambiar el tamaño de imágenes clientside
Los navegadores tienen un tamaño de caché limitado para imágenes redimensionadas. Una vez que la memoria caché se llena, las imágenes más antiguas quedan fuera de la caché. Esto significa que, como el usuario se desplaza arriba y abajo por la página, constantemente se cargarán imágenes que no están en la memoria caché. Estas imágenes deberán ser decodificadas y redimensionadas de nuevo sobre la marcha.
La forma en que funciona es la siguiente. El navegador decodifica la imagen en cualquier formato en que se encuentre (jpeg, png, lo que sea), en un mapa de bits, que luego cambia de tamaño y almacena en caché.
Sin embargo, los navegadores tienen un tamaño de caché limitado para imágenes redimensionadas. Una vez que la memoria caché se llena, las más antiguas se borran de la caché. Esto significa que, como te estás desplazando hacia arriba y hacia abajo en la página, constantemente te encontrarás con imágenes que no están en la memoria caché. Y éstas tendrán que ser decodificadas y redimensionadas de nuevo sobre la marcha.
La solución para evitar áreas en blanco mientras se cargan las imágenes es servir y descargar dichas imágenes en la resolución en que van a visualizarse.
Redibujar antes de animar
Como hemos dicho anteriormente, una de las claves para conseguir animaciones rápidas es asegurarte de que las animaciones no están constantemente redibujando la imagen.
La solución consiste en aplazar la animación hasta después de haber redibujado. Por suerte esto es muy fácil de hacer. En primer lugar, agrega la nueva vista a la DOM, pero asegúrate de que está fuera de la pantalla o es transparente. Luego, en una llamada requestAnimationFrame, haz la animación.
Impotante: si estás haciendo una página grande, la animación no funcionará mal, pero puede que tengas que esperar mucho antes de que poder animar. Esto es debido a que redibujar mucho contenido lleva tiempo. En general, cuando este es el caso, trata solo de redibujar lo que vaya "por encima del pliegue" antes de animar, y luego empezar a redibujar todo lo demás en asyncronously una vez que está cargado.
Pantalla de inicio y Offline
Iconos táctiles de configuración para la pantalla de inicio del usuario
Un componente clave de la experiencia nativa es la capacidad de lanzar la aplicación a través de un icono en la pantalla de inicio del usuario . iOS y Android hacen que esto sea posible, para una variedad de combinaciones de resolución y tamaño.
<!-- android --> <link rel="shortcut icon" sizes="196x196" href="icon-196x196.png"> <!-- iOS --> <link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
Añadir una pantalla de bienvenida
iOS va incluso más allá al mostrar una imagen de inicio de la carga webapp, al igual que el usuario vería durante el período de carga de una aplicación nativa.
<link rel="apple-touch-startup-image" href="img/l/splash.png">
Cambiar el título de la pantalla de inicio
iOS y Android, por defecto, establecen el título del icono de la pantalla de inicio para el título de la página. Esto se puede cambiar en los dispositivos iOS con la etiqueta apple-mobile-web-app-title.
< meta nombre = " apple-móvil-web-app-título " contenido = " Lustre " >
Android, no tiene una alternativa de este tipo - que se establecerá en tu <title>.
Proporciona tu propia navegación
Si un usuario agrega tu aplicación a su pantalla de inicio, no tendrá acceso a los botones de siguiente o atrás, por lo que necesita ser capaz de navegar por todas las secciones sin éstos controles.
Con la aplicación nativa común metaphor o transitioning para la transición entre vistas funciona muy bien. Puedes usar animaciones CSS para configurar las transiciones, y pushState para configurar la función del botón Atrás para cada página.
Offline caché
Si los usuarios van a agregar tu aplicación a sus pantallas de inicio, lo mejor es que funcione independientemente de si están conectados a Internet. Ahí es donde entra la app-cache. La memoria caché de la aplicación permite a los desarrolladores para definir cuáles son los recursos que se deben guardar y garantiza que estarán disponibles cuando el usuario ya no está conectado a Internet.
Desconectado datos
Los datos del usuario se pueden almacenar fuera de línea también. Ahorrar algunos datos en localStorage o IndexedDB puede hacer que su aplicación mucho más útil cuando el usuario está fuera de línea y no puede conectarse a los servidores de la aplicación. Si su aplicación tiene los datos que un usuario puede querer acceder cuando no están en línea, almacenar de forma local y sincronización cuando vienen de nuevo en línea.
Diseña para offline desde el principio.
La mejor manera de prepararse para el offline es diseñar pensando en él desde el principio. No existen pautas específicas en esta sección y la aplicación puede variar dependiendo de la naturaleza y las necesidades de la aplicación en cuestión. Lo que si es recomendable es que cuanto antes se pueda identificar qué datos son necesarios, cómo se van a utilizar, y que transacciones con el servidor son necesarias para que la aplicación funcione, mejor funcionalidad va a tener tu aplicación sin depender exclusivamente de si existe o no conexión a internet.
Comentarios