Your SlideShare is downloading. ×
  • Like
Web in - Mobile First: créer une bonne expérience mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Web in - Mobile First: créer une bonne expérience mobile

  • 1,104 views
Published

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,104
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
32
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 2012-11-1Mobile First: créer unebonne expérience mobileFrédéric HarperTechnical 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 WideWeb, but it can be experienced in different wayson 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
  • 8. la solution
  • 9. une solution
  • 10. Mobile firstLuke Wroblewski bloguait à ce sujet le 3 novembre 2009
  • 11. L’expérience
  • 12. les raisons
  • 13. la croissance
  • 14. 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/
  • 15. en perspectiveSource: http://lukew.com/
  • 16. N’utilise-t-on pas tous des apps? 347% d’augmentation sur le navigateur mobile (4.7 million) en janvier 2010Source: http://www.lukew.com/
  • 17. N’utilise-t-on pas tous des apps? 112% d’augmentation sur l’utilisation du navigateur mobile (251 million) en janvier 2010Source: http://www.lukew.com/
  • 18. les contraintes
  • 19. les capacités
  • 20. 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…
  • 21. le contexte
  • 22. la mobilité n’est pas que mobileSouvent pris comme des inconvénients, il faut savoir en tirerprofit!
  • 23. les avantages
  • 24. 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
  • 25. l’inverse fonctionne bien non?
  • 26. la réalitéSource: http://xkcd.com/773/
  • 27. les inconvénients
  • 28. 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
  • 29. implémentation
  • 30. redéfinir l’expérience
  • 31. UI  NUI – Natural User Interface  Touch  Espace facile ou difficile à atteindre  Limité à l’essentiel
  • 32. 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
  • 33. le code1. Éliminer les redirections2. Utiliser Application Cache pour le stockage de contenu local3. Utiliser CSS3 et les Canvas au lieu d’images quand c’est possible4. …
  • 34. fonctionnalités1. Utiliser la géolocalisation 1. Location et direction2. Utiliser l’appareil photo et/ou le micro3. Utiliser le RFID/NFC
  • 35. se résume…Expérience mobile = capacités – contraintes + priorisation contextes
  • 36. ressources
  • 37. Screenfly
  • 38. 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/
  • 39. 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
  • 40. aussi…• Mobile First <3 Responsive Web Design• Responsive Web Design != Mobile First• Content First est la clé• Ce n’est que le début…
  • 41. …every desktop UI should be designed for touchnow. When any desktop machine could have atouch interface, we have to proceed as if they alldo.- Josh Clark, http://globalmoxie.com/blog/desktop-touch-design.shtml
  • 42. Every UI should be designed for touch now!- Frédéric Harper, conférence Web-In, 2012-11-12
  • 43. questionsFrédéric Harperfredh@microsoft.com@fharperhttp://webnotwar.cahttp://outofcomfortzone.net