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