La Chrome Dev Summit finalizó hace un par de semanas. Este es el primero de una serie de informes del evento. Se hizo un gran énfasis en el desarrollo para dispositivos móviles y multidispositivo, así que vamos a comenzar con eso.
Los mejores patrones de UX para aplicaciones web móviles, de Paul Kinlan
Después de un análisis de la optimización para dispositivos móviles de los 1,000 sitios principales, detectamos algunas áreas problemáticas: El 53% aún solo ofrece una experiencia solo para computadoras de escritorio, el 82% de los sitios tiene problemas de interactividad en dispositivos móviles y el 64% de los sitios tienen texto que los usuarios no leerán.
Éxitos rápidos para mejorar drásticamente tu experiencia en la Web móvil
- Definir siempre un viewport
- Cómo ajustar el contenido en el viewport
- Mantén el tamaño de la fuente en un nivel legible
- Limita el uso de fuentes web
- Dimensione y separe los botones táctiles de manera adecuada
- Usa tipos semánticos para elementos de entrada
PageSpeed Insights acaba de lanzar un análisis de UX para determinar qué tan optimizado para dispositivos móviles es tu sitio. Te ayudará a encontrar problemas comunes con la UX de tu sitio en dispositivos móviles. Pruébala.
Presentaciones: Los mejores patrones de UX para aplicaciones web móviles
Accesibilidad en dispositivos múltiples, de Alice Boxhall
Los usuarios accederán a tus sitios y servicios desde una gran variedad de dispositivos con una amplia variedad de requisitos de accesibilidad diferentes. Al usar los elementos semánticos correctos y los roles de ARIA correctos, ayudas a que el navegador y la tecnología de asistencia comprendan mejor tu página.
Presentaciones: Accesibilidad multidispositivo
Formas clave de entender y abordar los problemas de a11y
- Asegúrate de tener una buena experiencia del usuario con el teclado únicamente
- Expresa la semántica de tu interfaz con la elección correcta de elementos y ARIA.
- Usa ChromeVox en computadoras de escritorio y TalkBack en Android para realizar pruebas.
- Prueba la extensión de Chrome de las Herramientas para desarrolladores de accesibilidad
- Un público más diverso se conecta a Internet, lo que aumenta aún más la necesidad de que tus sitios sean accesibles
Compila apps para dispositivos móviles con la función WebView de Chrome de Matt Guant
Todos conocemos los problemas que los desarrolladores tuvieron en el pasado cuando compilaban para WebView: funciones HTML5 limitadas, sin herramientas de depuración ni de compilación. Con el lanzamiento de una WebView con tecnología Chromium en Android 4.4 (KitKat), los desarrolladores ahora tienen a su disposición una amplia variedad de herramientas nuevas para crear excelentes aplicaciones nativas usando WebView.
WebView admite la depuración remota completa con las mismas herramientas que usas para Chrome. También puedes integrar tu flujo de trabajo de desarrollo web de confianza con Grunt en tus herramientas de pila nativas a través de Gradle. Para fusionar más mundos, existe un truco inteligente para usar las Herramientas para desarrolladores de Chrome y probar tu código nativo desde JavaScript.
Presentaciones: Compila apps para dispositivos móviles con WebView de Chrome
Conclusiones eficaces sobre el desarrollo de WebView
- No son las nuevas funciones lo importante, sino las herramientas que puedes usar para acelerar tu flujo de trabajo
- No intentes emular la IU nativa. Sin embargo, asegúrate de quitar algunos de los datos que indican que se trata de contenido web.
- Usa implementaciones nativas de funciones cuando corresponda. Es decir, usa DownloadManager en lugar de XHR para los archivos grandes.
Optimiza tu flujo de trabajo para un mundo multidispositivo, de Matt Gaunt
Si tenemos que desarrollar contenido para computadoras de escritorio, dispositivos móviles, tablets, wearables y otros factores de forma, ¿cómo puedes optimizar tu flujo de trabajo para que tu vida sea menos estresante? Existe un sólido enfoque multidispositivo para una iteración rápida con LiveReload, Grunt, Yeoman y el Mini Mobile Device Lab, recientemente presentado. Por último, si no tienes el hardware físico que quieres probar, algunos proveedores lo ponen a disposición a través de la nube.
Presentaciones: Cómo optimizar el flujo de trabajo para un mundo multidispositivo
Puntos clave
- La cantidad de dispositivos que tendremos que atender va a aumentar solo
- Cómo aplicar el flujo de trabajo adecuado con Grunt y Yeoman
- Simplifica las pruebas en varios navegadores y en distintos dispositivos con Mini Mobile Device Lab
- Sé inteligente a tu elección de emulación con la emulación de Herramientas para desarrolladores de Chrome, los emuladores de stock, los emuladores basados en la nube, como Saucelabs, Browserstack y appexperience, y el emulador de terceros Genymotion.
- Las pruebas para dispositivos móviles implican más que solo probar tu conexión Wi-Fi; usa un proxy para simular velocidades de red más lentas
Conectividad de red: opcional por Jake Archibald
Aprendimos muchos aspectos de esta charla: Jake no usa zapatos durante la presentación; Business Kinlan lanzará un nuevo libro pronto; el contenido sin conexión se está tomando en serio los proveedores de navegadores y pronto tendrás las herramientas en tus manos para crear experiencias increíbles que funcionen bien sin conexión.
ServiceWorker nos dará la flexibilidad que necesitamos para crear con facilidad experiencias atractivas sin conexión y sin los problemas ocasionados por AppCache. Incluso puedes experimentar con la API usando un Polyfill.
Presentaciones: Conectividad de red: opcional
ServiceWorker al rescate
- En la nueva generación de la mejora progresiva, consideramos la red como una mejora potencial.
- ServiceWorker te ofrece un control completo, depurable y que admite secuencias de comandos sobre las solicitudes de red.
- Si tienes una experiencia sin conexión, no esperes a que la red falle antes de mostrarla, ya que esto puede demorar años.