Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot Présentation de Mathieu Parisot lors du BlendWebMix du 29/10/2014

2. Dans l'enfer du Web Mobile
Un retour d'expérience
Mathieu PARISOT

3. Mathieu PARISOT
Développeur Web et Java
@matparisot
www.google.com/+ParisotMathieu

7. Pourquoi ?

8. Problème #0 :
La diversité

9. iOs 5+
Android 2.3
Android 4.x
Windows Phone 7.X
Windows Phone 8
Blackberry 5+
Bada 1&2
symbian S60

10. iOs 5+ 6+
Android 2.3
Android 4.x
Windows Phone 7.X
Windows Phone 8
Blackberry 5+ 7+
Bada 1&2
symbian S60

11. Problème #1 :
Les mises à jour

12. Rappelez-vous

13. Sur mobile le navigateur
est mis à jour avec le
système…

14. Sep 2013 : 4.4
Jul 2013 : 4.3
Oct 2012 : 4.2
Jun 2012 : 4.1
Oct 2011 : 4.0
Déc 2010 : 2.3
Oct 2009 : 2.0
Sep 2014 : 8.0
Oct 2013 : 7.0
Sep 2012 : 6.0
Jun 2011 : 5.0
Jun 2010 : 4.0
Jun 2009 : 3.0

15. Pendant ce temps il y a
eu 31 versions de
Chrome

16. Bonne nouvelle
Android 4+

17. Mauvaise nouvelle

18. Mauvaise nouvelle

19. Pas si grave !
Sauf que…

20. Problème #2 :
La fragmentation

21. Système
(Android 2.3, 4.0, etc.)

22. Constructeurs
(Samsung, HTC, Motorola, Sony, etc.)
Système
(Android 2.3, 4.0, etc.)

23. Opérateurs
(Orange, SFR, Bouygues, Free, etc.)
Constructeurs
(Samsung, HTC, Motorola, Sony, etc.)
Système
(Android 2.3, 4.0, etc.)

26. Les bogues

27. L'histoire de l'input "cassé"
<input type="text" maxlength="6" name="myField">

28. Problème #3 :
Le débug

29. iOs 6+

30. Android avec Chrome

31. Windows Phone
Windows Phone 7.x n'a pas de
console js…

32. Et les autres ?
Weinre + jsconsole

33. Problème #4 :
Le réseau

34. La taille
Si votre site fonctionne sur
mobile mais fait 10Mo :
Vous avez fait tout ça pour rien…

35. La latence

36. L'écosystème
Il vous faut un réseau wifi
(et un port USB)
sur lequel vous connecter
pendant le développement

37. Problème #5 :
Les quirks

38. Les champs de saisie iOs
input {
font-size: 16px;
}

39. Le scrolling

40. Les clics
Click Me !

41. Le viewport
<meta name="viewport"
content="width=device-width"
/>
@-ms-viewport {
width: device-width;
}

42. Le support HTML5/CSS3
can i use websql
caniuse.org

49. MERCI

50. @matparisot