Eclaircissons déjà un point : bien que ces termes ne recouvrent pas tout à fait la même chose, vous entendrez souvent évoquer thème, layout ou design, voire template pour désigner la mise en forme graphique d'un site ou d'un blog. Les utilisateurs de DotClear emploient le plus souvent le mot thème.

Selon leur comportement en fonction de la taille de la fenêtre et/ou des caractères on les dira fixes, fluides ou élastiques.

Fixe

La dimension des blocs est donnée en valeur en pixels. Quels que soient la taille des caractères ou de la fenêtre, cette dimension est intangible. Le thème DotParking en est un exemple. La page mesure 750 pixels en toutes circonstances.

Fluide

La largeur générale de la page s'adapte à la taille de la fenêtre. L'option choisie par son créateur peut-être d'en faire varier tous les éléments ou seulement l'un d'entre eux. Les dimensions sont alors données en pourcentage. Ainsi en est-il de l'ancien thème par défaut. Quelle que soit la taille de la fenêtre, la page en occupe toute la largeur. Dans ce thème, c'est la partie des billets qui varie en fonction de la largeur disponible.

Elastique

Ici, toutes les dimensions sont proportionnelles à la taille des caractères. Les dimensions données en em[1] permettent un redimensionnement de la page en fonction de la taille des caractères. Vous pouvez en voir un exemple avec le thème DaClear.

Testez ces différences

Affichez grâce aux liens ci-dessus ces différents types de mise en page et redimensionnez votre fenêtre et/ou la taille des caractères. Là... c'est plus clair maintenant ?

Pour aller plus loin

J'ai volontairement simplifié mes explications. Si le sujet vous intéresse, vous lirez avec profit chez Pompage : Du stretching pour vos sites et chez Alsacréations : Un design fluide.

Notes

[1] 1 em correspondant à la taille que vous avez choisie dans les préférences de votre navigateur pour l'affichage des caractères. Le plus souvent, cette dimension est réglée à 14px par défaut.