Stratégie mobile et capacités des navigateurs modernes

Site mobile dédié, site responsive, mobile first, Progressive Web Apps, applications hybrides, etc. les navigateurs et technologies ont bien évolué depuis l’iPhone 3.

En 2018 nous avons plus que jamais l’embarras du choix lorsqu’il s’agit de proposer nos produits et contenus à des utilisateurs sur mobile sans forcément devoir passer par une application native. Peut-être un peu trop de choix d’ailleurs, on finit par s’y perdre.

Je vous propose de faire le tour des différentes stratégies possibles, leurs avantages et limites et de découvrir les capacités des navigateurs mobiles modernes. Notifications, offline, accès au son, à la vidéo, etc. : ces fonctionnalités réservées aux applications natives jusque là arrivent dans nos navigateurs. Et si les technologies web (re)prenaient une place de plus en plus intéressante dans le paysage applicatif futur ?

Transcript

1. Stratégie mobile et capacités des navigateurs modernes Stéphanie Walter - @Walterstephanie - Yajug 2018
2. UX & UI Designer. Mobile enthusiast Pixel et CSS Lover. www.stephaniewalter.fr @WalterStephanie Illustration by Laurence V.
3. Les applications mobiles natives
4. Disponibles via un store / market – Installation sur l’appareil – Lancement depuis une icône
5. Pourquoi créer une application native aujourd’hui ?
6. • Gyroscope, • Accéléromètre, • Géolocalisation, • Accès médias (photos, vidéos, enregistreur) • Accélération GPU, • etc. Accès à des fonctionnalités natives
7. • Face / Touch ID, • Fonctionnalités de paiement, • Centre de notifications, • Gestion des paramètres et du stockage, • Widgets, • APIs de partage • Etc. Intégration directe au système
8. Une expérience sur-mesure pour chaque système iOS iOS Android Android
9. S’interfacer avec des objets connectés De plus en plus d’applications pour contrôler ses objets connectés (via bluetooth, wifi, etc.)
10. Le branding
11. Les limites des applications natives
12. Passage obligé par le store/market pour vous et vos utilisatrices
13. Faire découvrir son application mobile
14. Smart banners iOS et Android Natif sur iOS Natif sur android
15. Monétisation plus contraignante Apple comme Google prennent des commissions sur vos ventes via les applications
16. • Découvrir et télécharger = un effort • Coût bande passante • Coût espace de stockage • Confiance et vie privée Des freins à l’adoption par les utilisateurs et utilisatrices
17. Difficile de se faire une place sur le marché Répartition des applications par type
18. • De développement spécifique par système d’exploitation (différents langages) • D’adaptation du design (user flow, taille et format des assets, etc.) • De maintien et mise à jour de plusieurs Apps Multiplication des coûts
19. Applications natives “hybrides”
20. Cordova (anciennement PhoneGap) Framework qui permet de développer des applications natives en HTML CSS JavaScript
21. • Propose des plugins et API qui permettent d’accéder plus facilement à des fonctionnalités natives. • Permet de « builder » une application native installable sur les stores Cordova
22. Ionic SDK et UI Framework utilisant Cordova et basé sur Angular 2 qui permet de créer des applications natives
23. • Propose par défaut un système de composants très complet dont le design s’adapte automatiquement au système. • Intègre comme Cordova des passerelles vers les API natives Ionic
24. React Native Un Framework créé par Facebook basé sur React pour créer des applications natives en JavaScript
25. L’optimisation des sites webs
26. Du contenu « web » consommé dans les applications De plus en plus d’applications ouvrent les URLs dans une Webview
27. Du contenu « web » consommé dans les applications 21% du trafic d’iOS vient des Webviews. Facebook compte pour 50% de ces webviews Sourcre Luke W
28. Une stratégie multiplateforme unifiée Le but : avoir un site qui fonctionne sur plusieurs plateformes sans avoir besoin de télécharger une application mobile dédiée pour chaque URL visitée
29. Le site mobile dédié
30. Des contenus spécifiques envoyés au mobile En utilisant la détection de “User Agent” www.blokker.be m.blokker.be
31. Examples de sites mobiles didiés mobile.lemonde.fr www.amazon.de/gp/aw/ m.blokker.be
32. Optimisation 100% mobile sur-mesure Adaptation « sur-mesure » du design et de l’expérience (menus, fonctionnalités, etc.)
33. Attention à la continuité de l’expérience Etsy : possibilité d’ajouter à une liste sur desktop mais pas sur mobile
34. Attention aux contenus manquants « Notre site mobile n’est pas complet il va falloir aller jouer à zoomer dé zoomer sur la version desktop pour trouver ce que vous cherchez »
35. Attention à la sur-optimisation
36. Attention à la gestion des URLs Si la redirection n’est pas faite dans les 2 sens, vos utilisatrices desktop finiront avec la version mobile du site en cas de partage des URLs
37. Et redirection hasardeuse
38. Attention au contenu dupliqué en référencement Image Nick Royer
39. Comment maintenir une liste d’appareils détectés ?
 
 Et les tablettes ?
40. Le site mobile dédié • Rapidité de développement • Cohabitation site « classique » • Optimisation 100% sur-mesure • Maintenance complexe • Contenus trop souvent manquants • Que faire des tablettes ? Des appareils « exotiques » ?
41. Le Site Responsive
43. « S’adapter à n’importe quel type d’appareil et support de manière transparente pour l’utilisateur »
44. La continuité de l’expérience Une expérience équivalente ou identique quel que soit l’appareil est importante Source : The New Multi-screen World
45. Développement, test et recette pour tous les appareils en même temps = maintenance simplifiée Un processus de développement unifié
46. Référencement friendly Référencement naturel : une seule URL, une seule stratégie, partages simplifiés Image Nick Royer
47. Quelques exemples
48. Les bases du responsive Grilles fluides + CSS3 pour ré-agencer les blocs + Images flexibles Ethan Marcotte – Responsive Webdesign
49. Retrofitting d’un site existant Ou le responsive au « chausse pied »
50. Retroffiting du côté de l’intégration On remplace les largeurs fixes du design par des unités fluides puis on déconstruit la grille au fur et à mesure que l’écran se réduit
52. Le gros reproche : la performance Afficher les 8Mo prévus pour grand écran sur mobile c’est forcément lent.
54. Le Responsive retroffiting • Site unique (à coder, designer, recette) • Adaptation sans refonte à partir de l’existant possible Optimisation cosmétique de surface sans réelle prise en compte de tous les enjeux mobiles
55. Le Responsive Mobile first Prendre en compte les besoins des mobiles dès le début de la conception
56. Mobile first du côté de l’intégration On commence par le HTML du mobile et on développe le site petit à petit pour les écrans plus larges
58. Décisions de design mobile first On part du plus petit dénominateur commun et on enrichit l’interface au fur et à mesure
59. Le mobile first • Site unique pour une stratégie multi support • Attention portée sur l’ergonomie et à la performance • Prise en compte des capacités des appareils • Nécessite souvent une refonte globale (coûteux) • Plus complexe techniquement • Demande un changement des mentalités
60. Des solutions complémentaires
61. Tâches complexes / expérience riche Applications Consultation simple (achat compris) / enrichir son audience Sites Web
62. L’application mobile / watch sert de capteur : récupération des trajets via le GPS quand on court, du temps, etc. Le site permet de visualiser ses trajets, avoir des statistiques détaillées, enrichir l’audience et comparer ses courses
63. Une application mobile pour créer les interventions en concession, prendre des vidéos et photos du véhicule.
64. Un dashboard en ligne qui permet de configurer ses utilisateurs, envoyer les interventions, ajouter des documents et remises
65. Un fiche d’intervention responsive envoyée par mail ou sms au client de la concession pour valider les travaux à réaliser
66. Site en m. dédié (ou beta en m. responsive) Planter l’idée d’une stratégie mobile à plus long terme Source images
67. BBC news beta responsive D’une beta disponible uniquement sur mobile à un site responsive pour tous
68. Des navigateurs mobiles sous stéroïdes
69. Les capacités des navigateurs mobiles
70. Composer le numéro en un clic <a href=“tel:0388230271”>
71. La Géolocalisation Pensez à un fallback (si l’utilisateur refuse, en cas de souci de GPS, etc.)
72. Accès au matériel multimédia <input type="file" accept="image/*"> <input type="file" accept=”video/*">
73. Capture directe avec l’attribut capture <input type="file” capture accept=”…/*">
74. Une conférence audio / vidéo dans le navigateur Pas besoin d’installer (ni de maintenir) le moindre plugin navigateur ou application native.
75. Accordeur de guitare dans le navigateur guitar-tuner.appspot.com
76. Accès aux notifications et du push
77. • Utilisent le centre de notifications natives de l’appareil • Disponibles même si l’utilisateur ferme le site Des notifications intégrées au système d’exploitation
78. Push API + Service Worker
79. Play time: notification testing tool notification-generator
80. Vous n’aurez qu’une chance : demandez les accès en contexte et au bon moment !
81. La détection et gestion de l’Offline
82. La mise en cache grâce aux Service Workers
83. Paiement : détection et scan de la carte de crédit sur iOS
84. APIs de paiement Google Pay API
 
 (ou Payement API en standard W3C)
85. mobilehtml5.org
86. whatwebcando.today
87. Les Progressive Web Apps Des applications web qu’on peut installer sur mobile
88. Le principe de la Progressive Web App
89. W3C Web App Manifest Un fichier manifest.json qui va nous permettre de déclarer notre site comme une web app. manifest.json
90. Ajout du favicon sur l’écran d’accueil
91. Le site peut être lancé depuis l’écran d’accueil
92. realfavicongenerator.net Un seul outil, pour les générer tous (désolé)
93. Android Chrome - Bannière d’installation d’app
94. Accès aux paramètres de l’App et désinstallation
95. Bannière Android Firefox
 
 (pour le moment pas une installation complète)

96. Diplay mode : lancement en Navigateur ou Plein Ecran "display": "browser" "display": "standalone"

97. <meta name="theme-color" content="#db5945"> Changer la couleur de l’URL de Chrome
98. Proposer une couleur de thème globale via le manifest “theme_color": “#133742"
99. Généré à partir de la couleur de fond, l’icône et le nom du site déclarés dans le manifest (Android Chrome et Opera) Splashscreen automatique
100. • Pas de synchronisation en tâche de fond ou de Notifications • Pas de bannière d’installation • Pas d’accès aux paramètres • 50Mo de stockage maximum • Quelques « bugs » Le support arrive sur iOS, mais pour le moment…
101. Installable comme Chrome App sur Chrome desktop Activable sous un flag : chrome://flags/#enable-desktop-pwas
102. • Publication « manuelle » par Microsoft de certaines PWAs • Indexation par le crawler Bing • Affichage dans les résultats de recherche • Disponibilité (future) dans le Windows Store Ecosystème Microsoft
103. pwa.rocks
104. UX & UI Designer. Mobile enthusiast Pixel et CSS Lover. www.stephaniewalter.fr @WalterStephanie Illustration by Laurence V. Attribution-NonCommercial-NoDerivs 3.0 France (CC BY-NC-ND 3.0 FR) inpx.it/strategie-mobile-pwa-yajug-2018