Trop de sites sont réalisés par des designers qui n’ont pas de réelle vision web et il ne faut en aucun cas les blâmer mais il serait grand temps d’avancer et de laisser le webdesign à des gens qui ont été formés pour ça et de ce fait, proposer enfin, de vrai formation dans ce domaine. Le webdesign répond à des contraintes d’ergonomie, d’accessibilité, de sémantique et d’intégration. L’art est secondaire (troll ?). La maquette web est au service du contenu et non pas l’inverse.

Revenons donc à Duoh.com. Définissons d’abord ce qu’ils font. C’est une agence de design web et print qui existe depuis 1992 et composée de deux personnes : Geert Leyseele, le directeur de projet et Veerle Pieters au secteur de l’illustration et ’intégration. Duoh produit essentiellement de l’interface web mais également des logos, des illustrations, des icones et enfin du print.

Nous allons étudier dans un premier temps l’aspect graphique puis nous nous concentrerons sur l’aspect technique.

Une grille peu conventionnelle

Réalisée sous Illustrator, la maquette du site Duoh.com a pris un certain nombre de liberté graphique. Il ne s’agissait pas ici de s’enfermer dans les contraintes d’une grille.

Pourtant la tentation aurait été grande. On sait à quel point le design suisse (design que voulais évoque le nouveau Duoh) est très cubique et il aurait été évident de se caler précisément sur une grille régulière. Mais ici, il fallait du mouvement, de la vie. Comme on peut le voir sur l’image ci-dessous, certains éléments sont délibérement décalés par rapport à la grille de base.

Cela créé une certaine dynamique dans la mise en page. L’idée est également d’avoir un aspect différent à chaque scroll dans la page.

Concernant le choix des couleurs, là aussi, l’originalité était de mise. La maquette est un vrai arc-en-ciel. Une dizaine de couleurs ont été utilisées (rien que ça !). Mais c’est surtout leur utilisation qui est intéressante. On peut observer en fond de page, une gris très foncé (#3e373c) et dans la zone principale de contenu du blanc. En termes de contraste, on ne peut pas faire mieux. Et sur cette structure monochrome, viennent s’ajouter des couleurs « flashy » qui donnent force et vivacité.

Chaque maquette de page se présente comme une surprise pour le visiteur. Le fond de page change en permanence. En voici quelques exemples ci-dessous :

Il en est de même pour la sidebar…

L’innovation dans l’intégration

Si l’on met de côté un instant l’aspect graphique, on pourra remarquer un certain nombre de techniques d’intégration assez intéressantes et qui peuvent être aussi contestables.

Pour ce qui est des remplacements de texte par des images dans le menu principal, il y a un choix d’utiliser des balises span vides. A première vue, ça peut faire enrager les adeptes de la validité stricte ! Mais là, il est question d’accessibilité. En effet, contrairement aux techniques de remplacements d’image utilisées largement (text-indent :-9999px ou top :-9999px), il n’y aura aucun de souci lors de la lecture de la page si la CSS est activée et si les images ne sont pas chargées. L’astuce est de placer les span avec pour fond l’image au dessus (en position absolue) du texte.

Il peut paraitre également surprenant de trouver parfois des remplacements de texte par des images qui n’ont pas du tout le même contenu. Il y a par exemple sur la page Contact us, un titre de niveau 2 qui contient le texte « Contact us for an estimate? » et qui sous forme d’image est remplacé par « Want a site that beautiful and brainy too ? » ou le texte sur la homepage « Who we are » qui est tout bonnement remplacé par une image de séparation. J’argumenterais qu’ici on différencie l’aspect que le site aura lorsqu’il sera chargé avec tous les éléments graphique et son aspect dans aucune illustration. Aucun aspect n’est handicapé par ces pratiques et l’utilisateur ne manque aucune informations d’un coté comme de l’autre.

Ce qui a le plus perturbé les utilisateurs au premier coup d’œil sur ce site est l’utilisation de l’espace par la mise en page. Le site a été pensé de manière à ce qu’il soit agréable à lire autant sur des petites résolutions que sur des énormes résolutions (type iMac).Ce qui a rebuté plus d’un utilisateur est le fait qu’on ne puisse pas avoir accès sur les résolutions 1024*768 aux citations. D’autres qui avaient des résolutions intermédiaires se lamentaient d’avoir des citations coupées.

Ce genre de commentaires sont anti-productifs et ne feront jamais avancer le web. Il faut replacer le projet dans un contexte. Ici on parle de la vitrine d’un site de création web et print et pas d’un site destiné à un client. Ici, l’aspect novateur est qu’aucune résolution ne souffre de la mise en page. Le site s’adapte très bien à tout type d’écran. Il est enfin plaisant pour des personnes ayant des résolutions de type 1900*1200 de naviguer sur des sites web.

On notera également l’utilisation de la police de caractère Corbel (police distribuée avec Vista) et qui est remplacée par l’Helvetica au cas où cette dernière n’est pas disponible.

Au rang de la technique

Le site utilise le CMS Expression Engine et est hébergé chez Engine Hosting qui met à disposition ce CMS de base. Je ne connais pas encore totalement cet outil, je suis dans la découverte mais il semble qu’il soit très souple et offre grand nombre de fonctionnalités.

Les pages pèse en moyenne 200 ko, les fichiers les plus lourds étant les images de fonds bien évidemment mais on a rien sans rien

Coté javascript, Duoh a fait le choix « tendance » de la librairie Mootools. Ce qui est dommage, c’est d’avoir utilisé une librairie javascript uniquement pour les effets d’images sur la homepage et pour les tooltips de la sidebar. Là encore, ça se discute…

Le site est strictement valide W3C sur le code XHTML. Seule la CSS ne valide pas mais est-ce bien grave ?

Conclusion

Veerle qui a réalisé la maquette et l’intégration html de Duoh propose sans cesse ses idées en matière d’illustrations ou de réalisations web et Duoh.com constitue, une fois de plus, une nouvelle source d’inspiration.

Je vous invite à consulter ces liens pour plus d’informations :

• New Duoh! dot com has launched
• Tweaks to Duoh! dot com

J’ai repris la page d’accueil de SilverBackApp.com qui utilise déjà un effet Parallax au redimensionnement du navigateur. La technique très subtile consiste a placer les différentes couches de fonds avec des background-position en pourcentage. En jouant justement sur ces valeurs relatives, on peut de ce fait créer un effet intéressant lorsque l’utilisateur redimensionne sa fenêtre.

En partant de cette base, j’ai décidé de rajouter une couche Javascript. Le but est de changer la position du fond en fonction de la position de l’image. Pour cela, on va juste récupérer les positions du pointeur et utiliser ces valeurs pour déterminer le positionnement (en pixel cette fois) des différentes images.

On obtiendra avec jQuery ce type de code pour la div #frontvines

$("body").mousemove(function(event){
   $("#frontvines").css({ 
      backgroundPosition: (event.clientX * 1.1) + 'px 0px'
   });
});

Sur la première ligne, on cherche l’évènement qui indique que l’utilisateur bouge sa souris sur la page. Dans la partie fonction, on place en paramètre la position du curseur pour la réutiliser ensuite pour modifier les propriétés de styles associées à la balise comportant l’id #frontvines. Pour observer le résultat, rendez-vous sur la page dédié à cette démonstration disponible ici.

Pour aller plus loin, je me suis amusé, dans une seconde démonstration, à réutiliser une photo de paysage pour y introduire du parallax. Le principe reste le même, je vous laisse le soin de télécharger le script sur la page de la seconde démonstration, vous y trouverez la manière de procéder dans les commentaires du fichier Javascript.

Quelques liens en rapport avec Parallax :

Effet parallax à l’aide de CSS ou de Javascript

• Le futur site de service Dumago.net (CSS)
• Effet parallax aux mouvements de la souris sur Umaghetzeggen.nl (Javascript)
• Le site des tests de performances Javascript Dromaeo (CSS)
• Démo expérimentale de footer avec effet de vagues (CSS)

Utilisation de parallax sous Flash

• Une démo assez bluffante en Flash
• Effet de rotation rendu grâce à parallax
• Un header construit en parallax
• Le site Freedent White

Tutorial

• Un tutos sur Sitepoint.com sur les effet parallax en CSS

Le principe est simple. On génère en local un fichier XML à partir du fichier distant présent sur le site officiel Vélib via PHP. Une fois cette étape effectuée, on a plus qu’à charger le fichier xml à l’aide de Javascript.

La page de démonstration du script utilise le framework jQuery mais vous pourrez trouver dans l’archive une version en javascript pur et une autre version associée à l’autre framework Prototype (Merci d’ailleurs à Sunny pour son aide )

Vous trouverez toutes les informations nécessaires dans les commentaires des différents fichiers javascript. N’oubliez pas d’aller générer une clé API Google Map sur le site dédié.

Pour pouvoir accéder à la carte et télécharger le script associé, rendez-vous sur la page de démo du script de carte Vélib. L’archive contient le script php pour générer les fichiers xml de la carte Vélib et des informations associées à chaque borne, les fichiers Javascript correspondants, la feuille de style CSS et les images requises.

Cette réaction est plus ou moins justifiée. Nous sommes tous conscients des lacunes du navigateur Microsoft et plus particulièrement des versions antérieures à la 7. Toutefois, ce n’est pas une raison pour charger sa feuille de style de propriétés invalides en prenant comme bouc émissaire le navigateur de Monsieur Redmond.

Une feuille de style doit, au même titre que le document XHTML, passer l’épreuve du validateur W3C. Ce n’est pas en insérant des « _width: » ou encore de « %margin: » dans votre CSS que vous pourrez vous vantez de faire un site au codage propre. J’irais même jusqu’à dire que les hacks sont bons pour les fainéants la plupart du temps.

Dernièrement, j’avais fais remarquer à un intégrateur remonté contre IE que notre boulot perdrait de l’intérêt sans ces soucis de compatibilité. Même si j’affirmais cela ironiquement, je trouve passionnant de découvrir pourquoi telle propriété ne fonctionne pas de la même manière d’un navigateur à l’autre et surtout, comment y remédier.

Les hacks que l’on pourrait éviter

Les images PNG

Prenons l’exemple du PNG. Beaucoup de webmasters s’extasient devant les possibilités de ce format d’image. L’utilisation des différentes couches alpha de transparence offre effectivement de nombreuses possibilités. Seulement voilà, ce format n’est pas pris en charge par les anciennes versions d’IE. Le hacker en herbe viendra me faire remarquer que l’on peut remédier à ce problème en utilisant la propriété CSS DX.Transform dans la feuille CSS ou dans un fichier .htc. Cette utilisation pose plusieurs soucis :

• La feuille de style n’est pas valide W3C.
• La feuille CSS n’est pas censée intégrer ce genre de propriétés ou faire appel à des fichiers chargeant du JavaScript.
• Ce hack fait appel au moteur Direct X et selon la version, une simple image peut faire bugger le système d’exploitation, ce qui est, vous en conviendrez, un peu gênant…

Si vous souhaitez vraiment utilisez le PNG sur Internet Explorer, appelez plutôt un fichier JavaScript pur pour arriver à vos fins.

Parfois, un simple découpage de l’illustration au format GIF ou même une image JPEG placée intelligemment peut offrir au visiteur le même effet. Le PNG n’est pas une fin en soit.

Les pseudo-classes

Concernant les pseudo-classes, évitez également de passer par un fichier .htc dans votre feuille de style pour intégrer le :hover sur une balise div ou un :target sur une tout autre balise. Encore une fois, si cette utilisation est requise, passez par de pures fonctions JavaScripts.

Un problème de taille !

Arrêtons de nous prendre le chou avec les débats philosophiques sur le model box ou autre double-margin. Ces problèmes peuvent être aisément contournés. De plus, vous le verrez par vous même, quand on commence avec des hacks de placement ou d’ajustement de dimension, on en finit plus. Les hacks attirent les hacks

Comme vous pourrez le constater sur l’exemple suivant, les soucis de padding ou de margin peuvent parfois être causés par une simple propriété qui n’a pas lieu d’être. Pour être certain de contrôler pleinement votre mise en page, efforcez-vous de tester plusieurs méthodes de positionnement sans passer par les hacks et testez le résultat sur différents navigateurs. Il y aura toujours une méthode qui fasse plaisir à tout le monde

Pour résumer

Avant de se décider à utiliser un hack, il faut d’abord se questionner sur les autres alternatives valables. Dénigrer IE sans chercher plus loin n’amènera rien de bon. N’intégrez pas de fonctions JavaScripts dans votre feuille de style par le biais de fichiers .htc mais préférez un fichier JavaScript pur. N’abusez pas du format PNG et ne l’utilisez qu’en dernier recours. Privilégiez l’utilisation de « !important » aux notations bidons telles que « _width: » ou encore « %padding: ». Les hacks CSS c’est taboo, on en viendra tous à bout.

On peut avoir plusieurs interprétations d’une mise en page et toutes sont contestables. Chacun peut avoir son idée sur la question mais la démarche de conception du document XHTML de manière sémantique est déjà une grande étape. Le travail d’intégration n’est pas un simple collage du travail graphique mais une interprétation sémantique de la maquette graphique.

Comme le dit si bien Molly E. Holzschlag :

Dans le balisage, la sémantique traite du sens d’un élément et de la manière dont celui-ci est décrit dans son contenu.

Une fois cette réflexion effectuée, je me suis mis à la première mise en application de mon schéma de balises. J’ai construis mon document sans penser une seule fois à l’apparence qu’il pourra avoir ensuite. Je me suis contenté de reprendre les balises et de les organiser de manière logique. Cette méthode permettra à votre document d’avoir du sens avec ou sans style. La mise en forme graphique sera l’affaire des feuilles de style.

Voici un extrait du schéma adopté :

<h1>Ecole primaire et maternelle Notre Dame</h1>
<h2>Faches-Thumesnil</h2>
<ul>
	<li><a href="#">Accueil</a></li>
	<li><a href="#">A propos</a></li>
	<li><a href="#">Contact</a></li>
</ul>
 
<h3>Vivre ensemble</h3>
<p>A l’école Notre-Dame située à Faches-Thumesnil, <strong>l’épanouissement de votre enfant est pour nous un devoir.</strong><br />
Au cours de sa scolarité, l’enfant aura accès à de nombreuses activités favorisant ainsi son bien-être au sein de l’école.</p>

Vous aurez sans-doute remarqué l’ajout d’une balise H2 qui n’était pas présente sur la maquette. Elle servira uniquement de balise utile au référencement et qui sera masquée sur le document visible par l’utilisateur.

Il est important d’éviter de surcharger le document en balisage superflu uniquement pour satisfaire ses besoins graphiques. On peut souvent se passer de calques (div). La balise UL peut être également utilisable pour créer un fond autour des différentes puces. L’objectif est d’avoir un document HTML qui se charge rapidement. Sur cette maquette, j’ai pu obtenir une mise en page comptant 124 lignes de balises XHTML là où j’aurais pu en faire le double si j’avais multiplié les DIV. En clair, il faut éviter tout balisage superflu.

Pendant l’étape de mise en code, j’ai régulièrement passé mon code au validateur W3C, on est jamais à l’abri d’une petite erreur.

Une fois mon code XHTML établi, j’ai pu me lancer dans la création de la feuille de style. Je me suis efforcé de bien organiser les différentes parties du document. Ainsi les propriétés relatives au header, corps de page, footer sont regroupées afin d’améliorer la lecture de la feuille CSS. Je n’utilise jamais de hacks dans mes feuilles de style. Au pire des cas (et vraiment en dernier recours), j’insère une feuille supplémentaire avec un commentaire conditionnel dans la page. Je pars du principe que toute mise en page peut être réalisée sans bidouilles. Cette démarche pose toutefois quelques limitations : L’absence de pseudo-classe :focus, la mise à disposition de la pseudo-classe :hover avec des possibilités réduites, l’utilisation d’images au format PNG transparentes.

Ces limitations, je les dépasse souvent à l’aide de JavaScript. On me reprochera de ce fait d’alourdir la page en scripts supplémentaires pour palier aux limitations de certains navigateurs et je répondrais que l’utilisation de fichier *.htc pour ajouter le :hover ou le :focus est aussi du JavaScript injecté différemment. Je profiterais même de cette évocation du fichier .*htc pour préciser que l’utilisation de cette méthode dans les feuilles de style pour intégrer des PNG lisibles sous Internet Explorer est une aberration. Cette pratique non-valide W3C va à l’encontre du principe même de la feuille CSS qui est sensée appliquer un style au document et non pas destinée à lancer des fonctions JavaScripts.

Vers la fin de l’intégration de ma maquette, je me suis permis quelques petites « folies » JavaScript sur la page afin de la rendre plus animée. Il faut toutefois éviter de devenir gadget !

Au final, je suis parvenu à réaliser une mise en page lisible sur l’ensemble des navigateurs couramment utilisés tout en ayant un code propre et une feuille de style dépourvue de hacks en tout genre.

Vous pouvez visualiser l’intégration de la maquette en vous rendant sur cette page.

Concernant la lecture des pages. Il y a quelques soucis comme par exemple son interprétation d’inputs dans les formulaires mais aussi dans la gestion des tailles de bloc. Rappelons qu’IE7 avait fait d’énormes progrès sur ce terrain. J’ai constaté également des problèmes de marge (margin) sur certaines pages web qui habituellement s’affichent très bien sur les autres navigateurs courants. La page de démarrage msn parle d’elle-même Des propriétés CSS ne sont pas implantées dans cette version telles que :first-letter, :first-line ou encore letter-spacing. La propriété propriétaire (ça se dit ?) de Microsoft « Opacity » ne fonctionne pas non plus, un comble… Coté Javascript, Microsoft souhaite avec cette nouvelle mouture améliorer l’interprétation des scripts et pallier les lacunes mais concrètement, je n’ai pas pu constater les avancées sur cette béta.

Mais ne crions pas au loup trop vite, il ne s’agit que d’une version béta. Le meilleur reste à venir… ou le pire…

Le sujet

Il s’agit d’un site internet pour une école privée. L’objectif est de faire connaître l’établissement. Le site internet sera un moyen de communiquer avec les familles. Il devra faciliter la prise de contacts avec les parents. L’ergonomie est au centre de ce projet. Le site doit disposer d’une navigation simplifiée au maximum, l’ensemble des sections doit être correctement délimité. On retrouvera notamment une partie « actualité », des articles plus spécifiques sur les activités de l’école et un agenda.

Concernant les contraintes techniques, le site devra disposer d’un espace d’administration simple d’utilisation. Les personnes qui mettront à jour le site ne seront pas des informaticiens. Il faut leur simplifier la tâche. Le choix d’un gestionnaire de contenu (CMS) se révèle judicieux sur le plan technique. Il faudra toutefois veiller à ce que ce gestionnaire ne soit pas une « usine à gaz » et qu’il réponde à l’ensemble des besoins.

Premiers préparatifs

Avant de me lancer dans la création graphique, j’ai étudié plusieurs possibilités de mise en page. Sur une feuille de papier, j’ai essayé différents placements possibles. Cet étape permet de débuter sereinement l’agencement des différents blocs de contenu sur la future maquette. Cela nous donne aussi l’occasion de déterminer les éléments sur lesquels on souhaitera attirer l’attention du visiteur. Pour respecter les besoins de navigation aisée dans le site, je me suis basé sur un système de navigation des plus conventionnels.

Pour trouver l’inspiration, je me suis mis à flâner sur des sites internet en rapport avec le monde de l’enfance. Quel dommage d’ailleurs que la majorité de ces portails ne soient pas très jolis graphiquement… Mais cela permet de faire naître des idées pour les premières maquettes du site en question.

La création graphique

La maquette graphique du site internet doit mettre en valeur l’objet du site internet. Il faut avoir à l’esprit que cette maquette sera déclinée au format web (XHTML / CSS), il faut parfois calmer ses ardeur . Il faut également avoir une idée de l’orientation graphique. A défaut, plusieurs axes de communication pourront être proposés. Dans le cas présent, les éléments graphiques doivent évoquer le monde de l’enfance. Le site doit toutefois rester structuré dans sa forme. L’ambiance générale doit être colorée et agréable.

Dans un premier temps, j’ai réalisé dans Photoshop des objets propres au milieu scolaire. Ils ne seront pas tous intégrés mais pourront être réutilisés à l’occasion pour des mises à jour éventuelles. J’ai ainsi créé des fichiers psd (photoshop) de pinceaux, stylos, taille-crayon, tableau noir etc.…

Vient ensuite la maquette du site. Je débute l’agencement des différents blocs pour ensuite y intégrer les éléments décoratifs et les textes factices. J’ai pris pour habitude de travailler avec une grille pour respecter certaines règles de proportion (le nombre d’or). Pour le titre du site, je me suis inspiré de l’écriture à la craie des instituteurs sur les tableaux d’école. Le header très fourni intègre quelques-un des éléments que j’avais créé au préalable. J’ai choisi de ne pas créer de divisions explicites entre les blocs. Le travail sur les dégradés m’a permis de donner cet effet de séparation entre les éléments. Il s’agit de mon premier travail sur la maquette du site. Les couleurs sont très sobres. J’ai utilisé volontairement des blocs très rectilignes. La grille m’a permis de respecter les proportions de rigueur. Au final, la sobriété de la maquette n’était pas probante.

J’ai donc utilisé l’outil de Teinte/Saturation pour rechercher les teintes adéquates. J’ai noté certains codes couleurs qui me semblaient appropriés et retravaillé les blocs de contenu. Les couleurs ont gagné en vivacité. J’en ai également profité pour repenser le menu supérieur en y intégrant des post-it. J’ai effectué plusieurs tests pour évoquer le monde de l’enfance avec notamment le petit dessin bordant le titre du site.
Au final, l’ensemble manquait toujours d’impact. La vision de l’utilisateur resterais bloqué sur ce fameux header imposant. Il fallait mettre en valeur le contenu principal.

L’apparence de la seconde maquette manquait d’éléments de contraste. De ce fait, j’ai intégré un footer noir/gris afin de bien différencier la bannière supérieure, le contenu et le footer. J’ai redessiné le petit personnage. Je lui ai même présenté un nouveau petit camarade Cette troisième maquette m’a également permis de penser à la manière de présenter la page d’accueil. J’ai ajouté deux blocs très colorés pour y insérer les éléments communicatifs, c’est-à-dire les accroches. Le menu latéral a également été simplifié. C’est cette maquette qui servira de base pour l’intégration XHTML / CSS

(À suivre…)

En réponse à : Babylon Design (le trackback ne marche pas)

De part l’intéret grandissant pour cette librairie javascript, j’ai décidé de casser ma tirelire pour m’acheter le livre Premières applications Web 2.0 avec Ajax et PHP de Jean-Marie Defrance et paru aux éditions Eyrolles. Ce n’est pas un ouvrage qui traite véritablement de la bibliothèque jQuery mais il consacre tout de même deux grands chapitres qui permettent d’apprivoiser la bête. A lire donc de toute urgence

Pour en savoir plus :

• Le site officiel de jQuery
• Présentation des fonctions essentielles de jQuery

Il existe différentes versions du XHTML :

• XHTML 1.0 Strict : Il ne gère que le contenu du document et non l’affichage. C’est le type de document à privilégier.
• XHTML 1.0 Transitional : C’est la passerelle entre le HTML et le XHTML. Il permet l’utilisation de balises liées à l’affichage.
• XHTML 1.0 Frameset : C’est le seul type de document qui autorise les frames. Logiquement, un document accessible ne doit pas inclure d’éléments frame donc à éviter…
• XHTML 1.1 : C’est une évolution du XHTML 1.0 Strict avec quelques balises qui ont été implantés ou modifiés.

Lors de la construction d’un document XHTML, il est important d’avoir à l’esprit que ce n’est pas l’apparence du site qui engendre le balisage mais bien le contenu de ce document.

Pour l’élaboration d’un document type, nous prendrons le XHTML Strict 1.0 comme référence. Nous ne gérerons que le contenu. Exit les propriétés d’affichage tels que bgcolor, color ou encore size. Nous éviterons, de ce fait, de placer l’attribut (tout à fait valide) style= »" qui insère dans le document des propriétés CSS. Cela se fera dans une feuille de style externe. Le XHTML nécessite de se mettre en conformité avec certaines règles :

• Le XHTML impose l’utilisation d’attributs
  <input type= »checkbox » name= »_option-test » id= »option-test » value= »" checked> en HTML s’écrit en XHTML : <input type= »checkbox » name= »_option-test » id= »option-test » value= »" checked= »checked » />
• Toute balise ouverte doit être refermée
  Vous pourrez remarquer dans l’exemple ci-dessus le slash à la fin de la balise input.
• Les balises doivent être correctement imbriquées
  Un ordre hiérarchique des balises est défini. C’est l’ordre logique de lecture du document qui déterminera l’agencement des balises et non l’affichage que le site devra avoir à l’écran.
• Toute la syntaxe doit être rédigée en bas de casse
  Autrement dit, en minuscule.
• Les attributs obligatoires ne doivent pas être omis
  On citera notamment alt pour la balise img.
• Chaque attribut sera encadré de guillemets
  L’utilisation de double-quote est donc de rigueur conseillé pour chaque attribut de balise.

L’entête du document

L’entête de page permet au navigateur de connaître un certain nombre d’informations avant de charger le corps de page (le contenu). On y trouvera par exemple, le type d’encodage (UTF-8 ou ISO), le titre du document ou l’appel à des fichiers externes (feuilles de style, javascript). L’entête est introduit par la balise <head> qui est insérée juste après le balise <html>.

La première étape n’est pas indispensable. On indique au navigateur qu’il s’agit d’un document XML tout en renseignant dans l’attribut encoding, l’encodage des caractères (ici ISO) :

<?xml version="1.0" encoding="iso-8859-1"?>

Un problème se pose toutefois avec Internet Explorer. En effet, en affichant cette balise avant le doctype, le navigateur passe en quirks mode, c’est-à-dire en mode non-standard.

Le DOCTYPE est la seconde chose à spécifier dans le document XHTML. Il permet au navigateur de savoir à quel type de document il a à faire. Voici les DOCTYPEs XHTML qu’il est possible d’insérer :

XHTML 1.0 Strict

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.0 Strict

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Ensuite, il faut renseigner la balise <html> avec un namespace utilisant l’attribut xmlns. On prendra le soin de spécifier la langue du document dans les balises xml:lang= »la_langue » et lang= »la_langue ». Cette redondance est requise pour la validité du document et la compatibilité avec les différents navigateurs. Ces deux attributs ont la même fonction mais lang= »" permet en réalité d’être compris sur les anciens navigateur.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"></html>

Nous passons ensuite à l’entête du document par le biais de la balise <head>. Cette balise permettra de lier au document une ou plusieurs feuilles de styles, d’insérer des appels à des fichiers javascript. Mais auparavant, il faut définir l’encodage du document à l’aide d’une balise meta :

Pour de l’UTF-8 (Encodage international) :

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Pour de l’ISO (Encodage européen) :

<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />

Pour plus d’info sur la notion d’encodage, lisez l’article d’OpenWeb sur les jeux de caractères

On aura la possibilité d’ajouter différentes balises méta afin de permettre un meilleur référencement du document. En voici un exemple :

<meta name="DC.title" xml:lang="fr" content="Clearideaz.com, XHTML, CSS, Accessibilité, Marketing, Design web" />
<meta name="author" content="Gorzalka, Olivier" />
<meta name="description" content="Carnet web de Olivier Gorzalka" />

Comme vous pourrez le constatez, on utilise une balise meta avec dans l’attribut name DC. Il s’agit en fait d’un schéma de métadonnées générique préconisé par le W3C.

Nous pouvons maintenant définir le titre du document avec la balise <title>. Il faut qu’il soit explicite. Évitez de donner le même titre à toutes les pages de votre site. Pensez aux personnes non-voyantes (et pas seulement…) utilisant des lecteurs de d’écran et qui se repèrent grâce aux dénominations des différents articles. Le titre se présentera de la façon suivante :

<title>
     Clearideaz.com, XHTML, CSS, Accessibilité, Marketing, Design web
</title>

A la suite de ce <title>, on insère l’appel éventuel à une feuille de style. Il existe deux méthodes sensiblement équivalentes :

La méthode @import :

<!--
     @import url(/themes/clearideaz/style.css);
-->

La méthode link

<link rel="stylesheet" href="themes/clearideaz/style.css" type="text/css" media="screen" />

Il n’existe pas, en soit, de grandes différences entre ces deux méthodes. Nous signalerons tout de même que @import n’est pas reconnue par les navigateurs dinosaures tels que Netscape 4.

Le corps du document

Nous arrivons au corps du document via la balise <body>. C’est le contenu qui sera visible dans le navigateur internet. On s’efforcera de hiérarchiser au maximum les éléments textuels. Il est important de ne pas penser à l’apparence du site lorsque l’on procède au balisage du document. Il faut respecter l’ordre de lecture du contenu. Nous userons par exemple des différents niveaux de titre : <h1>, <h2>, <h3>, … Lorsqu’il s’agira d’une liste d’éléments, on utilisera les listes à puce :

<h1>Sciences de la vie</h1>
<p>Bienvenue sur le site "Sciences de la vie"</p>
<h2>Le monde animal</h2>
<p>Voici différents animaux :</p>
<ul>
     <li>Le chien</li>
     <li>Le singe</li>
     <li>Le tigre</li>
</ul>

Rappel : Chaque balise ouverte doit être obligatoirement refermée. Ainsi un paragraphe de texte commencera par <p> et se terminera par </p>. Les balises de retour à la ligne ne s’écrivent plus <br> comme ce fut le cas dans le HTML mais <br />. Idem pour <hr> qui devient <hr />.

Un document XHTML type n’organisera pas son contenu à l’aide de tableau. Pour une meilleure hiérarchisation, on utilisera les calques qui se traduisent par des balises <div>. Ces balises nous permettrons par la suite de styler le document à l’aide de la feuille CSS. Il est judicieux d’attribuer à chaque balise <div> un ID explicite qui permettra de les différencier lors de l’élaboration de la feuille de style :

<div id="page">
     <div id="entete">
     </div>
     <div id="conteneur">
     <ul id="menu-principal">
          <li>Rubrique 1</li>
          <li>Rubrique 2</li>
          <li>Rubrique 3</li>
     </ul>
     <div id="contenu">
     </div>
     </div>
     <div id="pied">
          <p>Créé par Moi :)</p>
     </div>
</div>

Évitez de multipliez les calques, cela facilitera la compréhension de votre balisage.

Enfin on ferme la balise <body> et <html> du document. Voici donc ce que l’on pourrait obtenir :

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta name="DC.title" xml:lang="fr" content="Weblog.fr, XHTML, CSS, Accessibilité, Marketing, Design web" />
     <meta name="author" content="Gorzalka, Olivier" />
     <meta name="description" content="Carnet web de Olivier Gorzalka" />
     <title>Weblog.fr, XHTML, CSS, Accessibilité, Marketing, Design web</title>
     <style type="text/css" media="screen">
          @import url(/themes/weblogr/style.css);
     </style>
</head>
<body>
     <div id="page">
          <div id="entete">
               <h1>Sciences de la vie</h1>
          </div>
          <div id="conteneur">
               <ul id="menu-principal">
                    <li>Rubrique 1</li>
                    <li>Rubrique 2</li>
                    <li>Rubrique 3</li>
               </ul>
               <div id="contenu">
                    <p>Bienvenue sur le site "Sciences de la vie"</p>
                    <h2>Le monde animal</h2>
                    <p>Voici différents animaux :</p>
                    <ul>
                         <li>Le chien</li>
                         <li>Le singe</li>
                         <li>Le tigre</li>
                    </ul>
               </div>
          </div>
          <div id="pied">
               <p>Créé par Moi :)</p>
          </div>
     </div>
</body>
</html>

La validation W3C

Une fois le document XHTML terminé, il faut passer le fichier HTML au validateur W3C. Le W3C est un consortium visant à promouvoir la compatibilité des technologies du Web et notamment le XHTML. En vérifiant la validité de la syntaxe de votre site, vous aurez la certitude que les différents documents XHTML respectent les standards du web. Si votre document contient des erreurs, le validateur vous les listera et il faudra bien évidemment les corriger

Les balises courantes

Il existe un grand nombre de balises XHTML qui permettent de rendre le document plus compréhensible. Je vous invite à visiter l’espace de Giminik qui recense l’ensemble des balises courantes du XHTML. Il existe deux grandes catégories de balises. Les inline (en-ligne) et les block (bloc). Les balises blocs permettent de structurer le document et peuvent contenir d’autres balises block ou inline. Les inline quant à eux attribue une sémantique spécifique à des mots d’une phrase et ne peut contenir que des éléments inline.

Les balises de type block

<div>
Elle donne la possibilité de structurer le contenu en différent blocs couramment appelés calques.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Ils définissent différents niveaux de titre (ex: <h2>Mon titre</h2>). Il est à noter que la balise <h1> ne peut être utilisée qu’une fois.

<hr />
Cette balise insère une ligne horizontale dans le document.

<p>
Cette balise identifie un élément comme paragraphe.

<ul>, <ol>, <li>
Elles intègrent des listes d’éléments au document. La balise <ul> insère une liste à puces tandis que <ol> dresse une liste ordonnée. Les différents éléments de la liste sont encadrés par la balise <li>.

Les balises de type inline

<a>
Elle insère un lien hypertexte sur le texte balisé. Elle peut aussi agir comme point d’ancrage dans le document.

<br />
Elle permet d’insérer un saut de ligne. A utiliser avec parcimonie…

<em>
Le texte est mis en emphase? On l’assimile souvent à tort avec la balise <i>.

<strong>
Elle permet de réalise une mise en emphase forte.

<span>
Elle donne la possibilité de mettre en forme du texte à l’aide de CSS.

<img />
Cette balise insère une image dans le document. Elle doit automatiquement intégrer un attribut alt= »".

<cite>
Elle défini un texte comme citation. L’équivalent en block est blockquote.

<abbr>
Elle donne la signification d’une abréviation. (ex: <abbr title= »Cascading Style Sheet »>CSS</abbr>).

<q>
Elle caractérise une courte citation.

Ce qu’il faut éviter

Voici quelques petites choses à éviter lors de la création de votre document XHTML.

• Abuser des retours à la ligne (<br />). Préférez l’utilisation de paragraphe (<p>)
• Multipliez les balises <div>. D’autres éléments peuvent être stylés à la manière de ces calques.
• Utiliser <img /> pour des illustrations. Cette balise ne doit être utilisée que si elle apporte un complément d’information au texte de l’article.
• Insérer du javascript dans le document. Tout le code JS doit être placé dans un fichier externe. C’est ce qu’on appelle le javascript non-intrusif.
• Nommer les ID ou les class des différents éléments en fonction de la couleur qu’ils auront dans le document. Pensez que votre site pourra évoluer et donc que les couleurs pourront changer. Nommer donc vos balises selon leur sens sémantique et non selon leur apparence.
• Insérer du style CSS dans le document avec style= »". La feuille de style est là pour ça, pourquoi surcharger votre document ?

Comme nous avons pu le constater, la création d’un document XHTML est soumise à un certain nombre de règle. A ces règles s’ajoutent ensuite les contraintes d’accessibilités. En respectant ces « normes », vous garantissez à votre site d’être lu par différents supports. Être lu par le plus grand nombre, c’est bien ça le principe du web

Pour aller plus loin

Quelques liens qui apporteront un complément à ce billet :

• Documentation du XHTML 1.0 par le W3C (traduction française)
• Rubrique XHTML du site OpenWeb