La Chrome Dev Summit finalizó hace un par de semanas y 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 comenzaremos con eso.
Mejores patrones de UX para apps web para dispositivos móviles, de Paul Kinlan
Después de analizar la optimización para dispositivos móviles de los 1,000 sitios principales, encontramos algunas áreas problemáticas: el 53% aún solo ofrece una experiencia para computadoras de escritorio, el 82% de los sitios tiene problemas de interactividad en dispositivos móviles y el 64% de los sitios tiene texto que los usuarios tendrán problemas para leer.
Sugerencias rápidas para mejorar significativamente tu experiencia en la Web móvil
- Define siempre una vista del puerto
- Cómo ajustar el contenido dentro del viewport
- Mantén el tamaño de la fuente en un nivel legible.
- Limita el uso de fuentes web
- Aplica el tamaño adecuado a los objetivos táctiles y separalos de forma apropiada
- Usa los tipos semánticos para los elementos de entrada
PageSpeed Insights acaba de lanzar un análisis de UX para determinar qué tan optimizado para dispositivos móviles está tu sitio. Te ayudará a encontrar problemas comunes con la UX para dispositivos móviles de tus sitios. ¡Pruébalo!
Diapositivas: Los mejores patrones de UX para aplicaciones web para dispositivos móviles
Accesibilidad en varios dispositivos, por Alice Boxhall
Los usuarios accederán a tus sitios y servicios desde una gran variedad de dispositivos con diferentes requisitos de accesibilidad. Si usas los elementos semánticos y los roles de ARIA correctos, ayudas a que el navegador y la tecnología de accesibilidad comprendan mejor tu página.
Diapositivas: Accesibilidad en varios dispositivos
Formas clave de comprender y abordar los problemas de accesibilidad
- Asegúrate de tener una buena experiencia del usuario con solo el teclado
- Expresa la semántica de tu interfaz con la elección correcta de elementos y ARIA
- Usa ChromeVox en computadoras y TalkBack en Android para realizar la prueba.
- Prueba la extensión de Chrome de herramientas para desarrolladores de accesibilidad.
- Cada vez más personas de diferentes orígenes se conectan a Internet, lo que aumenta la necesidad de que tus sitios sean accesibles.
Matt Guant: Cómo compilar apps para dispositivos móviles con WebView de Chrome
Todos conocemos los problemas que los desarrolladores tuvieron en el pasado cuando compilaban para WebView: funciones de HTML5 limitadas, sin herramientas de depuración ni de compilación. Con la introducción de un WebView con tecnología de Chromium en Android 4.4 (KitKat), los desarrolladores ahora tienen a su disposición una amplia variedad de herramientas nuevas para compilar excelentes apps nativas con WebView.
WebView admite la depuración remota completa con las mismas herramientas que usas para Chrome. También puedes usar tu flujo de trabajo de desarrollo web de confianza con Grunt y, luego, integrarlo en tus herramientas de pila nativa a través de Gradle. Para combinar aún más los mundos, hay un truco inteligente para usar las Herramientas para desarrolladores de Chrome y probar tu código nativo desde JavaScript.
Diapositivas: Cómo compilar apps para dispositivos móviles con WebView de Chrome
Conclusiones eficaces del desarrollo de WebView
- No son las funciones nuevas lo importante, sino las herramientas que ahora puedes usar para acelerar tu flujo de trabajo.
- No intentes emular la IU nativa. Sin embargo, asegúrate de quitar algunos de los indicadores que indiquen que se trata de contenido web.
- Usa implementaciones nativas de funciones cuando corresponda. es decir, usa DownloadManager en lugar de XHR para archivos grandes.
Optimiza tu flujo de trabajo para un mundo multidispositivo, por Matt Gaunt
Si tenemos que desarrollar 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 la iteración rápida con LiveReload, Grunt, Yeoman y el recientemente presentado Mini Mobile Device Lab. 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.
Diapositivas: Optimiza tu flujo de trabajo para un mundo multidispositivo
Puntos clave
- La cantidad de dispositivos que tendremos que admitir solo aumentará.
- Cómo obtener el flujo de trabajo correcto con Grunt y Yeoman
- Simplifica las pruebas multidispositivo y multinavegador con el Mini Mobile Device Lab.
- Elige la emulación de forma inteligente 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 realizar pruebas en tu conexión Wi-Fi. Usa un proxy para simular velocidades de red más lentas.
Conectividad de red: Opcional (Jake Archibald)
Aprendimos muchas cosas de esta charla: Jake no usa zapatos cuando presenta; Business Kinlan pronto lanzará un libro nuevo; los proveedores de navegadores se toman en serio el modo sin conexión y pronto tendrás en tus manos las herramientas que te ayudarán a crear experiencias increíbles que funcionen bien cuando no tengas conexión.
ServiceWorker nos dará la flexibilidad que necesitamos para crear experiencias sin conexión atractivas con facilidad y no sufrir los problemas que causa AppCache. Incluso puedes experimentar con la API con un complemento depolyfill.
Diapositivas: Conectividad de red: opcional
ServiceWorker al rescate
- En la nueva generación de la mejora progresiva, tratamos la red como una posible mejora.
- ServiceWorker te brinda control total, depurable y programable sobre las solicitudes de red.
- Si tienes una experiencia sin conexión, no esperes a que falle la red antes de mostrarla, ya que esto puede tardar mucho tiempo.