Pour les sites Web, est-il préférable d'avoir une disposition à largeur variable ou une disposition à largeur fixe?
En raison des différentes résolutions d'écran, l'expérience de navigation d'un utilisateur sur un site Web peut être différente. Est-il préférable de disposer le site Web avec une largeur fixe? (et dans l'affirmative, devrait-il y avoir des largeurs statiques différentes pour les résolutions standard?) Ou un site Web doit-il toujours être disposé en largeur variable?
Je ne pense pas qu'il y ait de réponse facile ici, car, en fin de compte, cela dépend de ce que vous construisez et pour qui vous le construisez. Les sites à largeur fixe et les sites à largeur variable ont leurs avantages et leurs inconvénients.
Une chose que je dois souligner ici, je ne parlerai pas des expériences mobiles pour les sites fixes/fluides, car les sites mobiles sont meilleurs lorsque la conception est spécifique aux appareils mobiles, pas un port d'un site de bureau vers une plate-forme mobile.
Largeur fixe - Avantages
Un site à largeur fixe est une expérience plus cohérente et est plus rapide à développer qu'un site à largeur variable. Il permet également au concepteur d'avoir plus de contrôle sur la présentation, car vous pouvez définir des valeurs fermes pour les largeurs, les longueurs de ligne, les tailles de typographie, etc. Il est également plus facile à gérer qu'un site à largeur variable.
Largeur fixe - Inconvénients
D'un autre côté, les conceptions à largeur fixe commencent à échouer lorsque des cas Edge apparaissent. À l'heure actuelle, il est très courant pour les gens de concevoir des sites pour un moniteur de résolution de largeur 1024px, mais il y a encore des gens avec des machines de résolution inférieure. En ce moment, je travaille sur une application qui a été conçue en utilisant une grille 960px; J'ai jeté un coup d'œil à l'analyse aujourd'hui et j'ai remarqué que 3% des utilisateurs étaient sur des moniteurs 800 x 600, et environ 5% au total étaient à des résolutions inférieures à 1024 x 768. Ces utilisateurs ont probablement une très mauvaise expérience car le site est de largeur fixe .
Largeur du fluide - Avantages
La largeur du fluide permet à la conception de s'étendre en fonction des paramètres de l'utilisateur; le design s'adapte à eux, ce qui est une bonne chose. Cela permet au site de maintenir un espace négatif proportionnel, de sorte que le site ne se sent jamais trop encombré ou trop ouvert (sauf s'il a été spécifiquement conçu de cette façon).
Largeur du fluide - Inconvénients
Malheureusement, les conceptions de largeur de fluide ne sont pas imperméables aux cas Edge non plus. Lorsque les largeurs deviennent trop maigres ou trop larges, de mauvaises choses peuvent se produire, en particulier avec du texte. Les longueurs de ligne trop courtes ou trop longues sont essentiellement illisibles. En outre, de nombreuses formes de supports, telles que des images ou des objets Flash, sont difficiles à mettre à l'échelle dans les conceptions à largeur de fluide; IE nécessite javascript pour redimensionner les images, sinon elles sont pixellisées.
Site Web adaptatif
Quelques personnes ont montré des exemples, mais ne se sont pas encore référés à cette technique par leur nom. Ethan Marcotte a récemment inventé le terme pour décrire des dispositions fluides qui peuvent changer complètement en fonction de la résolution d'écran d'un utilisateur (voir les détails ici ). Il s'agit d'un hybride de largeur fixe et de largeur de fluide - il vous permet de définir des minimums et des maximums afin que les longueurs de support ou de ligne ne deviennent pas incontrôlables, et il permet également à la conception de s'adapter aux paramètres de l'utilisateur. Bien sûr, cette technique a également ses propres avantages et inconvénients. Bien qu'il fournisse une mise en page spécialement choisie pour les paramètres d'un utilisateur, ce type de site est difficile à développer. Tous les navigateurs ne prennent pas en charge les requêtes multimédias requises pour ce faire. De plus, vous développez essentiellement plusieurs mises en page, prolongeant ainsi le temps nécessaire à la création et à la maintenance.
Je pense qu'il est impossible de simplement disposer une couverture "Toujours utiliser ceci" ou "Ne jamais utiliser ceci"; Je dirais que vous devez toujours évaluer vos besoins avant de prendre une décision. Je pense que dans la majorité des cas, une mise en page à largeur fixe répondra à vos besoins, mais qu'une mise en page fluide ou réactive peut offrir une bien meilleure expérience utilisateur, juste au prix d'une difficulté supplémentaire.
Le problème avec l'utilisation de la largeur variable à 100% est qu'elle ne s'affiche vraiment pas bien pour les utilisateurs avec les écrans les plus petits et les plus grands. Je vais généralement concevoir ma section de contenu principale pour la norme en définissant une largeur min/max, puis je vais centrer le contenu important (fixe). Vous pouvez alors avoir des éléments de conception à largeur variable (car ils ne sont pas aussi importants) qui s'étirent/rétrécissent pour remplir l'écran.
De cette façon, les informations importantes s'affichent toujours (espérons-le) correctement tout en étant correctes dans de nombreuses résolutions.
Je ne suis pas concepteur de sites Web, mais je pense que vous devriez idéalement faire une mise en page fluide. C'est-à-dire une disposition qui changera automatiquement (et dynamiquement) en fonction de la largeur actuelle. De cette façon, les appareils étroits comme les téléphones sont bien pris en charge, ainsi que toutes les différentes largeurs d'affichage.
Le billet de blog Enfin, un Hicksdesign fluide à la fois explique et illustre la technique. Il a 3 colonnes, 2 colonnes et une disposition de colonne, qui sont sélectionnées en fonction de la largeur de la fenêtre du navigateur.
Le texte est difficile à lire une fois que la longueur de la ligne devient trop longue. Ainsi, pour tous les sites à largeur variable, il doit y avoir au moins une largeur maximale pour toutes les zones de texte afin de maintenir la lisibilité.
Il est beaucoup plus difficile de rendre un site de largeur variable beau.
Cela dépend de ce sur quoi je travaille, mais j'ai toujours tendance à pencher vers des sites à largeur fixe. La raison en est qu'elle permet de mieux contrôler l'interface utilisateur et de la garder cohérente sur toutes les tailles d'écran. Beaucoup de sites de largeur de fluide semblent terribles sur des moniteurs plus grands/plus petits (selon ce pour quoi ils ont été conçus).
Règle générale pour moi:
- Si l'utilisabilité du site dépend largement de l'interface et/ou le contenu est principalement du texte: largeur fixe
- Si le site a une interface minimale, mais que le contenu est en grande partie visuel (sites de photos ou application de cartes, par exemple), alors j'opte pour le fluide.
Voici une grande ventilation de certains avantages/inconvénients: http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one- pour vous /
Chaque fois que je le peux, j'essaie de ne pas définir la hauteur et la largeur spécifiques d'un objet dans px mais dans %
Je suggérerais de tenir compte de la largeur variable ou de fournir une disposition alternative pour des écrans plus larges.
Si vous optez pour une largeur fixe - veuillez vous assurer qu'elle n'est pas minuscule! J'ai vu certains sites d'une largeur de 500 ou 600 pixels qui rendent la lecture du site comme la numérisation des pages jaunes.
Je suis depuis longtemps un fan de l'approche de The Man In Blue consistant à fournir des mises en page alternatives basées sur la largeur disponible: voir la démo en direct ici
Vous voudrez peut-être concevoir la mise en page de votre site Web dans l'orientation paysage. De plus en plus de moniteurs à écran large sont utilisés, avec de grandes résolutions de 1920x1080 (celle-ci étant la plus courante). Avez-vous déjà essayé de maximiser une fenêtre de navigateur affichant une mise en page fixe portrait à ce sujet? C'est comme la moitié ou les deux tiers de l'écran rempli de votre couleur/image d'arrière-plan.
C'est bien que Windows 7 vous permette de redimensionner rapidement une fenêtre à la moitié de l'écran et de la coller sur le côté: WindowsKey + Left/Right
La largeur variable est probablement la voie à suivre, car avec une largeur fixe, certaines personnes pourraient penser que votre site Web est trop petit pour leur moniteur et certaines personnes peuvent penser que c'est trop grand pour leur moniteur.
Cela dépend du contenu du site Web. S'il contient beaucoup de texte, la largeur variable a plus de sens car le texte peut s'étaler et les utilisateurs peuvent le lire plus efficacement. Si cela ressemble plus à un site Web de marketing où l'apparence est plus importante, optez pour une largeur fixe car il est beaucoup plus difficile de rendre un site Web à largeur fixe superbe.
Toutes les hypothèses que vous faites lors de la conception d'une mise en page de taille fixe sont erronées pour certains de vos utilisateurs. La seule façon de fournir une expérience satisfaisante pour tout le monde est d'utiliser une conception flexible et réactive.
Deux problèmes (en essayant d'éviter la duplication):
Vous ne pouvez pas supposer que le navigateur est en plein écran; les analyses qui signalent la résolution d'écran ne racontent qu'une partie de l'histoire.
Vous ne pouvez pas supposer que les utilisateurs utilisent les mêmes tailles de police que vous. Les lignes trop larges pour être lues à la taille de votre police peuvent ne pas être trop larges pour être lues pour quelqu'un qui a dû augmenter la taille de la police de quelques crans; à l'inverse, la colonne pour laquelle vous définissez une largeur fixe en fonction de vos paramètres de police peut signifier que l'utilisateur voit cinq mots par ligne ou quelque chose.
Pour être utilisable par tous les utilisateurs, votre conception de sites Web doit utiliser tout et uniquement l'espace que le navigateur vous offre. Faites confiance à l'utilisateur pour avoir dimensionné son navigateur afin d'optimiser sa propre expérience; vous devez alors travailler dans ces limites. Cette approche fonctionne sur des moniteurs de 30 "et des tablettes de 7" (et même sur des téléphones, si vous n'avez pas fait de version spécifique au mobile).