Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Stratégie mobile et capacités des navigateurs modernes

11,174 views

Published on

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 ?

Published in: Design
  • Be the first to comment

Stratégie mobile et capacités des navigateurs modernes

  1. 1. Stratégie mobile et capacités des navigateurs modernes Stéphanie Walter - @Walterstephanie - Yajug 2018
  2. 2. UX & UI Designer. Mobile enthusiast Pixel et CSS Lover. www.stephaniewalter.fr @WalterStephanie Illustration by Laurence V. 🦊
  3. 3. Les applications mobiles natives
  4. 4. Disponibles via un store / market – Installation sur l’appareil – Lancement depuis une icône
  5. 5. Pourquoi créer une application native aujourd’hui ?
  6. 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. 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. 8. Une expérience sur-mesure pour chaque système iOS iOSAndroid Android
  9. 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. 10. Le branding
  11. 11. Les limites des applications natives
  12. 12. Passage obligé par le store/market pour vous et vos utilisatrices
  13. 13. Faire découvrir son application mobile
  14. 14. Smart banners iOS et Android Natif sur iOS Natif sur android
  15. 15. Monétisation plus contraignante Apple comme Google prennent des commissions sur vos ventes via les applications
  16. 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. 17. Difficile de se faire une place sur le marché Répartition des applications par type
  18. 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. 19. Applications natives “hybrides”
  20. 20. Cordova (anciennement PhoneGap) Framework qui permet de développer des applications natives en HTML CSS JavaScript
  21. 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. 22. Ionic SDK et UI Framework utilisant Cordova et basé sur Angular 2 qui permet de créer des applications natives
  23. 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. 24. React Native Un Framework créé par Facebook basé sur React pour créer des applications natives en JavaScript
  25. 25. L’optimisation des sites webs
  26. 26. Du contenu « web » consommé dans les applications De plus en plus d’applications ouvrent les URLs dans une Webview
  27. 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. 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. 29. Le site mobile dédié
  30. 30. Des contenus spécifiques envoyés au mobile En utilisant la détection de “User Agent” www.blokker.be m.blokker.be
  31. 31. Examples de sites mobiles didiés mobile.lemonde.fr www.amazon.de/gp/aw/m.blokker.be
  32. 32. Optimisation 100% mobile sur-mesure Adaptation « sur-mesure » du design et de l’expérience (menus, fonctionnalités, etc.)
  33. 33. Attention à la continuité de l’expérience Etsy : possibilité d’ajouter à une liste sur desktop mais pas sur mobile
  34. 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. 35. Attention à la sur-optimisation
  36. 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. 37. Et redirection hasardeuse
  38. 38. Attention au contenu dupliqué en référencement Image Nick Royer
  39. 39. Comment maintenir une liste d’appareils détectés ?
 
 Et les tablettes ?
  40. 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. 41. Le Site Responsive
  42. 42. « S’adapter à n’importe quel type d’appareil et support de manière transparente pour l’utilisateur »
  43. 43. 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
  44. 44. Développement, test et recette pour tous les appareils en même temps = maintenance simplifiée Un processus de développement unifié
  45. 45. Référencement friendly Référencement naturel : une seule URL, une seule stratégie, partages simplifiés Image Nick Royer
  46. 46. Quelques exemples
  47. 47. Les bases du responsive Grilles fluides + CSS3 pour ré-agencer les blocs + Images flexibles Ethan Marcotte – Responsive Webdesign
  48. 48. Retrofitting d’un site existant Ou le responsive au « chausse pied »
  49. 49. 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
  50. 50. Le gros reproche : la performance Afficher les 8Mo prévus pour grand écran sur mobile c’est forcément lent.
  51. 51. 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
  52. 52. Le Responsive Mobile first Prendre en compte les besoins des mobiles dès le début de la conception
  53. 53. 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
  54. 54. Décisions de design mobile first On part du plus petit dénominateur commun et on enrichit l’interface au fur et à mesure
  55. 55. 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
  56. 56. Des solutions complémentaires
  57. 57. Tâches complexes / expérience riche Applications Consultation simple (achat compris) / enrichir son audience Sites Web
  58. 58. 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
  59. 59. Une application mobile pour créer les interventions en concession, prendre des vidéos et photos du véhicule.
  60. 60. Un dashboard en ligne qui permet de configurer ses utilisateurs, envoyer les interventions, ajouter des documents et remises
  61. 61. Un fiche d’intervention responsive envoyée par mail ou sms au client de la concession pour valider les travaux à réaliser
  62. 62. Site en m. dédié (ou beta en m. responsive) Planter l’idée d’une stratégie mobile à plus long terme Source images
  63. 63. BBC news beta responsive D’une beta disponible uniquement sur mobile à un site responsive pour tous
  64. 64. Des navigateurs mobiles sous stéroïdes
  65. 65. Les capacités des navigateurs mobiles
  66. 66. Composer le numéro en un clic <a href=“tel:0388230271”>
  67. 67. La Géolocalisation Pensez à un fallback (si l’utilisateur refuse, en cas de souci de GPS, etc.)
  68. 68. Accès au matériel multimédia <input type="file" accept="image/*"> <input type="file" accept=”video/*">
  69. 69. Capture directe avec l’attribut capture <input type="file” capture accept=”…/*">
  70. 70. Une conférence audio / vidéo dans le navigateur Pas besoin d’installer (ni de maintenir) le moindre plugin navigateur ou application native.
  71. 71. Accordeur de guitare dans le navigateur guitar-tuner.appspot.com
  72. 72. Accès aux notifications et du push
  73. 73. • 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
  74. 74. Push API + Service Worker
  75. 75. Play time: notification testing tool notification-generator
  76. 76. Vous n’aurez qu’une chance : demandez les accès en contexte et au bon moment !
  77. 77. La détection et gestion de l’Offline
  78. 78. La mise en cache grâce aux Service Workers
  79. 79. Paiement : détection et scan de la carte de crédit sur iOS
  80. 80. APIs de paiement Google Pay API
 
 (ou Payement API en standard W3C)
  81. 81. mobilehtml5.org
  82. 82. whatwebcando.today
  83. 83. Les Progressive Web Apps Des applications web qu’on peut installer sur mobile
  84. 84. Le principe de la Progressive Web App
  85. 85. W3C Web App Manifest Un fichier manifest.json qui va nous permettre de déclarer notre site comme une web app. manifest.json
  86. 86. Ajout du favicon sur l’écran d’accueil
  87. 87. Le site peut être lancé depuis l’écran d’accueil
  88. 88. realfavicongenerator.net Un seul outil, pour les générer tous (désolé)
  89. 89. Android Chrome - Bannière d’installation d’app
  90. 90. Accès aux paramètres de l’App et désinstallation
  91. 91. Bannière Android Firefox
 
 (pour le moment pas une installation complète)

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

  93. 93. <meta name="theme-color" content="#db5945"> Changer la couleur de l’URL de Chrome
  94. 94. Proposer une couleur de thème globale via le manifest “theme_color": “#133742"
  95. 95. 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
  96. 96. • 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…
  97. 97. Installable comme Chrome App sur Chrome desktop Activable sous un flag : chrome://flags/#enable-desktop-pwas 
  98. 98. • 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
  99. 99. pwa.rocks
  100. 100. 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

×