Largeur fixe vs largeur dynamique
J'ai remarqué que de plus en plus de sites ont opté pour une disposition à largeur fixe, où le redimensionnement de la fenêtre du navigateur ne fait qu'apparaître des barres de défilement, par opposition à une disposition flexible, dans laquelle le redimensionnement du navigateur provoque le "masquage" des composants de la page. .
Les sites StackExchange comme celui-ci sont un exemple de la mise en page fixe. GMail et iGoogle sont des exemples de la mise en page flexible. Quelles sont les raisons pour choisir l'un sur l'autre?
Des conceptions plus complexes peuvent être très difficiles à réaliser avec une disposition de largeur variable. Donc, j'imagine 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 de la colonne sur les sites StackExchange est assez facile à gérer et à 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 de largeur variable pour utiliser tout l'espace disponible.
Fixé avec est beaucoup plus facile au développeur pour les sites complexes. En outre, la plupart des sites de largeur fixe auront une largeur d'environ 1000 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 totalement différent.
La mise en page à largeur variable présente l’avantage de permettre aux utilisateurs d’utiliser facilement le site Web dans une fenêtre non agrandie.
Vous devez regarder votre public et décider en fonction de l'expérience que vous croyez vouloir 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 que le reste s'écoule entre les deux extrêmes. Par exemple, vous pouvez souhaiter qu'une colonne de menu de gauche ne soit pas plus étroite que 200 pixels, mais que le contenu principal soit transmis. Cette technique permet à votre site de s’adapter à la résolution des visiteurs, sans regarder de manière idiote les résolutions extrêmement élevées ou extrêmement basses. Le HTML, après tout, a été conçu pour s’écouler - c’est un langage de balisage et non le même que l’impression.
Cette approche fonctionne bien pour les conceptions relativement simples, telles que les blogs ou celles qui présentent beaucoup d'informations textuelles. En effet, je l’utilise moi-même site personnel . Après tout, de nombreuses personnes disposent désormais de moniteurs à écran large ou haute résolution (mon moniteur de travail mesure 1680 pixels de large), alors pourquoi devraient-ils perdre beaucoup d’immobilier et avoir à faire défiler horizontalement tout simplement parce qu’un concepteur a choisi une largeur fixe qui convient à leur écran? En fin de compte, un bon design consiste à offrir aux utilisateurs la meilleure expérience possible - il ne s'agit pas uniquement de ce qui est "joli" sur l'écran du designer.
Selon Jakob Nielsen113 Directives de conception pour la convivialité de la page d'accueil :
67 Utilisez une présentation liquide pour que la taille de la page d'accueil s'adapte aux différentes résolutions d'écran.
C'est également l'une des Les dix directives de conception de page d'accueil les plus violées :
Combattre des mises en page gelées semble être une bataille perdue, mais il convient de le répéter: différents utilisateurs ont des tailles de moniteur différentes. Les personnes disposant de grands écrans souhaitent pouvoir redimensionner leur navigateur pour afficher plusieurs fenêtres simultanément. Vous ne pouvez pas supposer que la largeur de la fenêtre de tout le monde est de 800 pixels: c'est trop pour certains utilisateurs et pas assez pour d'autres.
Vous n'avez peut-être pas à faire ce choix. A List Apart a un excellent article sur Responsive Design . L'idée principale est que vous pouvez utiliser requêtes avec les médias pour détecter les modifications dans la fenêtre du navigateur ou la taille de la fenêtre d'affichage et réaffecter les CSS si nécessaire. Il y a beaucoup de choses à lire là-bas, alors consultez l'article pour tous les détails juteux. Mais pour le long et le court de celui-ci (ou devrait-il en être le "large et étroit"?), Regardez les pages before et after de leur exemple. La page avant évolue bien jusqu'à un certain point, mais si vous la réduisez suffisamment, elle devient un peu maladroite. La page après est également mise à l'échelle, mais change également de présentation lorsque vous la rendez trop étroite pour que la mise à l'échelle fonctionne correctement.
Qu'en est-il d'une confusion? Ceci affiche la section # content dans une largeur fixe (70em) s'il y a suffisamment 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 mise en page 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 plus belles à toutes ces tailles. La question à poser est la suivante: vos visiteurs utiliseront-ils des appareils mobiles?