Stratégie mobile et capacités des navigateurs modernes

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 ?

F383c6a4dc55e331bbe2987b622cee6b?s=128

Stéphanie Walter

April 18, 2018
Tweet

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

  42. None
  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
  51. None
  52. Le gros reproche : la performance Afficher les 8Mo prévus

    pour grand écran sur mobile c’est forcément lent.
  53. None
  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
  57. None
  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