Le web est une chose trop sérieuse pour être confiée aux seuls webmaster

#Coup de gueule #Web

Attention: article de fond, donc (trop) long!

Il y a quelques jours, Daniel Glazman, éminente personnalité du monde du web, lançait sur son blog un appel à l’action: The Open Web Needs You NOW. Cet appel met en garde contre un danger qui menace le développement web en ce moment même et contre lequel il est urgent de réagir.

Rédigé en anglais à l’origine, cet article a été traduit en français et abondamment commenté, il a généré des dizaines de milliers de twitts, mais la grande majorité des articles à ce sujet restent très techniques.

Ainsi, si des termes comme CSS3 ou des expressions cryptiques comme -webkit-* ne vous disent rien ou si la simple vue de l’abréviation IE6 ne vous donne pas boutons, les chances sont grandes que vous ne compreniez pas grand chose à l’appel de Glazman.

La question est effectivement technique et il est normal de tenter de convaincre les professionnels du domaine d’abord, mais je suis d’avis que ça ne suffit pas. Le web est une chose trop sérieuse pour être confiée aux seuls webmaster et je vais tenter dans cet article d’expliquer de la manière la plus accessible possible de quoi il retourne.

Cet article est donc destiné aux gens qui gravitent autour du monde du web mais qui n’en sont pas spécialistes: clients de webmaster ou d’agences web, futurs clients ou simple curieux… ou éventuellement aux professionnels du web qui n’osent pas avouer qu’ils n’ont pas compris le problème! ;-)

Séparer contenu et présentation: le CSS

Une des notions fondamentales sur laquelle repose le web actuel est la séparation entre le contenu et sa présentation. Par exemple, si vous lisez le présent article sur un ordinateur (et non sur un smartphone), prenez le temps de redimensionner la fenêtre de votre navigateur: en dessous d’une certaine largeur, la disposition des éléments change et le graphisme se simplifie. Imprimez cette page: sa présentation sera encore un peu différente, pour ne garder que les éléments pertinents à l’impression.

Comment ça marche? Une page web se compose au fait de deux éléments distincts:

  1. Une description du contenu et de sa structure. On aura donc une indiction sur “Ceci est un titre de premier niveau” ou “ceci est un lien”, mais aucune indication sur l’apparence que doivent prendre ces éléments. Le format de fichier utilisé dans ce contexte est le HTML.
  2. Un ensemble de règles du type “Les titres seront de telle ou telle taille et dans telle police”, “les liens seront bleus clair mais passeront au bleu foncé au survol de la souris”, etc. Ces règles s’écrivent dans un format appelé CSS.

Il peut y avoir encore d’autres éléments, mais cette petite présentation nous permet de comprendre le rôle du CSS et cela nous suffira pour la suite.

Si vous désirez voir comment cette page se présenterait sans ses règles CSS, cliquez ici . Vous pouvez ensuite recharger la page si vous désirez récupérer la mise en page d’origine.

Ce système permet ainsi d’adapter la présentation d’une page selon qu’on la voit sur un petit écran, un grand écran ou qu’on l’imprime. Mais cela permet aussi par exemple:

Afin que tout le monde se comprenne, le HTML et le CSS sont normalisés par un organisme nommé le W3C (pour World Wide Web Consortium). Cet organe est au web ce que l’Académie française est à la langue française: il définit ce qui est juste et faux - puis chacun dans sa pratique quotidienne décide jusqu’à quel point il est important pour lui de suivre cette norme. Mai dès trop écarts improtants sûre cet norme peu provoké dé dificulté a fer passé le messages.

Ça peut même être joli: CSS3 et préfixes vendeur

C’est bien connu: à l’origine le web était conçu par et pour des chercheurs en d’obscures sciences fondamentales, barbus, en chaussettes dans leur vieilles sandales, misanthropes et solitaires. L’important était donc de pouvoir échanger des informations - l’apparence revêtant un aspect très secondaire (comme celle des chercheurs, d’ailleurs…).

De nos jours le web est peuplé de gens très raffinés et exigeants - designers, spécialistes en marketing et… vous sans doute! - qui ne sauraient se contenter d’un message brut sans y mettre un joli emballage.

C’est ainsi qu’on a vu progressivement apparaître des polices de caractères variées, des coins arrondis un peu partout, des ombres portées en abondance, de jolies transitions visuelles au survol de la souris, et bien d’autres raffinements visuels.

À l’origine, ces effets étaient obtenus à coup d’infâmes bricolages. Mais leur usage se généralisant, le W3C a décidé de faire évoluer la norme CSS vers sa troisième édition (d’où le fameux CSS3) incluant toutes ces possibilités et bien d’autres.

Mais la tâche est ardue et prend bien des années… ce qui est beaucoup trop long à l’échelle de l’évolution du web. C’est pourquoi une solution intermédiaire a été proposée: si Opéra a une super-idée d’une nouvelle règle CSS, il peut l’inclure dans son navigateur mais en la faisant commencer par -o-; Firefox, qui trouve l’idée de base pas mauvaise mais veut modifier quelques détails, reprendra la même règle en remplaçant -o- par -moz- (pour Mozilla, éditeur de firefox); Safari s’en emparera mais avec le préfixe -webkit- (du nom d’un des composants principaux de ce navigateur); etc.

Ainsi tout le monde est content: le W3C peut baser sa norme sur des éléments existants et choisir le meilleur de ce qui existe déjà, les éditeurs de navigateurs peuvent proposer des améliorations intéressantes, le designer peut avoir des coins arrondis à 3 pixels et l’utilisateur bénéficie de jolis sites dès maintenant; et tout ceci de manière très propre: on fait la différence entre ce qui est compris de la même manière par tout le monde et ce qui est encore spécifique à certains navigateurs.

La dérive: -webkit-*

Tout est donc pour le mieux dans le meilleur des webs? Oui, sauf que…

Prenons un exemple. Pour obtenir des coins arrondis de 3 pixels sur un élément de la page, le web designer aimerait bien pouvoir écrire

border-radius: 3px;

Mais avec la solution décrite plus haut il devra écrire quelque chose comme

-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
[...]
border-radius: 3px;

Ainsi, cela marchera les navigateurs basés sur mozilla (Firefox, …), ceux basés sur webkit (Safari, iPhone, …), ainsi que sur Opéra, Internet Explorer, Chrome, etc.

Cela fait donc un peu plus de travail pour le web designer, mais ce n’est pas la fin du monde, surtout qu’il existe une variété d’outils pour automatiser partiellement ou totalement ce travail.

Mais le monde du web mobile (donc destiné aux smartphones) est dominé de manière écrasante par les navigateurs basés sur webkit, et de nombreux développeurs web - par paresse ou incompétence - se contentent de la ligne avec webkit-…

Leur site ne s’affichera donc correctement que dans les navigateurs basés sur webkit… ce qui est précisément ce qu’on cherchait à éviter tout à l’heure!

Mais business is business et les autres navigateurs, craignant de perdre des parts de marché commencent à prévoir d’inclure dans leurs propres navigateurs dès règles en -webkit-. Tous les efforts d’évoluer proprement vers un web plus joli sont donc en train de tomber à l’eau…

Un précédent: IE6

Le néophyte pourrait à raison se poser la question: est-ce si grave?

Mais il se trouve qu’il existe un précédent dans l’histoire récente du web et que ce précédent a coûté des centaines de milliers d’heures de travail, des millions de dollars (respectivement, euros, yens, sesterces, …) et bien des cheveux blancs: il s’agit d’Internet Explorer 6, plus connu dans le milieu sous le nom d’IE6.

IE6 est sorti en 2001, et la position quasi-monopolistique de son éditeur l’a mis dans une situation de très large domination du marché. Il avait un comportement très loin des normes pour beaucoup de choses, mais son omniprésence a renversé le sens de la norme: de nombreux développeurs se sont mis à faire des sites spécialement adaptés à IE6, s’affichant mal voire pas du tout sur les autres navigateurs. Puis la roue a tourné, IE6 a perdu des parts de marché et progressivement tout le monde s’est rendu compte que c’était au fait une horreur qui n’aurait jamais du exister.

Oui mais voilà… les entreprises qui avaient investi dans des outils ne fonctionnant que sous IE6 ne voulaient plus le changer. Donc IE6 est resté sur le marché très, très longtemps et représentait un terrible boulet à tirer pour tous les web designers: comme beaucoup d’utilisateurs l’utilisaient encore, on était obligé de tenir compte des caprices d’IE6 et on se retrouvait à faire deux fois le travail de design: une fois pour IE6 et une fois pour les navigateurs respectant (plus ou moins bien) les normes.

Ce n’est que plus de dix ans après que de plus en plus de site osent renoncer à s’inquiéter d’IE6. Les décisions de google et facebook dans ce sens ont d’ailleurs bien aidé.

On respire donc dans dans le monde du web, on pourra arrêter de s’inquiéter des particularités d’un navigateur raté d’il y a plus de 10 ans.

Oui mais… Vous aurez compris avec tout ce qui précède, qu’on est en train de se précipiter la tête la première dans la même erreur! L’histoire ne nous aurait-elle rien appris?

Ne laissons pas aux webmaster le pouvoir de ruiner le web!

Il est facile de penser que ceci ne regarde que les professionnels du web. Eux seuls, semble-t-il, ont le pouvoir d’influencer le cours des choses.

Et pourtant, une autre catégorie de personnes a le pouvoir d’influencer la situation: ceux qui engagent des professionnels du web.

C’est d’ailleurs la raison pour laquelle j’ai essayé de rendre cette problématique accessible au non-spécialiste: les webmasters ne pourront plus se permettre de bâcler leur travail si leurs clients comprennent les enjeux de leurs choix techniques.

C’est pourquoi je me permets de relayer l’appel de Glazman en le modifiant un peu: si vous avez le projet d’engager une personne ou une agence pour vous faire un site ou une application web, assurez-vous qu’elle fasse correctement son travail et qu’elle s’arrange pour que le site ou l’application ne soit pas lié à un navigateur en particulier, quel qu’il soit.

Cela contribuera à assurer que le web reste un endroit fréquentable à l’avenir - mais même si la philanthropie n’est pas votre truc cela aura d’autres avantages bien plus directs pour vous:

Maintenant que vous comprenez ce qui se cache derrière les termes CSS3, -webkit-* et IE6, vous pouvez lire l’appel de Glazman et vous écrier avec lui: “THIS MUST NOT HAPPEN”. Si on s’y met tous, il n’est peut-être pas encore trop tard.