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?
la source
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.
la source
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.
la source
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.
la source
Selon les 113 lignes directrices de conception de Jakob Nielsen pour la convivialité de la page d'accueil :
C'est également l'une des dix directives de conception de page d'accueil les plus violées :
la source
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.
la source
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?
la source