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