les sites Web devraient-ils s'étendre lors du redimensionnement de la fenêtre ?
https://stackoverflow.com/questions/27381
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je pose cette question uniquement du point de vue de la convivialité :Un site Web doit-il s'agrandir/s'étirer pour remplir la zone d'affichage lorsque vous redimensionnez une fenêtre de navigateur ?
Je sais avec certitude qu'il y a des inconvénients évidents :
- Les larges colonnes de texte sont difficiles à lire
- Écrire du HTML/css en utilisant des pourcentages peut être pénible
- Cela vous rend vulnérable à ce que votre conception dépasse ses limites si une image est trop large ou si un bloc de texte trop long est ajouté.(voir, c'est pénible de coder le html/css)
Le seul avantage auquel je puisse penser est que les utilisateurs qui utilisent le redimensionnement de police intégré à leur navigateur n'auront pas à gérer des colonnes de quelques mots seulement, avec un corps d'espaces de chaque côté.Cependant, je pense que cela peut être un problème de navigateur plus qu'autre chose (Firefox 3 permet de zoomer). tout au lieu du simple texte, qui est toujours utile)
modifier:J'ai remarqué que le débordement de pile a une largeur fixe, mais l'horreur du codage est redimensionnée.Il semble que Jeff n’ait pas de préférence marquée dans un sens ou dans l’autre.
La solution
C'est exactement ce que fait le HTML brut.Modifiez-vous vos données pour qu'elles ne s'affichent pas aussi bien dans des fenêtres de taille aléatoire ?
Autrefois, tout le monde avait des écrans VGA.Or, cette résolution est très rare.Qui sait quelles résolutions seront communes à l’avenir ?Et pourquoi s’attendre à une certaine largeur ou hauteur minimale ?
Du point de vue de la convivialité, exiger une certaine résolution de la part de vos utilisateurs ne fera que créer une expérience dégradée pour quiconque n'utilise pas cette résolution.Une autre chose qui vient de ceci est ce que est largeur fixe?J'ai vu beaucoup de fenêtres de taille fixe (popups) qui ne s'affichent tout simplement pas correctement car mes polices sont différentes de celles du concepteur.
Autres conseils
En termes de mise à l'échelle d'un site Web, j'aime les sites Web de taille fixe qui évoluent correctement à l'aide de la fonction "zoom" du navigateur.Je ne veux pas d'une page très large avec des polices minuscules sur mon moniteur 1920 résolution.Je ne sais pas si le concepteur Web doit faire quelque chose pour le faire évoluer correctement lors du zoom, mais le zoom dans FF3 est génial, celui de IE7 est inutile...
La conception doit être fluide dans des limites raisonnables.
Utiliser CSS a min-width et max-width propriétés (qui fonctionnent dans tous les navigateurs, y compris IE7+) pour éviter que la conception ne s'étire trop.
L’important est de ne jamais avoir un bloc de texte trop large.Si une fenêtre est agrandie, aucun bloc de texte ne doit s'étirer indéfiniment pour correspondre car la lecture devient une difficulté.
Comme certains l’ont dit, cela dépend vraiment des informations affichées par le site.Deux bons exemples sont StackOverflow et Google Images.
Si le stackoverflow s'étirait pour s'adapter à l'écran, des réponses plus longues seraient ennuyeuses à lire, car l'œil a du mal à parcourir de longues lignes - c'est exactement pourquoi les journaux utilisent des colonnes pour tout, et pourquoi les livres ont tous la même largeur.
Avec Google Images, où le contenu est essentiellement un ensemble d'images de 200 pixels de large, il s'étire pour s'adapter à la largeur du navigateur et reste parfaitement lisible.
Fondamentalement, gardez à l’esprit que l’œil déteste lire de longues lignes de texte et basez votre conception sur cela.Vous pouvez concevoir votre site de manière à ce que lorsque vous augmentez la taille de la police, toute la mise en page s'adapte parfaitement à celle-ci (le seul site auquel je pense qui fasse cela est www.geektechnique.org - appuyez sur le bouton ctrl and -/= ou ctrl+scrollwheel, et la mise en page change de largeur avec la taille de la police)
Je suppose que c'est comme beaucoup de choses :ça dépend.Je fais habituellement les deux.Certains contenus restent à largeur fixe pour être beaux ou s'ils ne peuvent pas bénéficier de plus d'espace.d'autres éléments sont définis à 100 % s'ils semblent utiles.
Cela doit être décidé en fonction de la complexité de la conception de votre site Web.Le plus compliqué, graphiquement ou en termes de composants (quantité de divisions de contenu), déterminera la façon dont votre site Web évoluera.En général, vous constaterez que la plupart des sites Web de graphistes ne sont pas évolutifs car ils sont graphiquement intensifs.Cependant, les sites Web informatifs s'adapteront pour utiliser au mieux l'espace lisible sur l'écran et ne seront pas compliqués pour faciliter leur utilisation.C'est vraiment une question de préférence.
Je pense que cela dépend du contenu du site.Des sites comme SOFlow, les forums et d'autres sites mettent l'accent sur la lecture de nombreux détails, donc disposer de plus d'espace pour le faire est un gros avantage à mon avis.Moins le défilement est vertical, mieux c'est.
Cependant, pour les sites un peu moins exigeants au niveau de la lecture, même les blogs ou les sites de vente au détail où vous présentez simplement un produit individuel, avoir une largeur fixe permet de rester plus concis.
Je suis un grand fan des designs entièrement fluides.Quant aux plaintes concernant la convivialité concernant les lignes de texte trop longues...s'ils sont trop longs en raison de la taille de la fenêtre de mon navigateur, je peux tout aussi facilement réduire la fenêtre que l'élargir.
Note:si vous utilisez la fonctionnalité de zoom de votre navigateur, une mise en page fixe écrase le texte, tandis qu'une mise en page fluide lui permet d'occuper tout l'écran.
C'est peut-être juste un problème de navigateur, mais c'est définitivement un argument en faveur du fluide
Les largeurs de paragraphe plus grandes que votre affichage rendent un site Web complètement inutilisable.Vous devez secouer la barre de défilement horizontale d'avant en arrière pour chaque ligne que vous lisez.Je fais un sujet de conception de sites Web à l'université et le manuel appelle les conceptions qui s'adaptent à la largeur de votre écran. disposition fluide.
Je conçois mon grand projet de classe en utilisant une mise en page fluide, c'est un peu plus problématique qu'une largeur fixe.Je soupçonne qu'aucun des autres étudiants ne l'utilisera, les correcteurs ne le remarqueront pas et aucun des sites professionnels que nous imitons n'est fluide non plus.
Je dirais fluide jusqu'au bout. L'utilisateur peut toujours revenir à une fenêtre de taille plus petite s'il n'aime pas le résultat de son agrandissement, mais il ne peut rien faire contre une mise en page fixe.
Si vous détestez vraiment, vraiment l'idée que votre site ait l'air moche à cause de quelque chose qu'un utilisateur avec un grand écran fait, alors pour le bien de tout ce qui est vrai et beau, au moins n’utilisez jamais de mises en page fixes basées sur les pixels ! CSS dispose de ces unités de taille relatives au texte, comme "em", qui permettent à certaines parties de votre page de s'adapter à la taille de la police tandis que d'autres (comme les images) restent dans leur taille "naturelle".
Pourquoi ne pas les utiliser et faire en sorte que votre page s'adapte bien sans compter sur le "tout mettre à l'échelle" moins flexible de FF3 qui n'est en réalité qu'une solution de contournement pour les sites qui utilisent une mise en page fixe stupide basée sur des pixels ?
Beaucoup de gens disent des choses comme "c'est une question de goût" ou "je n'aime pas les grandes polices sur mon affichage à haut pixel". Le nombre de pixels n'a rien à voir avec cela, et ce n'est pas une question de goût.C'est une question de DPI, qui est directement lié à la résolution d'affichage et à la taille de la police.Si votre mise en page évolue avec le DPI des polices (en étant spécifiée en ems par exemple et en utilisant SVG), alors vous vous retrouvez avec des sites Web très beaux et très nets qui fonctionnent de manière optimale avec n'importe quel affichage.
C'est une question de préférence en matière de style.Les deux peuvent être également utilisables selon la mise en œuvre.Des colonnes peuvent également être utilisées si l'écran est suffisamment large.Personnellement, je trouve ennuyeux qu’une seule et étroite colonne de texte s’affiche sur l’écran.
Modification pour 2012 :Oui, votre site Web doit répondre à la taille de la fenêtre dans laquelle il est affiché.
Il existe de nombreux endroits pour en savoir plus à ce sujet, notamment :
Il existe probablement un compromis entre les conceptions fixes et fluides.Vous pouvez concevoir un site fluide mais définir la propriété CSS max-width à 1024 (ou autre).Cela signifie que vous obtenez une mise en page fluide lorsque le window width est inférieur à 1024 et fixed width quand il est plus grand.
Ensuite, les utilisateurs d'écran étroit (comme mon eee 701 de 800 pixels) n'ont pas besoin de faire tourner la barre de défilement horizontale pour lire chaque ligne et les utilisateurs d'écran large (qui ne savent pas comment redimensionner la fenêtre de leur navigateur) n'obtiennent pas une largeur de 500 caractères. , paragraphes de 1 caractère de haut.
