C'est bien beau de parler de web design, mais le web design n'est rien sans la page web. Designons intelligemment donc, et commençons donc par comprendre ce qu'est une page web, des fois que ça soit quand même utile ;-)

Qu'est ce qu'une page Web ? Le HTML est-il juste une suite de balises ? Comment rendre une page web jolie et présentable ? Qu'est ce qui se cache derrière cet objet devenu extrêmement commun et se cache-t-il vraiment quelque chose ? Quand on publie une page web, que construit on exactement ? Petit état des lieux de ce qu'est une page web, de ses concepts sous-jacents et de comment s'amuser avec tout ça.

Les concepts.

En réalité on peut casser une page web en trois parties conceptuelles (relativement) indépendantes. On devrait pouvoir le faire. La bonne pratique de conception l'exige. Cela dit, il faut bien reconnaitre que ce n'est pas toujours le cas. Mais cette séparation modulaire en trois parties a des conséquences directes et bien pratiques, ne serait-ce que par l'existence de technologies ou langages distincts pour les manipuler.

On va donc distinguer trois concepts importants : le fond, la forme et la présentation.

Le fond, c'est le contenu, c'est la valeur ajoutée, c'est la création, c'est ce qui va rendre une page web utile aux yeux des autres, c'est le texte de la news publiée. On pourrait faire un inventaire, il serait loin d'être exhaustif même si on pourrait y trouver quelques invariants : les menus, les liens, le billet d'un blog avec ses classiques (auteur, titre, chapô, ...).

Ce fond n'est rien s'il n'est pas un minimum structuré : c'est la forme. Au passage, il s'agit d'une étape de la création injustement délaissée. Il s'agit d'extraire du contenu ce qui est porteur de sens en lui en attribuant un, justement : dire que ce bout de texte, c'est un titre ; que ce fragment, c'est une subdivision de l'espace d'affichage, que ce bout de texte est important et qu'il faut le mettre en valeur. Ça n'a l'air de rien, on pourrait même s'en fiche éperdument au vu du résultat final attendu, mais on en reparlera quand ce bidule appelé web sémantique commencera son œuvre de domination...

Et puis, parce que finalement, tout ce qui importe aux yeux du visiteur, c'est la façon dont les choses lui sont montrées, il faut bien habiller ce fond et cette forme : c'est la présentation. Parce que c'est ce qui importe aux yeux du visiteur d'un site, beaucoup d'effort lui seront consacrés, probablement trop au regard de la vrai importance du fond et même de la forme...

Le fond : you are the tool

Bon, ok, en toute honnêteté, et rien que pour le plaisir de se contredire soi-même, il n'existe pas de langage ou technologie dédiée pour écrire la partie « fond » ou contenu d'une page web : il faut se retrousser les manches. Si vous voulez rédiger un billet pour un blog : go openoffice. Si vous voulez créer de jolies images pour votre page web : go gimp, etc.

La forme : Brontosaurus HTMLus

Faut il vraiment présenter HTML ? Oui, ne serait-ce que pour insister lourdement sur un aspect négligé d'HTML et plus particulièrement de XHTML. Sous cet acronyme ce cache le langage permettant de structurer le fond d'un contenu. Il s'agit d'un ensemble de « balises » qui vont dire au navigateur ce qu'est le texte contenu entre une balise ouvrante et une balise fermante.

Par exemple, il existe dans le langage HTML une balise appelée ul. Encore un horrible barbarisme informatique me dira le profane ; mais pourtant cette balise a le sens très limpide de : ul pour « Unordered List » ; autrement dit : « liste non ordonnée ». De plus, on peut imbriquer les balises. Ainsi, un lecteur profane curieux lisant le code source d'une page web pour repérer une balise ul dans une page verra sans peine que derrière cette balise, on trouve généralement des balises li. Pourquoi Li ? On n'y verra pas la trace d'un Mr. Li qui aurait contribué fortement à l'existence d'Internet ; non non, on y verra plus simplement l'acronyme de « List Item », autrement dit « élément de liste ». Ainsi, le code suivant :

...permet de spécifier l'existence d'une liste non ordonnée contenant trois éléments. Elle pourra ainsi être interprétée par un navigateur moderne de la façon suivante :

• Une pierre
• Deux maisons
• Trois ruines

D'une certaine façon, il s'agit de donner du sens au texte (ou au contenu, données, ...). Aujourd'hui, on axe plutôt les efforts sur le rendu d'une page. Aussi, faire une présentation d'HTML peut paraitre risible : seul le rendu graphique importe. Un usage qu'on peut observer, par exemple, consiste à utiliser des balises table pour mettre en forme des fragments de la page (aligner des paragraphe de texte en horizontal, etc.). Quel mal y a-t-il à ça, tant qu'on arrive au résultat escompté ?

Parce que, tout simplement, on rompt la sémantique des balises HTML. Une balise table sert à afficher des données tabulaires. La balise donne du « sens » à ce qu'on met à l'intérieur. Les ordinateurs, les browsers sont des machines stupides. Elles ne « savent » pas ce qu'elles affichent, elles sont complètement aveugles au sens d'un texte par exemple. Structurer un texte, un contenu avec des balises, c'est une façon de dire à la machine, ce qu'il y a ici c'est important et on lui donne ce sens précis. C'est de cette façon qu'on peut bâtir des moteurs de recherche efficace et intelligent. Mais pour cela, il ne faut pas rompre le lien entre le contenant (la balise) et le contenu (le texte). " le « web sémantique ». Si vous aviez déjà entendu ce terme, que vous n'aviez aucune idée de ce que c'est ; et bien voilà, vous en avez un aperçu (outrageusement simplifié).

Trêve de digression, vous pouvez vous amuser à structurer vous même votre page avec un simple éditeur de texte (notepad++) ou en utilisant des outils plus sophistiqués (à la dreamweaver). Gardez à l'esprit que si vous utilisez des solutions clefs-en-mains de génération de site, vous risquez d'avoir un contrôle moindre sur la structure HTML générée. Le résultat sera le même (encore que...) mais vous aurez fait des fautes « conceptuelles ». Et c'est mal. Si si.

La présentation : libérez la puissance du web-design (ou pas)

Si vous vous amusez à créer une page web depuis la base, en pensant d'abord au contenu, puis à la structuration, vous vous retrouvez avec une page écrite au format HTML. Si vous ouvrez cette page directement dans un navigateur, il faut se rendre à l'évidence : c'est moche. Aucune organisation spatiale. La police est laide. Etc. Rien à voir avec les merveilleux sites qu'on trouve sur Internet.

C'est donc là qu'on aborde la question de la présentation. Pour cet aspect, le langage le plus courant est le CSS : Cascading Style Sheet, actuellement dans sa version 2. Il s'agit d'écrire un ensemble de règles qui vont spécifier comment représenter un élément de votre page.

Pour ce faire, il faut commencer par nommer l'élément ciblés (vous pouvez en cibler plusieurs) : c'est ce qu'on appelle un sélecteur. Il peut s'agir d'une balise HTML, auquel cas le sélecteur s'appliquera à toutes les balises en question, ou d'un élément « nommé » : il s'agit d'une balise à laquelle on a attribué un identifiant ou une classe.

Ensuite on va lister toutes les propriétés graphiques de l'élément qu'on veut modifier. Ça va de propriétés extrêmement simples comme la couleur de police, ou l'image de fond à des propriétés plus complexes comme le positionnement de l'objet dans la page (source de nombreuses migraines pour les graphistes).

Les possibilités de ce langage sont immenses. Pour vous en convaincre, vous pourrez commencer par regarder sur le site du w3school un exemple - assez rudimentaire - de comment une bête page HTML peut se voir appliquer un style ou un autre à l'aide de feuilles de style CSS (en cliquant sur les liens dans le menu de gauche) . Vous pouvez aussi allez faire un tour sur CSS Zen Garden, un site de référence déjà présenté sur wd4all qui donnera un bon aperçu des très nombreuses possibilité de design (la même page avec un style appliqué et un autre complètement différent). Vous pouvez aussi aller voir ici la page google modifiée en jouant uniquement sur le CSS de la page (rajouté par Kameleoon ; pour vous amuser avec, rajoutez juste ?kameleoon=true à la fin de l'url, ou bien appuyez sur Shift+F2). Et ne parlons même pas de la version 3 de CSS qui arrive et qui, couplé à HTML5, promet encore plus de souplesse, de possibilités et de fun.

Pour vous amuser avec le CSS, vous pouvez évidemment vous familiariser complètement avec ce langage et écrire les règles CSS vous-même. Si vous ne voulez pas en entendre parler, vous pouvez utiliser des outils comme Artisteer ou Kameleoon et contrôler assez finement l'apparence des éléments de votre page ; ou vous pouvez faire confiance au gestionnaire de thème du gestionnaire de site/blogs/etc. que vous affectionnez...

Et puis après ?

Le fond, la forme et la présentation ne font néanmoins pas tout. On pourrait presque dire que c'est totalement et complètement dépassé de s'arrêter là. Ces concepts sont fondamentaux mais ils ne sont que la porte d'entrée vers autre chose : l'interaction ! Agir sur la page, accéder à des fonctionnalités, etc. Mais c'est une autre histoire, qui a quand même quelque chose à voir avec le webdesign : l'ergonomie ou comment un joli design peut-il servir l'ergonomie et donc l'interaction avec un site web...