Balkanisation 2.0

Depuis quelque temps je travaille pour des clients qui doivent se positionner sur une approche pour mobile de l’ensemble de leurs services Web. On parle ici d’une organisation gouvernementale, alors vous comprenez qu’il faut rejoindre le plus de gens possible avec toutes les contraintes qui viennent avec (et d’autres que vous ne pouvez même pas imaginer!).

Or, depuis le début de ces travaux, nous discutons des approches en vigueur actuellement, soit principalement le «Responsive design» et l’option du site mobile (mobi.quelquechose.com ou m.truc ou truc.mobi, m’enfin, ce que vous voudrez). Il s’agit ici de deux approches technologiques, mais aussi idéologiques qui s’affrontent.

Le responsive design prône une adaptation du contenu d’un site pour des largeurs d’écrans spécifiques alors que l’approche d’un site mobile favorise la création d’un site distinct (ou de gabarits distincts) destinés aux mobiles. Bien qu’en apparence semblables (je vous le jure, je vais le faire bientôt mon article pour EGouvQuebc sur le sujet!), ces deux méthodes sont fondamentalement bien différentes.

Mais avant d’élaborer plus, parlons du passé…

Balkaquoi?

Pour les plus vieux d’entre-vous (web parlant), vous vous souvenez des merveilleuses années ’90, où le Web avait deux couleurs, soit celle de Netscape ou d’Internet Explorer. C’est à ce moment que l’expression «balkanisation du Web» a commencé à faire son apparition. On parlait d’une approche où il y avait des sortes de clans, soit ceux de Netscape et ses standards, puis IE et les siens… les deux n’étant pas compatibles (souvenez-vous du <blink> qui ne fonctionnait que dans Netscape — une chance!).

Heureusement, cette époque est révolue. Les standards Web ont été adoptés et tous s’entendent que, pour le bien commun, nous devons avoir des sites qui sont multi-fureteurs et qu’on ne devrait pas discriminer l’un par rapport à l’autre… du moins, jusqu’à maintenant.

Balkanisation 2.0, c’est reparti!

Ça prenait XKCD pour vous démontrer l’effet de la balkanisation. Voilà, vous avez un appareil mobile, donc, en tant que designer ou responsable de site, je décide pour vous ce que vous verrez sur mon site. Voilà. C’est dit.

Bref, si vous avec un appareil mobile, je vous redirige vers le site mobile. J’ai décidé que vous voulez une carte, que vous voulez tel truc mais je ne vous donne pas le reste, vous n’en avez pas besoin. Oh, et comble de bonheur, même si vous accédez directement à une page de mon site par Google, je vois que vous être sur mobile, alors je vous ramène à ma page d’accueil, elle est si jolie sur votre tablette 10 pouces! :-p

Malgré les statistiques, les tests d’utilisabilité, et toute l’expertise dont vous ferez preuve, il est virtuellement impossible de savoir tout ce qu’un utilisateur fera sur un mobile versus un poste de travail dit «régulier». Le «contexte d’utilisation du mobile» peut être trompeur dans le design d’une approche mobile.

LukeW l’a bien dit pendant sa conférence au WAQ, plus de 2600 voitures sont vendues sur eBay par mobile! Les gens utilisent leur mobile pour faire des choses spécifiques, oui, mais aussi pour faire des usages réguliers du Web, comme sur un gros ordi…

Comme le dit si bien Mark Kirby, cité plus haut, la seule chose dont on est vraiment sûr, c’est que l’utilisateur a un écran plus petit.

Non, mais, où veux-tu en venir, là?

Je vais laisser parler Victor Brito, il résume bien le noeud du problème:

L’émergence du Web mobile a poussé certains développeurs de sites (pas tous, Dieu merci !) à proposer des « versions mobiles » distinctes des « versions normales » consultées sur un écran d’ordinateur classique. C’est contre cette deuxième balkanisation du Web, pour ainsi dire, que ce site veut faire campagne, d’autant que, comme le dit si bien Tim Berners-Lee : la nature du Web est son universalité. Or, dans universalité, il y a la notion de tout, mais aussi, d’un point de vue étymologique, la notion de ce qui est tourné vers un. Il n’y a qu’un seul Web et il doit être offert à tous, quels que soient les supports de consultation utilisés ou les handicaps éventuellement rencontrés.

Victor Brito, 2011

Par pitié, nous ne voulons pas revivre les expériences de la fin des années ’90, où nous maintenions des sites pour un fureteur et un autre. Il faut éviter qu’une telle situation se reproduise avec les sites pour mobiles. Il existe des méthodes, comme le Responsive design, bien que ce ne soit pas la panacée, qui peuvent nous aider à éviter les écueils.

Donnez accès au contenu de l’ensemble de votre site sur mobile, mais améliorez l’affichage pour un petit écran (changez les boîtes de place, cachez les pubs si vous voulez). Ne créez pas un site en parallèle qui lui sera une version édulcorée, limitée, rachitique de votre site. Pourquoi je ne pourrais pas voir la page que j’ai vu sur votre site cet après-midi avec mon ordinateur de bureau??

Il n’y a pas de Web mobile

There isn’t a second Web specifically for mobile devices. It’s all the same Web just as accessed by mobile devices. We use the term “mobile Web” as a shortcut for this concept. But even the words we use can influence our thinking and frame our discussions.

LukeW, septembre 2011

Il est impossible de voir comment se dessinera l’avenir. Si on décide de discriminer nos visiteurs qui utilisent un mobile et leur impose un site aux fonctions moindres ou différentes, on fait le choix pour eux, on ne leur laisse même pas la possibilité de décider eux-même.

De plus, comment peut-on caractériser ce qu’est un mobile? Une tablette, c’est un mobile? la 7 po et la 10 po? et les nouveaux padphones qui s’en viennent? C’est des tablettes ou des mobiles?

Bref, personne ne peut prédire ce qui se passera dans 1 an ou plus. On a des idées, et c’est tout. L’approche Responsive design est intéressante actuellement (malgré ses défauts) et probablement que quelque chose de nouveau la remplacera prochainement, on verra.

Alors, de grâce, évitez d’ostraciser les utilisateurs de mobiles. Offrez-leur plutôt une interface adaptée, mais ne les limitez pas. Soyez FutureFriend.ly!

Microsoft respecterait des standards autres que les leurs?

Logo IE

Eh bien, il semblerait que la future nouvelle hypothétique éventuelle et probable mouture de IE devrait supporter les standards Web, mais pas ses standards, mais plutôt les standards du W3C! Surprenant, non?

L’article indique que ça va demander des efforts de conversion, histoire de s’assurer que les sites soient fonctionnels dans ce fureteur… pourtant, si vous avez suivi les recommandations des gourous du Web depuis 2000-2001, vous faites déjà des sites respectueux des standards, non? alors, où est le problème?

IE va tout afficher correctement sans aucun recours à des hacks? cool! il était temps!

Malgré tout, je dois dire que je vais le croire lorsque je le verrai, pas avant!

En passant, je viens de réaliser que 45% de mes visiteurs sont en IE, dont 55% en IE7 (donc, grosso modo 25% de mes visites totales en IE7). Je vous avoue que je n,ai rien fait pour vérifier de quoi a l’air mon blogue en IE7… je le ferai éventuellement, n’ayez crainte…

Dans quel logiciel vis-tu?

Pendant le Off WebCom (WebCamp), Sylvain Carle a cité une question que quelqu’un lui a déjà posée et que j’ai trouvée fantastique: «Dans quel logiciel vis-tu?»

Quand on y pense, il est vrai que l’on vit dans un logiciel en particulier. Il y a quelques années, je vivais dans Photoshop, des collègues vivent dans MS Word, d’autres dans MS Excel… La réponse de Sylvain à cette question: dans son navigateur!

De plus en plus, moi aussi je vis dans mon navigateur. Courriels, nouvelles, blog, dictionnaire, encyclopédie… Tout s’y retrouve. Maintenant, avec l’approche Bureautique 2.0 (telle que décrite par Louis Naugès) où toute production de document peut se faire de façon décentralisée, via le fureteur, il n’est plus nécessaire d’avoir une machine fixe avec des logiciels montés dessus… un bon vieux fureteur sur n’importe quel OS peut faire l’affaire!

Je tenais simplement à montrer cette piste de réflexion et, surtout, mentionner la question éloquente.

Discussion sur les CSS… dans l’autobus!

Hier soir, en revenant chez moi après une longue journée de travail (elles sont très longues dernièrement… heures supp! argh!), donc, dans l’autobus, j’ai entendu deux personnes discuter de CSS.

Ça peut sembler anodin comme ça, mais pensez-y… un autobus plein de gens qui ne comprennent rien de rien à ce que disent deux passagers sauf vous, le designer, dans le coin, qui ne peut s’empêcher de tendre l’oreille… Or, voilà qu’un commentaire m’a tittillé. Il était alors question d’un problème d’affichage (fort probablement dans IE, à ce que j’en ai déduit) lorsqu’un de leurs collègue (ou je ne sais trop) mettait le fameux «truc xml en haut de page». Je n’ai pas pu me retenir plus longtemps…

Je suis allé les rejoindre et ai expliqué ce bogue connue de IE, si c’en est un… oui, c’en est un… m’enfin. Vous connaissez certainement, non? bah… si ce n’est pas le cas, voici un bref résumé (un résumé est bref par définition, non? est-ce là un pléonasme?):

Bon, la fameuse déclaration xml, ce «truc xml en haut de page», est, théoriquement, nécessaire pour toute page en xhtml (1.0 ou 1.1). Je ne lancerai pas le débat sur la présenc ou non de cette déclaration. Or, il y a un petit problème avec cette déclaration, en fait, juste dans ie (6, pour le 7, je ne l’ai pas encore essayé). Dès qu’elle est présente, ce dernier se met en mode quirks, il va donc interpréter de façon bizarre, quirks, les CSS.

Est-ce souhaitable? ça dépend. Si vous avez conçu votre site sans doctype ou avec cette déclaration XML depuis le début, c’est un moindre mal, car vous avez fait des hacks de CSS tout le temps pour que le tout s’affiche à peu près correctement dans ie vs FF.

Par contre, si vos CSS sont conçues selon les standards Web, il y a fort à parier que le fameux quirks mode vous donne de sacré maux de tête. La solution? pas trop géniale, mais il devient alors préférable de ne pas mettre de déclaration xml pour les pages en xhtml. Si tel est le cas, n’oubliez surtout pas la balise meta pour l’encodage des caractères dans le head:

<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />

J’ai juste trouvé décevant de ne pas avoir eu le temps d’élaborer plus longueemnt avec ces deux collègues dans le bus. Disons que le temps est un peu serré pour expliquer les origines du quirks mode et des différences d’interprétation des fureteurs… Bah, avec de la chance, ils liront peut-être mon blog?