Quelle démarche suivre pour intégrer une maquette en page HTML/CSS ?

Voici une question posée sur le forum :

Je suis relativement débutant avec CSS, auparavant j'utilisais des tableaux, et je créais mon design avec photoshop, ensuite il ne me restait plus qu'à utiliser les tranches, d'arranger un peu le code en fonction de mes besoins, et le tour était joué.

Maintenant le css, je suis un peu perdu, et je n'aimerai pas perdre du temps à des "bidouillages", ma question est donc la suivante, quel est le meilleur moyen d'envisager un design CSS ?

J'allais répondre de manière assez détaillée, mais je me suis dit que la réponse pourrait servir à tous.

Un avertissement avant de commencer : il s'agit d'une analyse personnelle, qui reflète plus ma façon d'envisager l'intégration HTML/CSS qu'une quelconque règle ou « bonne manière de faire ». Le descriptif que je donne ci-dessous comporte de plus de nombreux raccourcis.

Découpage ou construction

On pourrait résumer le design avec les tableaux de mise en forme de la façon suivante :

Design avec tableaux de mise en forme : on part du design, et on le découpe en tableaux. Lorsqu'on travaille avec un logiciel comme ImageReady, on fait une découpe du design en une grille dessinée par les tranches, et le logiciel convertit tout ça en tableau.

Les habitués du design avec les CSS savent qu'il diffère radicalement de cette approche du « découpage ». Pour ma part, je le résumerais ainsi :

Design avec les CSS : on part du contenu, et on construit le design. On définit des zones (ou blocs) de contenu, on les positionne en CSS, et on « habille » ces blocs, avec des bordures, retraits internes (padding), images de fond, etc. Puis on met en forme le texte.

(Pour le dernier point, la mise en forme du texte, rien n'interdit de s'en occuper plus tôt, avant même de positionner les différents blocs. À chacun de voir ce qu'il préfère.)

Nous pourrions nous arrêter là, en n'ayant donné qu'un aperçu très synthétique de l'intégration HTML avec les CSS. Ou bien on pourrait aller plus loin, et tenter de développer tout ça, étape par étape. Si vous le voulez bien, prenons cette deuxième option.

Les grandes lignes de l'intégration HTML avec les CSS

1. Partir du contenu

Toute personne qui a lu ou suivi un cours sur les CSS a entendu parler du principe suivant : la séparation du contenu (HTML) et de la forme (CSS). Concrètement, cela signifie que les feuilles de style CSS vont nous permettre de réaliser un design complexe, sans que l'on soit obligé d'intervenir dans le code HTML^[1]. Du coup, cela permet de conserver un code HTML sans élément ou attribut de mise en forme, c'est à dire un code HTML qui ne reprend que le contenu.

Si nous avons d'un côté le contenu (page HTML), et de l'autre la mise en forme (feuille de style CSS), par quoi allons-nous commencer ? Par le contenu, bien sûr. Nous aurions beaucoup de mal à appliquer une feuille de style sur du vide !
Le problème que rencontrent certains intégrateurs HTML, c'est qu'au moment de réaliser un gabarit HTML/CSS, on n'aura le plus souvent qu'une maquette sous la forme d'une image (formats PSD, XCF, Tiff, SVG... voire en JPEG). En dégager un « contenu » n'est pas toujours évident. Mais on pourra toutefois tenter de dégager la structure principale de la page.

On commence donc par réaliser une page HTML, en éditant directement le code HTML, en mode code avec Dreamweaver, ou avec un éditeur de code^[2]. Cette page HTML reprendra les différents contenus de notre page-type : en-tête (s'il y en a un), un menu de navigation, une zone principale de contenu (s'il y en a une distincte), un pied de page (s'il y en a un), etc. Les contenus dans le code HTML seront de préférence placés dans un ordre logique, qui rend la compréhension de la page facile, ou du moins possible, lors d'une lecture linéaire.

Attention : veiller à ce que la syntaxe HTML utilisée pour cette page soit valide, ce qu'on pourra vérifier avec le validateur HTML du W3C, par exemple. En particulier, c'est une erreur fréquente, ne pas oublier le Doctype que l'on doit trouver au tout début du code HTML. (Qu'est-ce qu'un Doctype et comment choisir le bon ?)

On pensera aussi à bien baliser le contenu, en utilisant les éléments de base que sont p (pour les paragraphes et plus généralement tous les textes simples), les listes ul et ol^[3], et surtout les titres de section h1, h2, h3, voire h4^[4], sans tenir compte de leur aspect par défaut dans les navigateurs^[5].

2. Définir les blocs de contenu

Pour pouvoir positionner et mettre en forme des blocs de contenu, il faut regrouper les contenus en blocs dans le code HTML. On utilisera généralement pour ça l'élément div (conteneur neutre), couplé à l'attribut id qui nous permettra de donner un style CSS spécifique à chaque bloc.

Un exemple de structure simple :

<body>
<div id="page">
	<div id="header">...</div>
	<div id="menu>...</div>
	<div id="content">...</div>
	<div id="footer">...</div>
<div><!-- fin de div#page -->
</body>

Note : le <div id="page">...</div> n'est pas indispensable, mais pour beaucoup de designs il sera très utile. On lui passera beaucoup de styles que l'on pourrait théoriquement passer à l'élément body, mais à cause des restrictions de certains navigateurs il vaut mieux travailler avec un élément distinct de body.

3. Positionner les différents blocs

Là, pas de miracle : il faut avoir une bonne connaissance du positionnement CSS pour s'y retrouver. On peut lire une introduction au positionnement CSS sur Alsacréations, ou bien cette série d'articles sur Openweb :

1. flux et position relative
2. position float
3. position absolue et fixe

On aura peut-être également besoin de jouer sur les dimensions des blocs, avec les propriétés CSS width et height. Mais contrairement à ce que croit le néophyte, on ne les utilise finalement que ponctuellement, la largeur pouvant être déduite de la largeur du bloc parent, et la hauteur pouvant être donnée par la hauteur du contenu.

4. Habiller les blocs

Pour un site très graphique, on risque de beaucoup utiliser la propriété CSS background. Pour avoir un peu de latitude dans la mise en forme, il est nécessaire de connaitre les différentes possibilités de gestion des images de fond, en particulier les propriétés CSS background-repeat et background-position. Et bien sûr : background-color et background-image.

Attention : certains contenus graphiques sont porteurs d'information (information symbolique ou textuelle, pour un logo, un titre ou un menu de navigation mis en images, un pictogramme, etc.) et devraient donc faire partie du contenu de la page, pas de sa mise en forme. On placera donc ces images dans le code HTML, comme dans l'exemple suivant :

<h1><img src="nom-du-site.png" alt="Mon super site" /></h1>

Pensez aussi à jouer sur les propriétés CSS padding (retraits internes), et margin (marges externes), et parfois également sur border (bordures), afin de gérer les blancs de respiration et l'espacement des blocs. Attention toutefois : ces propriétés peuvent influer sur le dimensionnement et le positionnement des blocs. Il convient d'avoir une bonne connaissance du modèle de boite CSS, dont on trouvera une explication ici : CSS - Modèle de boîte.

5. Mettre en forme le texte

La mise en forme du texte passe par toute une série de propriétés qu'il serait un peu long de lister ici. On pourra se reporter à la documentation CSS.

Lorsque vous gérez la taille du texte avec la propriété CSS font-size, pensez à laisser à l'utilisateur la possibilité d'agrandir la taille des polices^[6]. Pour cela, vous pouvez gérer la taille du texte avec l'unité EM, par exemple.

Conclusion

Il y aurait encore beaucoup à dire, et sans doute beaucoup à corriger, sur le thème du meilleur moyen d'envisager un design CSS. Mais cela demanderait presque un livre... comme celui-ci, par exemple^[7].

Quoi qu'il en soit, il peut être difficile pour les débutants de réaliser correctement un design HTML/CSS complet du premier coup, surtout s'il est ambitieux. De même, les habitués du design en tableaux auront sans doute du mal à se défaire d'un seul coup des réflexes obsolètes (la manie du découpage, par exemple ;)). Voilà pourquoi il est préférable de se familiariser avec la conception CSS en partant de choses simples, avant de s'attaquer à plus ardu. Faites des essais, des mini-sites fictifs et sans enjeu particulier. Et si vous ne savez pas quoi faire pour vous entrainer, pourquoi ne pas suivre l'un de ces deux tutoriels (voire les deux) :

• Réalisation d'un design complet (XHTML / CSS) en 5 étapes
• Design XHTML/CSS complet avec 2 colonnes de même hauteur

En espérant que ce rapide survol vous aura été utile, il ne me reste plus qu'à vous souhaiter une bonne continuation.

--
Florent V.