Introduction au webdesign/Modèle de boîtes

Début de la boite de navigation du chapitre

fin de la boite de navigation du chapitre

Préambule

Bien que le standard CSS ait été créé il y a fort longtemps (décembre 1996), jusqu'à peu, le "Modèle de Boîtes" était le modèle prépondérant sur le web.

Ce modèle a la particularité d’utiliser les éléments HTML, eux-même, comme décoration des pages et d’utiliser des tableaux pour disposer les éléments sur les pages web. Il en résulte un positionnement parfait et fixe, mais extrêmement rigide, un code complexe à lire et très lourd, ainsi qu'une accessibilité nulle pour les mal/non-voyants.

Pourquoi a-t-on utilisé ce modèle ?

Personne ne connaît réellement la réponse... on peut imaginer cependant que l’utilisation d’outils Wysiwyg tels que Dreamweaver à quelque peu favorisé ce modèle : il était plus "simple" à l’utilisation de placer quelques tableaux que de rajouter une feuille de style sur un texte "linéaire" où tous les éléments apparaissent sur la page dans l’ordre dans lequel ils apparaissent dans le code source de la page.

Pourquoi est-ce un "mauvais modèle" ?

Premier élément : "c'est pas fait pour ça"

Il utilise les tableaux pour fixer la mise en page : un tableau n’est pas fait pour ça.

Un tableau sert à ordonner des données suivant certains critères, à les classer et à les présenter de manière à pouvoir les comparer simplement, autrement dit dans le jargon : présenter des données tabulaires.

Deuxième élément : "ça n’est pas toujours accessible"

Du point de vue d'un "bon-voyant", ça ne changera rien. Mais pour une personne qui consulte la page web à l'aide d'un lecteur d'écran qui lit le contenu des pages dans l’ordre où il se présente dans le code HTML, cela peut être problématique : en fonction de la disposition précise du contenu dans les différentes lignes et cellules du tableau, cette linéarisation peut rendre le contenu incompréhensible. Un tableau de mise en forme est considéré comme pertinent par les normes d'accessibilité dans la mesure où:

• il permet d'obtenir un rendu que ne permettent pas les styles CSS, compte-tenu de leurs implémentations parfois variables selon les navigateurs
• il se linéarise correctement, c'est-à-dire que son contenu reste compréhensible quand il est perçu sans affichage en lignes et en colonnes.

Troisième élément : "c'est figé"

Ce modèle porte ce nom car les cellules des tableaux sont autant de "boîtes" rigides qui enferment les éléments de la page. Si on veut changer la largeur d'une colonne on change la largeur de toutes les cellules qui sont dessus ou dessous, on doit donc parfois rajouter des tableaux dans les cellules pour avoir un contrôle plus fin de l'affichage... La structure de la page est figée.

Dernier élément : "la complexité"

Nous l'avons vu : on est souvent obligé d'imbriquer les tableaux. Il en résulte un code illisible, difficile à maintenir, à modifier, à "re-styler" (à changer d'apparence) et les pages sont très lourdes.

Que faire d’autre ?

Utiliser les CSS... ça se passe au chapitre suivant