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!

CSS Summer Refresh 2010

Comme vous avez pu le remarquer, j’ai fait un petit rafraîchissement de mon blog au cours de l’été… disons que la rouille commençait à prendre dans le bas des portes… J’ai profité du concours CSS Summer Refresh 2010 de Alsacréations pour me donner le petit coup de pied au derrière qu’il me fallait.

Ainsi donc, je vous invite à aller voir les sites en lice, dont certaines sont vraiment très intéressantes, et à voter pour celles qui vous plaisent le plus. Si c’est la mienne, tant mieux, mais je ne m’en offusquerai pas si ce n’est pas le cas 😉

Avis public…

Juste une petite note pour vous avertir que je suis en révision du visuel de mon site, alors si les choses ne s’affichent pas très bien, c’est tout à fait normal… Merci de votre patience!

Une grosse journée aujour’hui!

Voilà, le Web Éducation est fini, et je dois dire que je me sens un peu lessivé. J’étais un peu inquiet, je me questionnais sur la pertinence de faire une présentation où je parlerais de portes coulissantes en CSS, de Sprites CSS, des techniques de remplacement d’images… je croyais que ces méthodes étaient maîtrisées et utilisées par tous, il semblerait que ce ne soit pas le cas.

Malgré tout, plusieurs m’ont dit qu’ils utilisaient les techniques, sans en connaître les noms, ce qui est bien compréhensible. Mais je crois que ce qui m’a surpris le plus, c’est de voir que peu de gens utilisent les fonctions telles que les slices (ou tranches) dans Photoshop ou encore les layers spécialisés (adjustment, fill, gradient…). Je leur ai ordonné de le faire dès maintenant, au lieu de toujours travailler sur des layers rasterisés (ouah! que d’anglicismes en un paragraphe!!).

Je dois valider si je peux diffuser l’ensemble de la documentation présentée (fichiers PSD, CSS, HTML et tout le reste) avant de pouvoir le rendre disponible ici même, sur mon blogue. Restez branchés, vous les verrez peut-être sous peu!

Document remis aux participants de la conférence

Je crois que cette présentation a été bénéfique, finalement. Je vous invite à consulter le document que j’ai remis aux personnes présentes.

La période de questions a été aussi assez intéressante. Des discussions et débats intéressants sur l’avenir de xHTML vs HTML 5, un peu sur les CSS, on a parlé de cSS3, design pour mobiles… plein de thèmes, en fait!

… Et un gros merci à Yannick et Simon pour leur prestation et leur invitation à participer avec eux à cette journée! Ouais, Yannick, je vais le ré-installer FireBug et tenter de m’y remettre! tu as réussi!