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.