Largeur fixe vs largeur dynamique

J'ai remarqué que de plus en plus de sites ont opté pour une mise en page à largeur fixe, où le redimensionnement de la fenêtre du navigateur fait simplement apparaître des barres de défilement, par opposition à une mise en page flexible, où le redimensionnement du navigateur fait que les composants de la page "scrunch" ensemble .
Les sites StackExchange comme celui-ci sont un exemple de mise en page fixe. GMail et iGoogle sont des exemples de mise en page flexible. Quelles sont les raisons de choisir l'un plutôt que l'autre?

Des conceptions plus complexes peuvent être très difficiles à réaliser avec une disposition à largeur variable. J'imagine donc que cela joue un rôle.

Il y a aussi le fait qu'il n'est pas confortable de lire un texte très large. La taille des colonnes sur les sites StackExchange est assez gérable et facile à lire. Avec une disposition à largeur variable, vous ne pouvez pas simplement étendre le corps du texte principal sans qu'il devienne illisible. Même Google limite la largeur de leurs résultats de recherche.

Bien sûr, si vous avez un site où l'espace est limité (comme Google Docs et Google Maps), vous voulez vraiment utiliser un schéma à largeur variable pour utiliser tout l'espace disponible.

Corrigé avec est beaucoup plus facile à développer pour les sites complexes. De plus, la plupart des sites à largeur fixe auront une largeur d'environ 1 000 pixels. La raison en est que seulement 1% des navigateurs utilisent 800x640 et 0% utilisent 640x480. Consultez les statistiques les plus récentes ici . Cela n'inclut pas le mobile cependant. Ce qui est un jeu de balle entièrement différent.

La valeur de la mise en page à largeur variable est qu'elle permet aux utilisateurs d'utiliser facilement le site Web dans une fenêtre qui n'est pas maximisée.

Vous devez regarder votre public et décider en fonction de l'expérience que vous pensez qu'il souhaite et si la largeur variable est plus importante que d'autres fonctionnalités que vous ne pourrez pas développer si vous devez faire de la largeur variable.

Il existe également un compromis entre les deux, où vous définissez une largeur minimale et une largeur maximale (à l'aide de CSS), puis utilisez des largeurs en pourcentage pour faire en sorte que le reste s'écoule entre les deux extrêmes. Par exemple, vous souhaiterez peut-être qu'une colonne de menu de gauche ne soit pas plus étroite que 200 pixels mais que le contenu principal circule. Cette technique permet à votre site de s'adapter à la résolution des visiteurs, sans avoir l'air stupide de résolutions extrêmement élevées ou de résolutions extrêmement basses. Le HTML, après tout, a été conçu pour couler - c'est un langage de balisage et pas le même que l'impression.

Cette approche fonctionne bien pour les conceptions relativement simples, comme les blogs ou ceux qui présentent beaucoup d'informations textuelles. En effet, je l'utilise sur mon propre site internet personnel . Après tout, beaucoup de gens ont maintenant des moniteurs à écran large ou à haute résolution - mon moniteur de travail a une largeur de 1680 pixels - alors pourquoi devraient-ils perdre un grand nombre de biens immobiliers et doivent faire défiler horizontalement simplement parce qu'un concepteur a décidé d'une largeur fixe qui convenait à leur écran? En fin de compte, une bonne conception consiste à offrir aux utilisateurs la meilleure expérience possible - il ne s'agit pas seulement de ce qui semble "joli" sur le moniteur du concepteur.

Vous n'aurez peut-être pas à faire ce choix. A List Apart a un excellent article sur le Responsive Design . L'idée principale est que vous pouvez utiliser des requêtes multimédias pour intercepter les modifications dans la fenêtre du navigateur ou la taille de la fenêtre d'affichage et réaffecter CSS si nécessaire. Il y a beaucoup à lire, alors consultez l'article pour tous les détails juteux. Mais pour le long et le court (ou devrait-ce être le "large et étroit" de celui-ci?) Regardez les pages avant et après de leur exemple. La page avant évolue bien jusqu'à un certain point, mais si vous la rendez suffisamment étroite, elle devient un peu maladroite. L' après la page évolue également, mais change également la disposition lorsque vous la rendez trop étroite pour que la mise à l'échelle fonctionne correctement.

Selon les 113 lignes directrices de conception de Jakob Nielsen pour la convivialité de la page d'accueil :

67 Utilisez une disposition liquide pour que la taille de la page d'accueil s'adapte à différentes résolutions d'écran.

C'est également l'une des dix directives de conception de page d'accueil les plus violées :

La lutte contre les dispositions figées semble une bataille perdue, mais cela vaut la peine d'être répété: différents utilisateurs ont des tailles d'écran différentes. Les personnes disposant de grands moniteurs souhaitent pouvoir redimensionner leur navigateur pour afficher simultanément plusieurs fenêtres. Vous ne pouvez pas supposer que la largeur de la fenêtre de chacun est de 800 pixels: c'est trop pour certains utilisateurs et trop peu pour d'autres.

Et une confusion? Cela affiche la # section de contenu dans une largeur fixe (70em) s'il y a assez de place - sinon la section est réduite à 80% de la fenêtre du port de visualisation / navigateur.

#content {
    margin: 0 auto 2em 0;
    width: 70em;
    max-width: 80%; }

L'avantage d'une disposition dynamique est qu'elle fonctionne sur toutes les tailles d'écran, y compris les appareils mobiles. Il est cependant plus difficile de rendre les choses bien à toutes ces tailles. La question à se poser est la suivante: vos visiteurs vont-ils utiliser des appareils mobiles?