juil

8

Mise en page fluide

Catégorie: Ergonomie, Webmastering | 2 commentaires | 836 lectures

Pendant de longues années, j'ai travaillé avec une largeur maximale de 700 pixels. Avec cette taille, le site s'adapte parfaitement aux résolutions 800*600 et supérieures. Aujourd'hui, la grosse majorité des surfeurs ont un écran calé dans une résolution de 1024*768. J'ai donc élargi la boîte générale à 850 pixels pour des sites à fort contenu. Dans ces circonstances, j'assure un confort optimal à partir de 1024*768.

Pour minimiser les problèmes de mise en page selon les résolutions, j'ai pris parti pour une mise en page figée. Cela m'évite bien des catastrophes où le texte est mis n'importe comment, l'image est boiteuse, le fond est répété maladroitement...

Nielsen encourage les mises en page fluide. Sur son site, il fait appel à deux dispositions. L'une est positionnée à 50 em ce qui donne une largeur de texte de 800 pixels. L'autre est totalement fluide et varie suivant la résolution d'écran (dans l'exemple plus de 1000 pixels).

Mise en page fluide

Occuper toute la place horizontale de l'écran donne un total de 120 caractères par ligne dans une résolution de 1024*768. Pour avoir fait des tests, je sais que le confort de lisibilité devient difficile au-dessus de 550 pixels de long. Ici les lignes font pratiquement le double. L'œil doit faire un exercice considérable pour revenir au début et retrouver la suite de la phrase.

Certains se lancent dans une mise en page élastique car elle permet de s'adapter au plus grand comme au plus petit. On pense alors aux petits écrans des téléphones mobiles. Sauf qu'il ne faut pas rêver; un site web professionnel avec une structure et un design ne peut pas faire le grand écart sans conséquences. Tout simplement parce que le ratio entre l'écran du portable est 30 fois plus petit que celui d'un ordinateur. Il faut raison garder.


Commentaires

2 Responses to “Mise en page fluide”

  1. Yvess on juillet 9th, 2007 22 h 24 min

    Sauf à insérer une 3ème colonne, je ne vois pas trop l'intérêt d'élargir les sites. Cela diminue comme tu le dis la lisibilité.
    A part ça, j'aime beaucoup ta nouvelle maquette. As tu fait des tests avec un interlignage un peu plus grand ?

  2. Morgan on juillet 9th, 2007 22 h 27 min

    La maquette est un template tout fait.

    Pour l'interlignage, je le trouve parfait comme ça.