Dans l'enfer du Web Mobile
Un retour d'expérience
Mathieu PARISOT
Mathieu PARISOTDéveloppeur Web et Java
@matparisot
www.google.com/+ParisotMathieu
Pourquoi ?
Problème #0 :
La diversité
iOs 5+Android 2.3Android 4.xWindows Phone 7.XWindows Phone 8Blackberry 5+Bada 1&2symbian S60
iOs 5+ 6+Android 2.3Android 4.xWindows Phone 7.XWindows Phone 8Blackberry 5+ 7+Bada 1&2symbian S60
Problème #1 :
Les mises à jour
Rappelez-vous
Sur mobile le navigateur est mis à
jour avec le système…
Oct 2009 : 2.0
Déc 2010 : 2.3
Oct 2011 : 4.0
Jun 2012 : 4.1
Oct 2012 : 4.2
Jul 2013 : 4.3
Sep 2013 : 4.4
Jun 2009 : 3.0
Jun 2010 : 4.0
Jun 2011 : 5.0
Sep 2012 : 6.0
Oct 2013 : 7.0
Sep 2014 : 8.0
Pendant ce temps il y a eu 31 versions de
Chrome
Bonne nouvelle
Android 4+
Mauvaise nouvelle
Mauvaise nouvelle
Pas si grave !
Sauf que…
Problème #2 :
La fragmentation
Système(Android 2.3, 4.0, etc.)
Système(Android 2.3, 4.0, etc.)
Constructeurs(Samsung, HTC, Motorola, Sony,
etc.)
Système(Android 2.3, 4.0, etc.)
Constructeurs(Samsung, HTC, Motorola, Sony,
etc.)
Opérateurs(Orange, SFR, Bouygues, Free, etc.)
Les bogues
L'histoire de l'input "cassé"
<input type="text" maxlength="6" name="myField">
Problème #3 :
Le débug
iOs 6+
Android avec Chrome
Windows Phone
Windows Phone 7.x n'a pas de console js…
Et les autres ?
Weinre + jsconsole
Problème #4 :
Le réseau
La taille
Si votre site fonctionne sur mobile mais fait 10Mo :
Vous avez fait tout ça pour rien…
La latence
L'écosystème
Il vous faut un réseau wifi (et un port USB)
sur lequel vous connecter pendant le développement
Problème #5 :
Les quirks
Les champs de saisie iOs
input { font-size: 16px; }
Le scrolling
Les clics
Click Me !
Le viewport
<meta name="viewport" content="width=device-width"/>
@-ms-viewport { width: device-width; }
Le support HTML5/CSS3
can i use websql
caniuse.org
MERCI
?@matparisot