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.

1. 2012-11-1
Mobile First: créer une
bonne expérience mobile
Frédéric Harper
Technical Evangelist @ Microsoft Canada
@fharper | outofcomfortzone.net

2. le problème

3. le Web d’avant, la perception actuelle

4. le Web d’aujourd’hui

5. 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

6. 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

7. l’anti expérience

11. la solution

12. une solution

13. Mobile first
Luke Wroblewski bloguait à ce sujet le 3 novembre 2009

14. L’expérience

19. les raisons

20. la croissance

21. 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-infographic
http://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/

22. en perspective
Source: http://lukew.com/

23. 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/

24. 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/

25. les contraintes

33. les capacités

34. 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…

35. le contexte

36. la mobilité n’est pas que mobile
Souvent pris comme des inconvénients, il faut savoir en tirer
profit!

38. les avantages

39. 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

40. l’inverse fonctionne bien non?

41. la réalité
Source: http://xkcd.com/773/

42. les inconvénients

43. 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

44. implémentation

45. redéfinir l’expérience

46. UI
 NUI – Natural User Interface
 Touch
 Espace facile ou difficile à atteindre
 Limité à l’essentiel

47. 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

48. 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. …

49. 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

50. se résume…
Expérience mobile = capacités – contraintes + priorisation
contextes

51. ressources

57. Screenfly

58. 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/

59. 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

60. aussi…
• Mobile First <3 Responsive Web Design
• Responsive Web Design != Mobile First
• Content First est la clé
• Ce n’est que le début…

61. …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

62. Every UI should be designed for touch now!
- Frédéric Harper, conférence Web-In, 2012-11-12

63. questions
Frédéric Harper
fredh@microsoft.com
@fharper
http://webnotwar.ca
http://outofcomfortzone.net