En liquide, s'il vous plaît...

Largeurs fixes

Jusqu'à il y a quelques mois, j'avais toujours travaillé en largeur fixe pour les sites que je créais.

La méthode avait ses avantages

• Rapidité de mise en oeuvre graphique
• Facilité du débuggage sous IE
• Accessibilité et rendu sur les résolutions obsolètes (taille écran < 1024)

Et ses inconvénients

• Aspect globalement figé et rigide
• Espace perdu à l'affichage sur les grandes résolutions (taille écran > 1024)

Captures écran d'un site en largeur fixe suivant les résolutions

Pour ce type de site, on fixe la largeur de l'espace d'affichage en prenant en compte la largeur minimale des écran des visiteurs (dans l'exemple ci-dessus : 800x600) ce qui permet ensuite de positionner efficacement tous les éléments (largeur des illustrations, des menus, tailles de marges...).

Le passage en largeurs variables

Ne pas fixer la largeur de l'espace d'affichage nécessite de penser différemment le design de la page.

Les avantages

• Plus d'espace perdu sur la page
• Conséquemment, plus d'information par page
• Un design qui semble plus souple (disparition de l'"effet colonne" en haute résolution)

Les inconvénients

D'une part, on ne connaît pas à l'avance avec quelle résolution il sera vu. Or le « visage » du site sera considérablement différent suivant cette résolution :

D'autre part, du point de vue de la mise en oeuvre graphique, il est bien difficile de penser un graphisme dont la largeur peut varier de 1/1 à 1,6/1 pour les résolutions les plus courantes...

• Tous les graphismes de fond de page (matérialisation des colonnes, notamment) doivent être pensés pour être extensibles jusqu'aux grandes résolutions.
• Le moindre bouton graphique pose problème : trop petit, il paraîtra perdu dans sa colonne (cas d'un bouton de menu, par exemple) ; trop grand, à l'inverse, il ne pourra pas être intégralement affiché aux basses résolutions.
• De même, la largeur des textes —  dont on sait que trop importante, elle nuit à la lisibilité et trop faible, elle rend le texte informe — est difficile à définir efficacement.
• Plus d'espace signifie aussi qu'il faut davantage de contenu pour ne pas créer des pages qui semblent vides lorsqu'elle sont vues en 1280x1024

Toute l'astuce consiste à penser chaque élément de la page en prenant en compte à la fois les basses et les hautes résolutions d'écran tout en usant d'ingéniosité pour placer des élements graphiques qui ne soient pas défigurés par des dimensions trop faibles ou ridicules dans les résolutions hautes.

Croyez-moi ou non : l'exercice n'est pas aussi simple qu'il pourrait le sembler.