Warning: parse_url(http://#1) [function.parse-url]: Unable to parse URL in /home/barbayel/blog/wp-content/plugins/jetpack/class.media-extractor.php on line 209

Le web mobile

Avec l’évolution des réseaux 3G et l’évolution des smartphones dernières générations, le web mobile est clairement amené à se développer dans les mois à venir. En même temps, je ne me mouille pas trop quand j’annonce ça vu que chaque année des gens très sérieux annoncent la révolution du web mobile et chaque année, on ne voit rien venir [1]. Mais un jour ou l’autre, ça va venir. En attendant, autant se préparer le mieux possible.

One Web to rule them all

Le W3C a édité une recommandation dur le web mobile : Mobile Web Best Practices 1.0. Pour le W3C, le web mobile reste du web. A ce titre, le consortium recommande de rendre accessible les mêmes informations et les mêmes services à tous les utilisateurs, quels que soit le type de terminal avec lequel ils accèdent au site internet. C’est le concept du « One Web » :

One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using.

Si on lit correctement cette recommandation, on s’aperçoit que la clé du web mobile, y compris pour le W3C, c’est le pragmatisme : as far as reasonable, voulant dire autant que faire se peut.

Dans la suite du document il est d’ailleurs question de 3 méthodes pour adapter son contenu selon le type du terminal client :

Server side
c’est le serveur qui délivre un contenu adapté au terminal [2];
In Network
des composants tierces (un web service par exemple) se chargent de l’adaptation du contenu au type de terminal ;
Client Side
le client qui se charge de donner au contenu une forme présentable. C’est ici qu’entre en scène le media type handeld.

Media type = handeld, la solution ?

Si nous étions dans un monde parfait, il suffirait d’appeler une feuille de style par média [3] pour faire en sorte que son site soit aussi bien adapté à l’impression qu’à l’écran qu’à la lecture sur terminal mobile. Un simple truc dans ce goût là suffirait : <link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" />

Mais oh j’ai un scoop ! Ce monde ci n’est pas parfait !

Vu la disparité des navigateurs et des plate formes mobiles, c’est pas gagné. De nombreux terminaux utilisent la feuille de style qui se rapporte au media »screen » et ignorent totalement le media type handeld. A ma connaissance, opera mini respecte la règle du media type, le navigateur blackberry lui est un peu capricieux, quant aux autres, je n’ai pas eu l’occasion de tester [4]. En d’autres termes, pour le web mobile, il ne faut pas trop se reposer sur le client et oublier – pour l’instant – le media type handeld.

Supposons un instant que nous vivions dans un monde parfait et que tous les terminaux mobiles reconnaissent le media type handeld. Certains terminaux mobiles ne supportent pas les iframes, le javascript ou le flash… Sans compter les problèmes de bande passante. Une connexion portable reste aujourd’hui moins rapide qu’une connexion desktop. Il faut donc adapter le contenu d’une page au terminal. Or les feuilles de style ne gèrent que la présentation, pas le contenu. Même si on rajoute une règle spécifique au media type handeld
img {display:none;} les images seront quand même téléchargées, sans parler des vidéos qui là plombent carrément la page sur un portable.

One web (et demi)

De même qu’on ne lit pas un article papier de la même manière qu’un article en ligne, on ne lit pas un article sur un terminal mobile de la même manière que sur un écran; il y a moins de place, la lecture est moins confortable, on n’a pas de souris à portée de main… Bref, le medium influe forcément sur le message. Il me paraît donc difficile d’imaginer présenter le même contenu pour la version desktop et la version mobile d’un site web. En fait, plutôt que de contenu, il vaudrait mieux employer le terme d’architecture. Le vrai challenge pour le web mobile c’est de réussir à naviguer sur plus de 3 pages consécutives sans se faire une ampoule à force de scroller.

C’est pourquoi, des 3 méthodes d’adaptation proposées par le W3C, la plus adéquate me semble être la Server side. On sert le même contenu pour la version mobile et la version desktop, sauf que pour la version mobile, on taille dans le vif : fini les menus de 3km, les vidéos de 5Mo, les scripts lourds qui servent à faire défiler une liste de news avec un effet whaow!-que-c’est-beau-ce-fondu-enchaîné… On ne conserve plus qu’une page de liste avec titre, chapeau. Le One web et demi.

  1. En Europe en tout cas
  2. Pour exemple, on peut citer la version mobile de news.fr
  3. Je parlais de tous les médias disponibles dans ce billet
  4. Messieurs les possesseurs de N80, j’attends vos retours 😉