Le gradient de couleurs se fait généralement en créant une image mais il est maintenant possible d’utiliser le code CSS à cette fin, ce qui est beaucoup plus élégant. De plus, les navigateurs modernes supportent maintenant beaucoup mieux cette fonction. C’est le cas par exemple de IE, Firefox 3.6+, Safari ou Chrome.

Un gradient en CSS qui marche presque partout

Les trois lignes de code CSS suivantes permettent de créer un gradient sans image qui fonctionne dans presque tous les navigateurs. Pour les navigateurs encore réfractaires (bouh…!), on peut rajouter une ligne de code afin d’avoir quand même une couleur de fond de page.

background: #aaaaaa; /* navigateurs non css3 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* IE */
background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#000000)); /* navigateurs webkit (chrome ou Safari) */
background: -moz-linear-gradient(top, #cccccc, #000000); /* firefox 3.6+ */

A noter qu’Opera ne supporte pas encore cette règle mais cela ne saurait tarder. C’est le moment d’adopter cette notation et de stimuler ainsi les développeurs de navigateurs à s’y mettre.

Oyez, oyez ! Voici ma règle d’or pour la création de sites Web :

C’est pas parce qu’on peut le faire, qu’il faut le faire !

Je veux dire par là que trop de concepteurs de sites Web se font prendre au piège de la technologie. Trop contents d’avoir appris (plus ou moins bien parfois !) une nouvelle technique, ils se croient obligés de la mettre en oeuvre sur un site Web, même si celui-ci n’en a nullement besoin.

Il ne faut jamais oublier que le concepteur est au service du client. Il n’est pas là pour démontrer ses compétences mais pour créer un site Web qui « vende » le plus efficacement possible les produits et/ou services du client. Et, bien souvent, efficacité est synonyme de simplicité. Comme dans la vraie vie…

Avant de penser à l’aspect d’une page Web, il faut penser à sa structure (pas la charrue avant les boeufs). Ainsi, votre code HTML ou XHTML sera prêt à recevoir le formatage de la feuille de style CSS. Dans cette optique, il faut se débarrasser de toutes les balises HTML qui visent à modifier la présentation de la page et remplacer celles-ci par du code CSS.

La structure

Beaucoup de concepteurs pensent d’abord au « look » d’une page avant de penser à sa structure (si toutefois ils y pensent…). Ils lancent Photoshop ou Fireworks puis dessinent graphiquement l’aspect visuel de la page. Quand ils ont fini cette étape, ils s’arrangent pour recréer ce design en HTML.

Pour de bonnes pratiques conformes aux standards du W3C, il faut oublier cette méthode inappropriée et rétablir un ordre logique de conception de la page. Il faut donc penser en premier à la structure du contenu qui viendra s’insérer dans la page.

Il faut noter que, pour une même structure et un même contenu, le look de la page pourra être très différent grâce à la feuille de style CSS. Autrement dit, le fait de penser en premier à la structure du contenu n’influe en rien sur le look de la page. Il s’agit juste de travailler selon un ordre logique et selon les bonnes pratiques.

Pourquoi ces bonnes pratiques ? Parce que si vous créez une page dans Photoshop, il est probable que celle-ci ne fonctionne pas si un internaute veut la voir sur son PDA, son téléphone cellulaire ou son lecteur d’écran, voire sur son navigateur si celui-ci est autre qu’Internet Explorer (environ 20 % des cas actuellement, soit des millions d’utilisateurs).

Comment on fait ?

Il faut considérer que le contenu d’une page se répartit en blocs et que chaque bloc doit avoir une signification homogène. Ce sont des blocs de contenu et chaque bloc a un même objectif du point de vue de la signification. La structure de votre page doit refléter ces différents blocs. Par exemple :

1. Haut de page avec titre et logo
2. Contenu textuel principal
3. Menu de navigation pour tout le site
4. Sous-menu de navigation
5. Formulaire de recherche pour le site
6. Pied de page avec mentions légales

La balise servant à structure le contenu d’une page est <div> et on peut donc écrire :

<div id= »titre »></div>
<div id= »contenu »></div>
<div id= »nav »></div>
<div id= »sousnav »></div>
<div id= »recherche »></div>
<div id= »pied »></div>

Ce code représente la structure de la page et il est organisé sémantiquement (d’après le sens). Une balise <div> peut contenir tout ce qu’on veut, y compris d’autres balises <div>, des titres de paragraphes, des paragraphes, des images, des tableaux, etc. Chaque bloc de contenu peut être placé où l’on veut sur la page avec les couleurs, les bordures, les alignements, etc. que l’on veut. Autre avantage : une page ainsi structurée reste simple et donc facile à maintenir et modifier. Ainsi, les coûts pour le client sont réduits et votre travail gagne en efficacité.

Remplacer les balises HTML par du code CSS

Chaque balise HTML de présentation doit ensuite être remplacée par son équivalent CSS. Par exemple, on pourra simplifier :

marginwidth="0" leftmargin="0" marginheight="0" topmargin="0"

en :

margin: 0;

Autant il est déconseillé de structurer une page HTML à l’aide de tableaux imbriqués, autant il est conseillé d’utiliser un tableau pour présenter des données sous forme tabulaire. Par contre, dans ce dernier cas, il convient de formater le tableau afin de le rendre plus accessible.

Un tableau donc un titre

Tout d’abord, un tableau doit avoir un titre pour plus de clarté. Pour cela, on utilise la balise <caption>. Voici un exemple :

<table>
<caption>Mes revenus en fonction de l'année et des clients</caption>
<tr>
<td>
…

Cette balise doit être placée juste après la balise <table>.

Un petit résumé ferait pas de mal

Une autre balise sert à préciser le contenu et le but des données présentées dans le tableau. Cette balise est <summary> et il s’agit d’un attribut à la balise <table>. Voici un exemple d’utilisation :

<table summary="Voici un tableau présentant mes revenus annuels pour chacun de mes 12 clients, classés par ordre d'importance.">
<caption>Mes revenus en fonction de l'année et des clients</caption>
<tr>
<td>
…

C’est plus clair avec des entêtes

Mais un tableau se doit également de posséder des entêtes de colonnes. C’est la balise <th> qui sert à désigner les entêtes. On l’utilise comme suit :

<table summary="Voici un tableau présentant mes revenus annuels pour chacun de mes 12 clients, classés par ordre d'importance.">
<caption>Mes revenus en fonction de l'année et des clients</caption>
<tr>
<th>client1</th>
<th>client2</th>
<th>client3</th>
…

Encore plus accessible

Pour que les personnes surfant avec un lecteur d’écran (handicapés visuels) s’y retrouvent plus facilement, il faut associer les entêtes du tableau aux données de ce dernier. Ainsi, les lecteurs d’écran « liront » le tableau d’une manière plus logique plutôt que de lire chaque rangée bêtement de gauche à droite.

Il faut tout d’abord ajouter des « id » aux entêtes du tableau. Rien de plus facile :

<table summary="Voici un tableau présentant mes revenus annuels pour chacun de mes 12 clients, classés par ordre d'importance.">
<caption>Mes revenus en fonction de l'année et des clients</caption>
<tr>
<th id="client1">client1</th>
<th id="client2">client2</th>
<th id="client3">client3</th>
…

Il suffit maintenant d’ajouter l’attribut correspondant dans chaque cellule du tableau. Très simple :

<table summary="Voici un tableau présentant mes revenus annuels pour chacun de mes 12 clients, classés par ordre d'importance.">
<caption>Mes revenus en fonction de l'année et des clients</caption>
<tr>
<th id="client1">client1</th>
<th id="client2">client2</th>
<th id="client3">client3</th>
</tr>
<tr>
<td headers="client1">300 euros</td>
<td headers="client1">200 euros</td>
<td headers="client1">100 euros</td>

…

Groupons, groupons

Enfin, trois autres balises peuvent être utiles pour plus d’accessibilité et de convenance. Elles permettent également d’apporter davantage de sens à la structure du tableau. Ces trois balises sont : <thead>, <tbody>, <tfoot>. On peut donc séparer le contenu du tableau en trois parties logiques : les entêtes, le corps du tableau et le pied du tableau. Pour le développeur CSS, cela veut dire qu’il dispose de trois zones distinctes de formatage sans avoir à rajouter d’attributs « id » ou « class ». Voici un exemple :


<table>
<thead>
<tr>
... c'est ici que l'on met les entêtes du tableau
</tr>
</thead>
<tfoot>
<tr>
... c'est ici que l'on met le pied du tableau
</tr>
</tfoot>
<tbody>
<tr>
... c'est ici que l'on met la partie principale du tableau avec ses cellules
</tr>
</tbody>
</table>


A noter que <thead> et <tfoot> doivent être placées avant <tbody>.

Avant de penser à l’aspect esthétique d’une page Web, il convient de réfléchir à la façon dont va s’organiser sémantiquement le code HTML (ou XHTML) de cette page. Le but de cette démarche est que la page forme un « couple idéal » avec la feuille de style CSS qui va y être attachée.

Une structuration sémantique

Un grand nombre de concepteurs Web ont appris leur métier à une époque où la priorité était donnée à l’aspect des pages, à leur design, à leur look. Il fallait alors réfléchir aux images, couleurs, graphismes qui permettraient de réaliser ce look. En général, on utilisait un logiciel graphique (Photoshop par exemple) pour dessiner l’aspect esthétique de la page. Ensuite, on s’arrangeait pour que le code HTML traduise le mieux possible ce qu’on avait dessiné sous Photoshop. Mais cette époque est révolue, par exemple parce que les différents systèmes de navigation (navigateurs, téléphones portables, PDA, etc.) ne peuvent pas afficher de telles pages qui ne sont conformes à aucun standard.

Pour qu’une page Web puisse être associée à une feuille de style CSS et soit conforme aux standards, il faut absolument oublier cette façon de faire. La priorité ne doit plus être donnée à l’aspect esthétique mais à la façon dont le code HTML est structurée. C’est ici qu’intervient la sémantique. En gros, la sémantique s’occupe du sens des termes linguistiques. Pour ce qui nous concerne, en tant que concepteur de pages Web, cela veut dire que le code HTML doit être organisé en fonction de son sens.

Je sens que vous allez me demander un exemple. En voici un : un menu de navigation ce n’est finalement qu’une liste d’options. Alors la balise HTML la mieux adaptée au codage d’un menu de navigation c’est la balise qui crée une liste, par exemple une liste <ul>.

Une page structurée sémantiquement implique aussi que son contenu textuel soit organisé en différents modules, chacun regroupant les idées apparentées.

Lorsqu’une page est correctement structurée, il est alors facile de lui appliquer une feuille de style et de lui donner l’esthétique que l’on veut : le menu horizontal en haut, vertical à gauche ou à droite, etc. Pas de limite à l’imagination en la matière…

Alors comment on fait ?

Le mot-clé est « structuration sémantique » : des balises correspondant au contenu qu’elles définissent et des modules thématiques de contenu textuel. Si on réfléchit à la façon dont doit s’organiser la page que l’on est en train de créer, voici, par exemple, le type de structure que l’on pourrait définir :

1. Barre horizontale comprenant le nom de la société, son logo, etc.
2. Menu principal de navigation.
3. Sous-menu de navigation.
4. Contenu textuel et graphique de la page.
5. Formulaire de feedback pour les internautes.
6. Barre horizontale contenant le pied de page, un menu textuel, etc.

Chacun de ces thèmes peut être placé dans une balise <div> car celle-ci permet justement d’organiser la structure de la page. Et chacune de ces balises <div> peut se voir attribuer un attribut « id » spécifique. Par exemple :

• <div id="entete"></div>
• <div id="menuPrincipal"></div>
• <div id="sousMenu"></div>
• <div id="texte"></div></code>
• <div id="feedback"></div>
• <div id="basDePage"></div>

Nous avons donc défini une structure et n’avons jamais réfléchi en terme d’esthétique. Cette façon de faire est donc très différente de la façon « traditionnelle ». Nous avons organisé l’information de manière sémantique quant à son contenu et il ne reste plus qu’à entrer le contenu textuel et graphique entre les balises <div>.

Chaque balise HTML doit être choisie avec rigueur, non pas parce qu’elle implique un certain aspect sur la page mais pour son sémantisme propre. Ainsi, inutile d’utiliser la balise <blockquote> pour indenter un paragraphe si ce paragraphe n’est pas une citation. Il faut indenter un paragraphe via la feuille de style CSS (puisque l’indentation est un problème d’aspect, d’esthétique). Par contre, si l’on fait une citation (un extrait d’un roman par exemple), alors il faut utiliser la balise <blockquote> car c’est son sens (en anglais le terme « block quote » peut se traduire par « module de citation »). On code alors sémantiquement.

Chacun de ces modules (les <div>) peut alors être placé où l’on veut dans la page et avoir les couleurs, les polices, les espacements, etc. que l’on veut grâce à la feuille de style CSS. Rien n’empêche, par exemple, de mettre le menu principal de navigation en haut horizontalement ou bien de le mettre à droite verticalement ou encore à gauche. C’est maintenant qu’il faut se soucier des aspects esthétiques et surtout laisser tout cela à la charge de la feuille de style.

Et si on pouvait naviguer sur un site Web en utilisant des touches du clavier. C’est maintenant possible ! Deux balises permettent en effet cette avancée : accesskey et tabindex. Tout ce que vous avez toujours voulu savoir sur accesskey et tabindex…

accesskey assigne un caractère du clavier à n’importe quel élément HTML, y compris les liens, les boutons et les champs textuels. Il suffit alors d’appuyer sur une touche du clavier pour activer l’élément en question.

tabindex précise l’ordre selon lequel un visiteur sélectionne des éléments HTML par appui successif sur la touche Tab.

Vous pourriez vous demander pourquoi il serait utile de naviguer sur un site Web avec le clavier alors que l’on a la souris pour cela. Il s’agit d’une question d’accessibilité. En effet, certaines personnes, pour des raisons de handicap ou étant donné les circonstances, ne peuvent pas utiliser la souris. Par ailleurs, les mal-voyants ou non-voyants utilisant un navigateur à lecture séquentielle apprécieront de sauter certains passages de votre page Web pour aller directement à ce qui les intéresse.

Exemples d’utilisation :

• <a href="contact.htm" title="Nous contacter" accesskey="C">Nous contacter</a>. Dans ce cas, le fait d’appuyer simultanément sur Alt et la touche C du clavier vous envoie directement sur la page contact.htm (ou bien il faut également valider avec la touche Entrée dans certains navigateurs). On peut également utiliser divers chiffres pour chaque option de son menu de navigation.
• <a href="contact.htm" title="Nous contacter" tabindex="1">Nous contacter</a>. Ici, le premier appui sur la touche Tab active le lien et il faut ensuite valider avec la touche Entrée pour aller sur la page contact.htm. On peut ensuite utiliser tabindex= »2″, tabindex= »3″, etc. pour ses autres liens ou éléments HTML.

Cette technique est donc relativement simple et on aurait tort de s’en priver car elle rend la navigation dans les pages un peu plus accessible.

Il ne doit pas y avoir beaucoup de sites Web qui ne comportent pas d’images et on peut même dire que les images jouent un rôle clé de communication sur le Web. C’est pourquoi il est particulièrement important de les rendre accessibles. Pour cela, la technique est simple, rapide et à 3 niveaux.

Premier niveau d’accessibilité : la balise « alt »

• Il suffit de rajouter l’attribut « alt » dans le code XHTML après l’attribut indiquant la source de l’image. Par exemple :
  <img src="mon_image.gif" alt="Le chalet où j'ai passé mes vacances dans le Vercors" />
• La balise alt doit contenir un court descriptif de ce que représente l’image. Quelqu’un qui ne verrait pas l’image doit comprendre sommairement ce qu’elle représente.
• Cette balise permet une accessibilité minimale aux personnes handicapées. Les personne non-handicapées mais surfant sans les images auront également un aperçu du contenu de l’image et pourront décider de l’afficher.

Deuxième niveau d’accessibilité : la balise « title »

• On l’ajoute après la balise « alt » suivant la syntaxe :
  <img src="mon_image.gif" alt="Le chalet où j'ai passé mes vacances dans le Vercors" title="Ce chalet possède 3 pièces principales très agréables et offre une vue imprenable sur de superbes paysages. J'ai passé 1 semaine dans cet endroit et je me suis régalé." />
• Cette balise vient compléter la balise « alt » en donnant une description plus précise de l’image.

Troisième niveau d’accessibilité : la balise « longdesc »

• Cette balise permet de donner un descriptif très complet expliquant avec précision ce que montre l’image. Sa syntaxe est :<img src="mon_image.gif" alt="Le chalet où j'ai passé mes vacances dans le Vercors" title="Ce chalet possède 3 pièces principales très agréables et offre une vue imprenable sur de superbes paysages. J'ai passé 1 semaine dans cet endroit et je me suis régalé." longdesc="chalet.htm" />
• Comme vous le constatez la balise « longdesc » renvoie vers un autre fichier XMTML (chalet.htm contenant la description de l’image. Ce fichier ressemble à n’importe quel autre fichier XHTML et contient une partie « head » et une partie « body », cette dernière comportant le descriptif de l’image.

Tout ce que vous ferez qui favorisera l’accessibilité est un pas dans la bonne direction pour qu’un maximum d’internautes profitent de vos pages. Mais c’est également un pas dans la bonne direction pour une bonne indexation dans les moteurs de recherche.

La fin des années 90 et le début des années 2000 ont vu la guerre des navigateurs avec l’affrontement entre Microsoft et Netscape qui se sont concurrencés pour prendre la première place du marché. Il en a résulté beaucoup de problèmes à plusieurs niveaux (il paraît que la concurrence c’est bien…). Pour faire court, les concepteurs de sites Web devaient coder leurs pages de deux ou plusieurs façons : une page pour Internet Explorer et une autre pour Netscape au minimum, parfois il fallait également coder en fonction des versions de ces navigateurs. Résultat : un gros travail à faire, d’une efficacité pas forcément démontrée, des coûts supplémentaires pour les clients, des déboires pour les internautes… Bref, la foire !

Puis, la guerre s’étant soldée par la victoire d’Internet Explorer, au début des années 2000, le W3C a finalement été suivi dans ses propositions de standardisation. Les versions 5 des principaux navigateurs et leurs versions ultérieures ont donc pas trop mal respecté ces normes. Il faut dire qu’il en allait de la survie du Web : les coûts de création et de maintenance des sites Web devenaient tellement élevés, et la vague des start-ups étant définitivement retombée, il fallait bien que quelque chose se passe.

Les navigateurs actuels Firefox, Opera, Mozilla Suite, etc.) et les vieux mastodontes (Internet Explorer, Netscape) respectent tous maintenant une large part des normes édictées par le W3C : XHTML strict, CSS 1 et 2, DOM, ECMAScript, pour ne citer que celles-ci. Qu’est-ce que cela implique pour les concepteurs de sites Web et leurs clients, me direz-vous ?

Principalement cela : il n’est plus nécessaire de réaliser plusieurs versions du même site pour qu’il puisse être vu sous différents systèmes et sur différentes plates-formes. Finis également les sites compatibles uniquement avec Netscape ou compatibles uniquement avec Microsoft Internet Explorer. Terminées les versions spéciales WAP ou WML ou les versions spécifiques aux vieux navigateurs. Finies les versions spéciales des pages destinées aux imprimantes. Plus besoin de détecter le navigateur de l’internaute ou son système d’exploitation pour lui présenter des pages spéciales.

Résultat : grâce à la standardisation, les clients paient maintenant moins chers des sites qui pourront être vus sur des systèmes plus divers et qui seront compatibles avec les technologies de demain.

Les avantages du respect des normes du W3C sont nombreux, jugez plutôt :

• les sites seront compatibles avec les navigateurs et systèmes du futur (cela implique des coûts en moins également),
• davantage d’internautes pourront accéder à davantage de sites (après tout, c’est communiquer que l’on veut, non ? Alors pourquoi restreindre l’accès à son site ?),
• l’accessibilité des sites aux personnes handicapées est améliorée (déficients visuels),
• la maintenance des sites est simplifiée (des coûts en moins ici aussi),
• des présentations plus propres et plus claires sont maintenant possibles,
• etc.

Bref, maintenant que 99 % des internautes surfent avec des navigateurs respectueux des normes, il n’y a plus aucune raison de ne pas construire des sites optimisés conformes aux normes du W3C. Nous avons tous à y gagner : designers, clients, internautes.