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