Le Chrome Dev Summit s'est terminé il y a quelques semaines. Voici le premier d'une série de rapports sur cet événement. Le développement pour mobile et multi-appareils a été particulièrement mis en avant. Nous allons donc commencer par là.
Meilleurs modèles d'expérience utilisateur pour les applications Web mobiles par Paul Kinlan
Après avoir analysé l'optimisation mobile des 1 000 sites les plus populaires, nous avons identifié certains problèmes: 53% ne proposent toujours qu'une expérience pour ordinateur, 82% présentent des problèmes d'interactivité sur un appareil mobile et 64% comportent du texte que les utilisateurs auront du mal à lire.
Conseils rapides pour améliorer considérablement votre expérience sur le Web mobile
- Définir toujours une fenêtre d'affichage
- Adapter le contenu à la fenêtre d'affichage
- Utiliser une taille de police lisible
- Limiter l'utilisation des polices Web
- Dimensionner et espacer les zones cliquables de façon appropriée
- Utiliser les types sémantiques pour les éléments de saisie
PageSpeed Insights vient de lancer une analyse de l'expérience utilisateur pour déterminer l'optimisation mobile de votre site. Elle vous aidera à identifier les problèmes courants liés à l'expérience utilisateur mobile de votre site. Essayez !
Diapositives: Meilleurs modèles d'expérience utilisateur pour les applications Web mobiles
Accessibilité multi-appareils par Alice Boxhall
Les utilisateurs accéderont à vos sites et services depuis une multitude d'appareils, avec des exigences d'accessibilité très diverses. En utilisant les éléments sémantiques et les rôles ARIA appropriés, vous aidez le navigateur et les technologies d'assistance à mieux comprendre votre page.
Diapositives: Accessibilité multi-appareil
Méthodes clés pour comprendre et résoudre les problèmes d'accessibilité
- Assurez-vous d'offrir une bonne expérience utilisateur avec un clavier
- Exprimer la sémantique de votre interface en choisissant les éléments appropriés et en utilisant ARIA
- Pour tester, utilisez ChromeVox sur ordinateur et TalkBack sur Android.
- Essayez l'extension Chrome des outils pour les développeurs d'accessibilité
- Une audience plus diversifiée se connecte à Internet, ce qui renforce encore la nécessité de rendre vos sites accessibles.
Créer des applications mobiles à l'aide de la WebView Chrome par Matt Guant
Nous connaissons tous les problèmes que les développeurs ont rencontrés par le passé lors de la création pour WebView: fonctionnalités HTML5 limitées, absence d'outils de débogage et d'outils de compilation. Avec l'introduction d'une WebView compatible avec Chromium dans Android 4.4 (KitKat), les développeurs disposent désormais d'une vaste gamme de nouveaux outils pour créer d'excellentes applications natives à l'aide de WebView.
WebView est compatible avec le débogage à distance complet à l'aide des mêmes outils que ceux que vous utilisez pour Chrome. Vous pouvez également utiliser votre workflow de développement Web fiable avec Grunt et l'intégrer à vos outils de pile native via Gradle. Pour fusionner encore plus les mondes, il existe une astuce intelligente pour utiliser les outils pour les développeurs Chrome afin de tester votre code natif à partir de JavaScript.
Diapositives: Créer des applications mobiles à l'aide de la WebView Chrome
Remarques importantes sur le développement WebView
- Ce ne sont pas les nouvelles fonctionnalités qui sont importantes, mais les outils que vous pouvez désormais utiliser pour accélérer votre workflow.
- N'essayez pas d'émuler l'UI native. Veillez toutefois à supprimer certains éléments qui indiquent qu'il s'agit d'un contenu Web.
- Utilisez des implémentations natives des fonctionnalités lorsque cela est approprié. C'est-à-dire, utilisez DownloadManager plutôt que XHR pour les fichiers volumineux.
Optimiser votre workflow pour un monde multi-appareils par Matt Gaunt
Si nous devons développer pour ordinateur, mobile, tablette, accessoires connectés et autres facteurs de forme, comment optimiser votre workflow pour vous simplifier la vie ? Une approche multi-appareil solide permet d'effectuer des itérations rapides avec LiveReload, Grunt, Yeoman et le tout nouveau Mini Mobile Device Lab. Enfin, si vous ne disposez pas du matériel physique que vous souhaitez tester, certains fournisseurs le mettent à votre disposition via le cloud.
Diapositives: Optimiser votre workflow pour un monde multi-appareils
Points essentiels
- Le nombre d'appareils que nous devrons prendre en charge ne va cesser d'augmenter.
- Organiser votre workflow avec Grunt et Yeoman
- Simplifiez les tests multinavigateur et multiappareils avec le Mini Mobile Device Lab
- Choisissez judicieusement votre émulation en utilisant l'émulation Chrome DevTools, les émulateurs standards, les émulateurs cloud tels que Saucelabs, Browserstack et appexperience, ainsi que l'émulateur tiers Genymotion.
- Les tests sur mobile ne se limitent pas à tester votre connexion Wi-Fi. Utilisez un proxy pour simuler des vitesses réseau plus lentes.
Connectivité réseau: facultative par Jake Archibald
Nous avons appris de nombreuses choses lors de cette conférence: Jake ne porte pas de chaussures lorsqu'il fait une présentation ; Business Kinlan va bientôt publier un nouveau livre ; le mode hors connexion est pris au sérieux par les fournisseurs de navigateurs, et vous aurez bientôt les outils nécessaires pour créer des expériences de qualité qui fonctionnent bien en mode hors connexion.
ServiceWorker nous offrira la flexibilité dont nous avons besoin pour créer facilement des expériences attrayantes en mode hors connexion, sans souffrir des problèmes d'AppCache. Vous pouvez même tester l'API à l'aide d'un remplissage.
Diapositives: connectivité réseau: facultative
ServiceWorker à la rescousse
- Dans la nouvelle génération d'amélioration progressive, nous considérons le réseau comme une amélioration potentielle.
- ServiceWorker vous offre un contrôle complet, scriptable et débogable sur les requêtes réseau.
- Si vous proposez une expérience hors connexion, n'attendez pas que le réseau échoue pour l'afficher, car cela peut prendre des heures.