Présentation des standards du web

par lena · 7 septembre 2006

Introduction

Bien que cela ait beaucoup changer depuis la sortie du livre de Jefrey Zeldman, il existe encore aujourd’hui (2006) deux approches de construction de site qui continuent à se partager les points de vue.

D’une part, les adeptes de la méthode avec mise en page en tableaux et le fameux pixel transparent, méthode utilisée jusqu’à ces dernières années. Cette méthode utilise parfois, dans les meilleurs cas, un mélange de CSS (pour prendre en compte ce qui est textes et couleurs) et de tableaux (pour gérer tout ce qui est disposition et mise en place des éléments dans l’espace).

On qualifie cette technique de design hybride. Leurs utilisateurs mettent en avant le côté rapide et pratique ‘du pixel transparent’ et la robustesse de portabilité inter-navigateurs…

D’un autre côté, on trouve les utilisateurs de la compatibilité ascendante et de la séparation du contenu / contenant. En clair, les utilisateurs des Standards du Web. Ce dernier se base sur une pleine sémantique du document d’un côté et de la génération complète des CSS et CSS-P de l’autre.

Cette méthode garantit la portabilité des sites dans le temps et sur les plateformes diverses. Le classique CSS Zen Garden, illustre cette séparation entre contenu structuré et tout autre élément visuel.

Une équipe composée de Jefrey Zeldman, Eric Meyer, Dave Shea… pour ne citer que eux, ont mis en place le Web Standard Project WaSP, et ont pu évangéliser l’utilisation des standards.

Lors de l’écriture de Design web : utiliser les standards : CSS et XHTML en 2005 Jeffrey Zeldman, tirait un signal d’alerte, en titrant, « … 99,9% des sites web sont obsolètes… « , aujourd’hui, fin 2006, il publie une réédition et titre « … 99,9 % des sites web sont encore et toujours obsolètes… »

Quelques mots sur les standards

C’est quoi ?

Recommandé depuis 1996 par le w3c, les standards du web sont un ensemble de technologies qui permettent de construire des pages web en séparant le contenu du contenant, et en se dégageant de toute solution propriétaire (se réfèrer à la guerre des navigateurs du début des années 1990) et donc de ce fait, de s’assurer de la pérénité de son travail face à l’évolution des navigateurs ou des plateformes de visualisation… (téléphone, PDA, lecteurs d’écran, TV, bornes, électro-ménager…).

Il est vrai que pour beaucoup de développeurs de site, qui découvrent aujourd’hui l’utilisation des standards, cela change radicalement la manière de travailler et d’approcher la mise en forme du site.

Egalement pour les plus graphistes d’entre nous, fini les exports to HTML depuis Word, Photoshop, Fireworks ou autre logiciel… ou encore les copié collé entre excel et dreamweaver… ou bien les fameuses images de survol qui s’appuient sur des javascripts interminables.

Les responsables de projets sont également concernés par l’utilisation des standards, car de cette manière le poids des pages réduit énormément, ce qui, de ce fait, baisse considérablement la bande passante, le temps de chargement est optimisé, et la diffusion vers tout type de périphérique, garanti.

Bref, il est vrai qu’entre les utilisateurs des standards et les accros de la construction à l’ancienne, il existe une foultitude de méthodes plus ou moins hybrides qui démontrent qu’il existe bien mille et une manières d’arriver au même résultat… en tout cas en façade.

La guerre des navigateurs

Au début du web, les navigateurs Netscape et Internet Explorer se disputaient les parts de marché pour conquérir la plus grande masse d’utilisateurs. En l’intégrant à Windows 98 et en offrant des performances parfois supérieures, Microsoft a réussi à se débarrasser de Netscape. Les navigateurs restant sur le marché ne parvenaient pas à reprendre le poste de concurrent, et Internet Explorer devenait LE navigateur.

Il aura fallu attendre que la fondation Mozilla propose sa soution avec Firefox 1.0 puis 2.0 pour voir les parts de marché de Internet Explorer reculer. Aujourd’hui, la solution de Firefox continu de progresser et gagne un grand nombre d’utilisateurs.

On ne peut pas réduire à la simple utilisation de IE et Firefox, il y a également la présence de Safari et de Opera. Opera reste présent sur le marché des solutions mobiles (PDA, Téléphonie…) et du côté de Safari, il faut regarder les tendances de ces prochains temps, car Firefox 2.0 commence à faire des adeptes sous OSX Intel. Donc Safari vs Firefox.

En faisant du HTML et des CSS, donc… on utilise les standards ?

Oui, en fait, utiliser des technos comme HTML et CSS revient à dire qu’on utilise les standards du web, mais de là à réduire cela à cette simple définition, il y a un pas.

Le tout n’est pas d’utiliser des technologies, mais surtout de bien les utiliser. Pour de plus amples informations sur les bases de chacune de ces technologies, voyez les divers tutoriels sur HTML, CSS, DOM, Ecma… Mais c’est quoi bien utiliser les technos ?

compatibilité descendante

Pour résumer et faire court, dans cette partie sur les standards du web, nous pourrions dire que comme évoqué plus haut, les standards s’assurent d’une compatibilité ascendante avec les navigateurs.

Encore une fois, par navigateurs, entendre agents utilisateurs et non pas simplement Netscape, Internet Explorer, Firefox, Safari, Opera… pour ne citer que les plus courants. Donc ok, c’est compatible avec les navigateurs contemporains et futurs, mais qu’advient-il de la compatibilité descendante ?

C’est-à-dire, quid de nos sites, une fois ‘standardisés’ si l’internaute utilise un navigateur ancien qui n’interpréte pas correctement les standards ? Encore une fois, entendre par là, navigateurs d’anciennes générations, de type Netscape 4.8 qui reste le fleuron redoutable de l’interprétation des standards, et ne pas simplement réduire à une portabilité inter-navigateurs.

En gros, s’assurer que cela fonctionne aussi bien sous Safari que sous Internet Explorer etc… est une chose, mais s’assurer que les internautes utilisant des navigateurs anciens auront également accès à l’information, en est une autre, à prendre également en compte !

Visualisez par exemple, en utilisant Netscape 4.8, les captures comparatives de ces diverses familles de sites, qui proposent une approche différente lors de l’utilisation d’un navigateur ancien :

Avec une préservation minimum du visuel, comme le site de dell petites et moyennes entreprises, ou celui de la banque popluaire, qui malgré une esthétique différente laissent libre accès à l’information;

Alors qu’il est totalement impossible de voir clairement ce qu’on fait sur voyages-sncf.com. (voir image ci-contre)

Une autre approche reste celle de csszengarden qui opte carrément pour une non utilisation des CSS, dès lors que le navigateur est ancien.

Vous avez dit divite ou classite ?

Bien que l’utilisation de balises <div> et <span> soit fort précieuse pour nous permettre de préciser et affiner le contenu de nos pages, il faut rester précautionneux quant à leur utilisation. Avoir systématiquement recours à celles-ci, peut nuire à la clarté du document, à sa verbosité, à son interprétation, au poids des pages, etc…

Il n’est pas rare de rencontrer des montages structurels de la sorte :

<div>
  <p><span class="paragraphe">Un texte de contenu</span></p>
</div>

au lieu, de :

<p>Un texte de contenu</p>

…bien que cela paraisse assez particulier, cela se rencontre encore, ou même des éléments de menus flottant comme celui-ci :

<div id="menuFlottant">
  <ul>
      <li><a href="#">Menu</a></li>
        <li><a href="#">Menu</a></li>
    </ul>
<div>

au lieu de :

<ul id="menuFlottant">
    <li><a href="#">Menu</a></li>
    <li><a href="#">Menu</a></li>
</ul>

Bref, la liste est longue, les balises <img> dans une <div>, des <label> remplacés par des <span>, etc.. etc… là aussi il faut faire attention à ne pas surcharger le code en balise <div> ou dans l’utilisation des class= » ».

Cet emploi exagéré se traduit par une classite ou une divite, ainsi, on ne peut pas dire que bien que le contenu soit du HTML et que la mise en forme soit basée sur des CSS, l’utilisation des standards du web soit optimale.

Javascript, JScript, EcmaScript ou pas du tout ?

Quel langage de script faut-il utiliser… Javascript, JScript, EcmaScript ?, en fait le seul langage standard est le JavaScript standardisé par ECMA, donc le EcmaScript. Et bien que « standard », encore une fois, l’utilisation d’une interactivité sophistiquée peut engendrer une mauvaise utilisation des standards. C’est-à-dire ?

Imaginez, comme cela est souvent le cas dans certaines entreprises ou pour les lecteurs d’écran, que la fonctionnalité du JavaScript soit désactivée. Que devient votre page qui repose principalement sur l’utilisation de ce code client ?

Il faut donc penser à intégrer son JavaScript de manière discrète (inobtrusive javascript) afin de permettre aux personnes qui n’ont pas JavaScript d’activé sur leur navigateur, d’accéder de manière confortable à votre contenu.

A quoi ressemble un site qui sépare le contenu par rapport à un autre qui ne le fait pas ?

Un des meilleurs outils d’exploration des sites web et des standards du web, reste Firefox. Parmi les multiples intérêts de Firefox on trouve notamment la possibilité de le doter d’une multitude d’extensions gratuites permettant ainsi d’étendre les possibilités du nvaigateur.

Notamment l’extension web Developer Tools, qui ajoute une barre d’outils pleine de ressources. Le but de ce tutoriel n’étant pas de décrire l’ensemble des fonctionnalités de cette barre, nous nous concentrerons sur le fait que, depuis son menu CSS > Disable Styles > All Styles (Ctrl + Alt + S) il est très facile d’activer, ou non, les styles de la page en cours de visualisation.

Parcourez ainsi divers sites et jouez de cette activation/désactivation pour voir le résultat…. Il existe également un autre outil indispensable, FireBug, qui vous permet d’explorer la structuration même du document HTML, des CSS ou encore du Javascript.

un exemple :

Deux sites à la stratégie différente, Amazon, qui joue une portabilité plus sûre pour un large public en mélangeant mise en forme et html… et Next Formation qui a opté pour une pure séparation du contenu et de l’affichage. Vous pouvez le constater sur l’animation ci-dessous.

Ceci étant, feuille de style ou pas… le résultat final donne d’un point de vue extérieur, des sites qui se ressemblent visuellement… donc quel est l’intérêt de passer par une mise en forme à l’ancienne…. en design hybride …. ou respectueuse des standards ?

Pour faire bref et succins, on dira que l’utilisation des standards permet :

La séparation entre le contenu et la mise en forme
La pérennité face à tout type de navigateurs à venir
La clarté et la simplicité des pages (côté code notamment)
La portabilité des contenus vis à vis des diverses plateformes (Navigateurs, Téléphonie, TV, PDA, lecteurs d’écrans…)
Facilite l’implémentation de l’accessibilité
Optimise et accentue les mécaniques de référencement
Un meilleur rendement pour les agents (économie de bande passante)

Ce qu’en pensent les différents acteurs du Web

Voici directement les liens vers quelques sites, parmi les plus fervents évangélisateurs et gourous sur l’utilisation des standards, qui nous donnent leur points de vue sur le pourquoi du comment de l’utilisation de ces standards.