Montage de design fixe, fluide ou élastique ?
C'est la question que tout monteur de page web doit se poser avant même d'écrire la première ligne de code. Autrement dit:
De quelle manière mon montage doit-il réagir aux différentes configurations du navigateur de l'utilisateur ?
On recense 3 catégories bien distinctes de type de montage:
- le montage fixe
- le montage fluide
- le montage élastique
Présentations des différents types de montage
Le montage fixe
On fixe une largeur en pixel que le contenu du site occupera quelque soit la résolution d'écran du visiteur. On fixe cette largeur en fonction de la résolution minimale sur laquelle on souhaite que l'affichage se fasse sans scroll-barre horizontale.
En général on prend environ 760px de large afin que cela convienne pour une résolution de 800 pixels de large x 600 pixels de haut. Avec une très nette majorité d'internautes surfant actuellement en 1024x768 certains webmaster ont tendance à augmenter cette largeur à 900 voir 1000 pixels.
Les points positifs
- le design présentera de la même manière quelle que soit la résolution du visiteur
- le montage de la page est plus facile à mettre en oeuvre puisque l'on peut tabler sur des largeurs fixes pour le graphisme
- Le texte est agréable à lire vu une longueur de ligne maitrisée
Les points négatifs
- Une scroll-barre apparait sur les résolutions inférieures à la largeur choisie pour le design
- On a une impression de place gâchée sur une haute résolution
- Lors d'un agrandissement de police ce "gâchis" devient vraiment effectif
Le montage fluide, liquide ou encore extensible
On définit des dimensions horizontales en % afin que le site s'adapte à la place qu'il a à disposition.
Parfois on a une largeur fixe pour le menu et seul le contenu est extensible.
Les points positifs
- le site est agréable à consulter, sans scroll-barre, sur les petites résolutions.
- Le site peut s'étendre pour une plus haute résolution.
- Lors d'un agrandissement de police il est particulièrement appréciable que le site puisse occuper tous l'espace
Les points négatifs
- Un texte peut devenir pénible à lire s'il s'étend sur une trop longue largeur
- Le montage du design (les effets graphiques et décoratifs) peut s'avérer plus complexe et plus lourd
- On peut avoir des incohérence graphiques, une présentation pas très esthétique suivant les résolutions.
Le montage élastique
Les dimensions sont définies en fonction de la taille de la police. Le design s'étend donc avec un agrandissement de caractères.
Les points positifs
- Le texte est agréable à lire car il n'est jamais étendu sur une trop grande largeur
- Le site supporte bien l'agrandissement de police et garde sa cohérence jusqu'à un certain point
Les points négatifs
- Le montage du design (les effets graphiques et décoratifs) peut s'avérer plus complexe et plus lourd
- On a l'apparition d'une scroll-bare horizontale suivant le ratio taille de la police/résolution d'écran du visiteur
Quel type de montage choisir ?
Cette une question largement débattue, chacun de ces montages ayant leurs adeptes inconditionnels.
- Ceux qui militent pour le fixe mettent en avant l'assurance que le site présente toujours bien quel que soit la configuration du visiteur. De plus la simplicité du montage permet d'avoir des effets graphiques plus complexes.
- Les disciples du fluide prônent une adaptation du site au visiteur et non l'inverse. Le visiteurs doit pourvoir bénéficier de la totalité de la surface à disposition s'il le souhaite.
- Enfin les adeptes de l'élastique mettent en avant un terme essentiel des nouvelles normes du web: l'accessibilité. Les personnes ayant des soucis de vue peuvent consulter agréablement le site avec une police plus grande que prévue.
Y en a-t-il un meilleur que les autres ?
Le choix va dépendre principalement des priorités personnelles et de la complexité du design à mettre en oeuvre.
Un design graphiquement complexe peut vite devenir une vraie prise de tête, voir irréalisable en fluide ou élastique, le fixe s'imposera donc comme une évidence.
Le fluide ne me convainc pas, parce que je suis d'avis que notre mission est de servir un site agréable à consulter par le visiteur, sans manœuvres de sa part. Hors, un texte qui s'étend indéfiniment sur les haute résolution nuit clairement au confort de lecture. Il est inacceptable pour moi que le visiteur ait à réduire la largeur de sa fenêtre pour lire sans fatigue. De plus, avec la fonction zoom déplorable d'IE7, on voit apparaitre la très désagréable scrollbarre horizontale dès un zoom aussi petit soit-il.
L'élastique ne me convainc pas non plus car il impose des barres de navigations horizontales chez les personnes qui nécessitent un agrandissement de caractères mais qui ont une faible résolution.
Si la mise en oeuvre du graphisme ne pose pas plus de problème, je suis personnellement pour la réalisation d'un design que j'appellerais volontiers "fluistique". En gros un design qui prendrait les avantages des 2 montages.
mi-fluide, mi-élastique, le fluistique
Depuis que j'ai découvert ce type de montage sur le site http://www.456bereastreet.com je suis acquise à son utilisation vu son efficacité.
Le principe consiste à utiliser des largeurs en % mais en fixant un max-width en em. De cette manière le site s'élargit avec l'agrandissement de la police si la résolution d'écran le permet, mais la scrolbarre horizontale ne s'impose jamais.
J'imagine que si ce type de montage est encore si peu utilisé c'est à cause de IE6 qui ne supporte pas le max-width. celui-ci peut néanmoins être émuler assez facilement avec du javascript, le site présentant en élastique simple si javascript est désactivé.
Restrictions
Comme évoqué ci-dessus, le max-width n'est pas supporté nativement par IE6 encore largement utilisé au moment où j'écris cet article.
Ce type de montage demande un bonne maitrise des positionnements css si l'on veut mettre en œuvre certains aspects graphiques. Le montage peut s'avérer complexe pour qu'il s'étende et se rétracte correctement.
Editer