Le Chrome Dev Summit s'est terminé il y a quelques semaines. Voici le premier rapport d'une série consacré à cet événement. L'accent était mis sur le développement mobile et multi-appareil, nous allons donc commencer.
Les meilleurs modèles d'expérience utilisateur pour les applications Web mobiles par Paul Kinlan
Une analyse de l'ergonomie mobile des 1 000 principaux sites nous a permis d'identifier certains problèmes: 53% des sites ne proposent toujours une expérience que sur ordinateur, 82% des sites présentent des problèmes d'interactivité sur un appareil mobile et 64% des sites comportent du texte que les utilisateurs auront du mal à lire.
Appels rapides pour améliorer considérablement l'expérience utilisateur sur le Web mobile
- Toujours définir une fenêtre d'affichage
- Adapter le contenu à la fenêtre d'affichage
- Maintenir une taille de police lisible
- Limiter l'utilisation des polices Web
- Dimensionner et espacer les éléments tactiles de manière appropriée
- Utiliser les types sémantiques pour les éléments d'entrée
PageSpeed Insights vient de lancer une analyse de l'expérience utilisateur permettant de déterminer si votre site est adapté aux mobiles. Il vous aidera à identifier les problèmes courants liés à l'expérience utilisateur sur mobile de votre site. Essayez-la
Slides: Meilleurs modèles d'expérience utilisateur pour les applications Web mobiles
Accessibilité multi-appareil 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.
Slides: Accessibilité multi-appareil
Principales façons de comprendre et de résoudre les problèmes d'accessibilité
- Assurez-vous de bénéficier d'une bonne expérience utilisateur uniquement avec le clavier.
- Exprimez la sémantique de votre interface avec un choix d'éléments approprié et des flux ARIA
- Utilisez ChromeVox sur ordinateur et TalkBack sur Android pour tester.
- Essayez l'extension Chrome des outils d'accessibilité pour les développeurs.
- Une audience plus diversifiée qui se connecte à Internet, ce qui amplifie la nécessité de rendre vos sites accessibles
Créer des applications mobiles à l'aide de Chrome WebView par Matt Guant
Nous connaissons tous les problèmes que les développeurs ont rencontrés dans le passé de WebView: fonctionnalités HTML5 limitées, pas d'outils de débogage, pas d'outils de compilation. Avec le lancement d'une WebView basée sur Chromium dans Android 4.4 (KitKat), les développeurs disposent d'une vaste gamme de nouveaux outils pour créer des applications natives de qualité à l'aide de la WebView.
WebView permet de réaliser un débogage à distance complet avec les mêmes outils que ceux que vous utilisez pour Chrome. Vous pouvez également utiliser votre workflow de développement Web de confiance avec Grunt et l'intégrer à vos outils de pile natifs via Gradle. Pour continuer à fusionner des mondes, vous pouvez utiliser les outils pour les développeurs Chrome afin de tester votre code natif à partir de JavaScript.
Slides: Créer des applications mobiles à l'aide de Chrome WebView
Points à retenir concernant 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 quelques éléments indiquant qu'il s'agit de contenu Web.
- Utilisez des implémentations natives de fonctionnalités le cas échéant. Pour les fichiers volumineux, utilisez le gestionnaire de téléchargement plutôt que XHR.
"Optimiser votre workflow pour un monde multi-appareil" de Matt Gaunt
Si nous devons développer des applications pour les ordinateurs de bureau, les mobiles, les tablettes, les accessoires connectés et d'autres facteurs de forme, comment pouvez-vous optimiser votre flux de travail pour vous rendre la vie moins stressante ? Avec LiveReload, Grunt, Yeoman et le tout nouveau Mini Mobile Device Lab, nous proposons une approche multi-appareil robuste pour des itérations rapides. Enfin, si vous ne disposez pas du matériel physique que vous souhaitez tester, certains fournisseurs le mettent à disposition via le cloud.
Slides: optimiser vos processus pour un monde multi-appareil
Points essentiels
- Le nombre d'appareils que nous allons devoir prendre en charge va augmenter
- Organisez votre travail de façon appropriée avec Grunt et Yeoman
- Simplifiez les tests inter-navigateurs et inter-appareils avec Mini Mobile Device Lab.
- Optez pour l'émulation des outils pour les développeurs Chrome, les émulateurs Stock, les émulateurs basés dans le cloud comme 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 débits réseau plus lents.
Connectivité réseau: facultative par Jake Archibal
Nous avons appris beaucoup de choses de cette présentation: Jake ne porte pas de chaussures lors de la présentation ; un nouveau livre sera bientôt publié sur Business Kinlan ; les fournisseurs de navigateurs prennent très au sérieux les problèmes liés au mode hors connexion, et vous aurez bientôt les outils nécessaires pour créer des expériences exceptionnelles hors connexion.
ServiceWorker nous apportera la flexibilité dont nous avons besoin pour créer facilement des expériences hors connexion attrayantes, sans être sujet aux difficultés induites par AppCache. Vous pouvez même tester l'API à l'aide d'un polyfill.
Diapositives : Connectivité réseau (facultatif)
ServiceWorker à la rescousse
- Dans la nouvelle génération d'améliorations progressives, nous considérons le réseau comme une amélioration potentielle
- ServiceWorker vous offre un contrôle total, scriptable et débogable sur les requêtes réseau
- Si vous profitez d'une expérience hors connexion, n'attendez pas que le réseau échoue avant de la montrer, car cela peut prendre un certain temps.