Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
2012-11-1Mobile First: créer unebonne expérience mobileFrédéric HarperTechnical Evangelist @ Microsoft Canada@fharper | ou...
le problème
le Web d’avant, la perception actuelle
le Web d’aujourd’hui
Fundamentally, there’s just one World WideWeb, but it can be experienced in different wayson different devices.- Luke Wobl...
donc, trop souvent… les mobiles sont pris en considération comme un élément à part les mobiles ne sont tout simplement p...
l’anti expérience
la solution
une solution
Mobile firstLuke Wroblewski bloguait à ce sujet le 3 novembre 2009
L’expérience
les raisons
la croissance
mobilité en croissance• D’ici 2014 = mobile > desktop• Aux É-U, 25% = mobile seulement!• Exemple (sous peu): 50% mobile de...
en perspectiveSource: http://lukew.com/
N’utilise-t-on pas tous des apps?                                347% d’augmentation sur le                               ...
N’utilise-t-on pas tous des apps?                                112% d’augmentation sur                                l’...
les contraintes
les capacités
les capacités des appareils mobiles• Détection de la geolocalisation - GPS• Orientation de l’appareil – Accéléromètre• Écr...
le contexte
la mobilité n’est pas que mobileSouvent pris comme des inconvénients, il faut savoir en tirerprofit!
les avantages
Mobile First• Prépare le site aux nouvelles opportunités mobiles• Nous force à prioriser et à nous concentrer sur le conte...
l’inverse fonctionne bien non?
la réalitéSource: http://xkcd.com/773/
les inconvénients
les désavantages• Changement dans la façon  • de penser le design/la création  • de créer les sites• On doit vraiment conn...
implémentation
redéfinir l’expérience
UI      NUI – Natural User Interface      Touch      Espace facile ou difficile à atteindre      Limité à l’essentiel
Touch    Recommandé = 9mm/34px    Minimum = 7mm/26px    Espace minimum = 2mm/8px    Grandeur de l’élément visuel = 60-...
le code1. Éliminer les redirections2. Utiliser Application Cache pour le stockage de contenu local3. Utiliser CSS3 et les ...
fonctionnalités1. Utiliser la géolocalisation   1. Location et direction2. Utiliser l’appareil photo et/ou le micro3. Util...
se résume…Expérience mobile = capacités – contraintes + priorisation                                contextes
ressources
Screenfly
http Luke W post: http://www.lukew.com/ff/entry.asp?933 Mobile First book: http://www.abookapart.com/products/mobile-fir...
en résumé, Mobile First c’est• Penser à la croissance des appareils mobiles• Minimiser les contraintes• Maximiser les capa...
aussi…• Mobile First <3 Responsive Web Design• Responsive Web Design != Mobile First• Content First est la clé• Ce n’est q...
…every desktop UI should be designed for touchnow. When any desktop machine could have atouch interface, we have to procee...
Every UI should be designed for touch now!- Frédéric Harper, conférence Web-In, 2012-11-12
questionsFrédéric Harperfredh@microsoft.com@fharperhttp://webnotwar.cahttp://outofcomfortzone.net
Web in - Mobile First: créer une bonne expérience mobile
Web in - Mobile First: créer une bonne expérience mobile
Web in - Mobile First: créer une bonne expérience mobile
Web in - Mobile First: créer une bonne expérience mobile
Web in - Mobile First: créer une bonne expérience mobile
Web in - Mobile First: créer une bonne expérience mobile
Web in - Mobile First: créer une bonne expérience mobile
Web in - Mobile First: créer une bonne expérience mobile
Web in - Mobile First: créer une bonne expérience mobile
Web in - Mobile First: créer une bonne expérience mobile
Web in - Mobile First: créer une bonne expérience mobile
Web in - Mobile First: créer une bonne expérience mobile
Web in - Mobile First: créer une bonne expérience mobile
Web in - Mobile First: créer une bonne expérience mobile
Web in - Mobile First: créer une bonne expérience mobile
Web in - Mobile First: créer une bonne expérience mobile
Web in - Mobile First: créer une bonne expérience mobile
Web in - Mobile First: créer une bonne expérience mobile
Web in - Mobile First: créer une bonne expérience mobile
Web in - Mobile First: créer une bonne expérience mobile
Upcoming SlideShare
Loading in …5
×

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

2,680 views

Published on

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
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, Copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. 2012-11-1Mobile First: créer unebonne expérience mobileFrédéric HarperTechnical Evangelist @ Microsoft Canada@fharper | outofcomfortzone.net
  2. 2. le problème
  3. 3. le Web d’avant, la perception actuelle
  4. 4. le Web d’aujourd’hui
  5. 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. 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. 7. l’anti expérience
  8. 8. la solution
  9. 9. une solution
  10. 10. Mobile firstLuke Wroblewski bloguait à ce sujet le 3 novembre 2009
  11. 11. L’expérience
  12. 12. les raisons
  13. 13. la croissance
  14. 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. 15. en perspectiveSource: http://lukew.com/
  16. 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. 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. 18. les contraintes
  19. 19. les capacités
  20. 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. 21. le contexte
  22. 22. la mobilité n’est pas que mobileSouvent pris comme des inconvénients, il faut savoir en tirerprofit!
  23. 23. les avantages
  24. 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. 25. l’inverse fonctionne bien non?
  26. 26. la réalitéSource: http://xkcd.com/773/
  27. 27. les inconvénients
  28. 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. 29. implémentation
  30. 30. redéfinir l’expérience
  31. 31. UI  NUI – Natural User Interface  Touch  Espace facile ou difficile à atteindre  Limité à l’essentiel
  32. 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. 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. 34. fonctionnalités1. Utiliser la géolocalisation 1. Location et direction2. Utiliser l’appareil photo et/ou le micro3. Utiliser le RFID/NFC
  35. 35. se résume…Expérience mobile = capacités – contraintes + priorisation contextes
  36. 36. ressources
  37. 37. Screenfly
  38. 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. 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. 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. 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. 42. Every UI should be designed for touch now!- Frédéric Harper, conférence Web-In, 2012-11-12
  43. 43. questionsFrédéric Harperfredh@microsoft.com@fharperhttp://webnotwar.cahttp://outofcomfortzone.net

×