web in - mobile first: créer une bonne expérience mobile
Post on 18-Oct-2014
1.329 views
DESCRIPTION
Comme l'industrie du mobile explose et que le support pour de nouvelles technologies est maintenant disponible sur les principales plateformes, nous devons arrêter de prendre les téléphones mobiles comme des appareils de second plan. La philosophie mobilité en premier (Mobile First) nous force à penser, à designer et à créer pour les appareils mobiles en premier lieu. Utiliser cette technique nous forces à focalisés sur ce qui est vraiment important pour nos utilisateurs, nos clients, sans négliger pour autant les autres appareils, tels que les PCs.TRANSCRIPT
![Page 1: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/1.jpg)
Mobile First: créer une bonne expérience mobileFrédéric Harper
Technical Evangelist @ Microsoft Canada
@fharper | outofcomfortzone.net
20
12
-11
-12
![Page 2: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/2.jpg)
le problème
![Page 3: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/3.jpg)
le Web d’avant, la perception actuelle
![Page 4: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/4.jpg)
le Web d’aujourd’hui
![Page 5: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/5.jpg)
Fundamentally, there’s just one World Wide
Web, but it can be experienced in different
ways on different devices.
- Luke Woblewski, Mobile First, A Book Apart
![Page 6: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/6.jpg)
donc, trop souvent…
les mobiles sont pris en considération comme un élément à
part
les mobiles ne sont tout simplement pas pris en considération
l’expérience Web n’est pas très bonne sur les appareils
mobiles
![Page 7: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/7.jpg)
l’anti expérience
![Page 8: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/8.jpg)
![Page 9: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/9.jpg)
![Page 10: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/10.jpg)
![Page 11: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/11.jpg)
la solution
![Page 12: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/12.jpg)
une
solution
![Page 13: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/13.jpg)
Mobile first
Luke Wroblewski bloguait à ce sujet le 3 novembre 2009
![Page 14: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/14.jpg)
L’expérience
![Page 15: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/15.jpg)
![Page 16: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/16.jpg)
![Page 17: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/17.jpg)
![Page 18: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/18.jpg)
![Page 19: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/19.jpg)
les raisons
![Page 20: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/20.jpg)
la croissance
![Page 21: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/21.jpg)
mobilité en croissance
• D’ici 2014 = mobile > desktop
• Aux É-U, 25% = mobile seulement!
• Exemple (sous peu):
50% mobile des vidéos sur YouTube
Sources:http://www.trinitydigitalmarketing.com/the-rise-of-mobile-infographichttp://crave.cnet.co.uk/software/google-is-now-a-mobile-first-company-execs-say-50009727/http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
![Page 22: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/22.jpg)
en perspective
Source: http://lukew.com/
![Page 23: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/23.jpg)
N’utilise-t-on pas tous des apps?
347% d’augmentation sur
le navigateur mobile (4.7
million) en janvier 2010
Source: http://www.lukew.com/
![Page 24: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/24.jpg)
N’utilise-t-on pas tous des apps?
112% d’augmentation sur
l’utilisation du navigateur
mobile (251 million) en
janvier 2010
Source: http://www.lukew.com/
![Page 25: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/25.jpg)
les contraintes
![Page 26: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/26.jpg)
![Page 27: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/27.jpg)
![Page 28: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/28.jpg)
![Page 29: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/29.jpg)
![Page 30: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/30.jpg)
$$$
![Page 31: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/31.jpg)
![Page 32: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/32.jpg)
![Page 33: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/33.jpg)
les capacités
![Page 34: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/34.jpg)
les capacités des appareils mobiles
• Détection de la geolocalisation - GPS
• Orientation de l’appareil – Accéléromètre
• Écran tactile
• NFC (Near Field Communications)
• et plus…
![Page 35: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/35.jpg)
le contexte
![Page 36: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/36.jpg)
la mobilité n’est pas que mobile
Souvent pris comme des inconvénients, il faut savoir en
tirer profit!
![Page 37: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/37.jpg)
![Page 38: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/38.jpg)
les avantages
![Page 39: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/39.jpg)
Mobile First
• Prépare le site aux nouvelles opportunités mobiles
• Nous force à prioriser et à nous concentrer sur le
contenu/contenant
• Permet de créer de meilleures experiences Web mobile
• Permet de créer des experiences innovantes
![Page 40: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/40.jpg)
l’inverse fonctionne bien non?
![Page 41: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/41.jpg)
la réalité
Source: http://xkcd.com/773/
![Page 42: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/42.jpg)
les inconvénients
![Page 43: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/43.jpg)
les désavantages
• Changement dans la façon
• de penser le design/la création
• de créer les sites
• On doit vraiment connaître les besoins et/ou les
produits/services de ses clients
![Page 44: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/44.jpg)
implémentation
![Page 45: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/45.jpg)
redéfinir l’expérience
![Page 46: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/46.jpg)
UI
NUI – Natural User Interface
Touch
Espace facile ou difficile à
atteindre
Limité à l’essentiel
![Page 47: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/47.jpg)
Touch
Recommandé = 9mm/34px
Minimum = 7mm/26px
Espace minimum = 2mm/8px
Grandeur de l’élément visuel =
60-100%Source: Windows Phone UI Design and Interaction Guide v2.0
![Page 48: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/48.jpg)
le code
1. Éliminer les redirections
2. Utiliser Application Cache pour le stockage de contenu local
3. Utiliser CSS3 et les Canvas au lieu d’images quand c’est
possible
4. …
= optimiser, optimiser et optimiser!
![Page 49: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/49.jpg)
fonctionnalités
1. Utiliser la géolocalisation
1. Location et direction
2. Utiliser l’appareil photo et/ou le
micro
3. Utiliser le RFID/NFC
![Page 50: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/50.jpg)
se résume…
Expérience mobile = capacités – contraintes +
priorisation
contextes
![Page 51: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/51.jpg)
ressources
![Page 52: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/52.jpg)
![Page 53: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/53.jpg)
![Page 54: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/54.jpg)
![Page 55: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/55.jpg)
![Page 56: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/56.jpg)
![Page 57: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/57.jpg)
Screenfly
![Page 58: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/58.jpg)
http
Luke W post: http://www.lukew.com/ff/entry.asp?933
Mobile First book: http://www.abookapart.com/products/mobile-first
Luke W presentation: http://vimeo.com/38187066
A list Apart: http://www.alistapart.com/
Tapworthy: http://shop.oreilly.com/product/0636920001133.do
Screenfly: http://quirktools.com/screenfly/
![Page 59: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/59.jpg)
en résumé, Mobile First c’est
• Penser à la croissance des appareils mobiles
• Minimiser les contraintes
• Maximiser les capacités et les contextes
• Généralement une meilleure expérience pour l’utilisateur
• Pas nécessairement facile comme approche au début
![Page 60: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/60.jpg)
aussi…
• Mobile First <3 Responsive Web Design
• Responsive Web Design != Mobile First
• Content First est la clé
• Ce n’est que le début…
![Page 61: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/61.jpg)
…every desktop UI should be designed for touch
now. When any desktop machine could have a
touch interface, we have to proceed as if they all
do.
- Josh Clark, http://globalmoxie.com/blog/desktop-touch-design.shtml
![Page 62: Web in - Mobile First: créer une bonne expérience mobile](https://reader035.vdocuments.us/reader035/viewer/2022062613/5442d117afaf9f0e118b4743/html5/thumbnails/62.jpg)
Every UI should be designed for touch now!
- Frédéric Harper, conférence Web-In, 2012-11-12