Google Labs Taille du navigateur
J'ai toujours préféré mises en page à largeur fixe sur layouts largeur des fluides, l'une des raisons principales est que je suis en mesure de mieux comprendre comment l'image entière sera sans avoir à vous soucier de la résolution de l'écran.
Mais maintenant la « image » a changé, il y a un écart important entre les plus bas et les résolutions les plus élevées utilisées par la plupart des utilisateurs de nos jours et ils semblent être là pour rester.
J'ai un netbook qui ne supporte que 800 pixels ou 1024 pixels de large ; J'ai aussi un 22" écran compatible avec 1650 pixels et 24" moniteurs support 1920 pixels et plus sont de plus assez commun.
Je l'ai assez bien « ignoré » les utilisateurs 800 pixels pour un certain temps et je développe avec 950/960 pixels de large fixe, j'ai aussi remarqué que les sites populaires (SO pour une personne) soit utiliser cette approche ou un fluide.
Le texte (presque) que des sites (comme Wikipédia ) Je ne voir un problème avec le système de fluide, mais que dire de tous les autres sites qui dépendent des images / vidéo pour créer un contenu intéressant ? Réseaux sociaux, petites annonces, etc. ... Ce qui est (sera) leur approche pour résoudre ce problème?
Seam Carving semble être une bonne option pour l'avenir proche, mais il n'a pas mûri assez (ni les navigateurs ni jQuery soutien nativelly à ce point dans le temps), je me sens aussi comme les utilisateurs ne le comprendrait pas, se confondre avec elle et en conséquence abandonner le site.
de facto standard sur le Web est encore 1024 pixels de large, et en laissant 980 pixels inutilisés dans un 24" moniteur semble tout simplement pas étrange simplement dire mal. < strong> Alors, quelles sont nos options?
8 Réponses :
Je pense qu'il est préférable d'avoir une largeur maximale de la mise en page, vous pouvez changer cela avec Javascript. Un bon exemple est la mise en page, voir ce qui se passe (en Firebug ou quelque chose) avec la mise en page si vous modifiez la largeur: http: //tweakers.net/ Ils ont choisi une largeur de 1208px et de le rendre plus petit avec Javascript lorsque la largeur du navigateur change. JavaScript est désactivé, le site est encore 1208px de large, qui ne semble pas être un problème quand même
EDIT.: La première largeur du site sera comme 900px. Avec Javascript, vous vérifiez la largeur du navigateur et vous donner une classe avec la plus grande résolution à la largeur de votre navigateur. Par exemple: la largeur du navigateur semble être 1100px, de sorte que vous donnez une classe « res1024 », ou le navigateur est la largeur 1080px, vous donnez une classe « res1100 ». Ce sera votre CSS: p>
.res900 img.fluid {
width: 200px;
}
.res1100 img.fluid {
width: 300px;
}
Salut Haren, la section Blanche (Contenu) du lien que vous avez fourni semble toujours occuper 1000 pixels de large, si je redimensionniste la fenêtre du navigateur ci-dessous, les barres de défilement de largeur apparaissent.
Salut Alix, peut-être que c'est parce que votre résolution d'écran est 1024px? Laissez-moi éditer mon message pour vous donner une idée de la façon dont cela fonctionne:]
Wow, ils ont réussi à créer une conception qui se brise horriblement dans tout sauf une fenêtre de navigateur en plein écran avec toute sa largeur disponible. (Se brise sur le mien parce que j'ai mes onglets sur le côté droit, le contenu disparaît donc sous elle) un excellent travail. : P
Se chevauchant partout; C'est un terrible exemple terrible de tout à peu près tout.
@Harmen: J'utilise 1650 pixels en ce moment. La zone de contenu passe de la valeur par défaut de 1124 pixels à un minimum de 1000 pixels, pas plus loin.
@Daniel & Bruce: Merci, je n'ai pas pu reproduire les effets que vous avez mentionnés, peut-être que cette approche n'est peut-être pas une bonne idée.
Oops désolé! Je voulais dire @daniel et @nsd.
@Harmen: Je peux à peu près tout cela en utilisant Just Fluide CSS, le problème avec les images reste cependant le même.
J'approche le problème d'un angle différent. Avoir une disposition de fluide mais donnez-lui une largeur minimale (plutôt qu'une largeur maximale). Vous pouvez y parvenir avec CSS.
Le problème avec les images n'est pas si grand. Ce que vous faites est le suivant:
Faites le fluide d'image comme suit:
Lorsque vous redimensionnez la page, l'image se réapparaîtra à la largeur du pourcentage. Assurez-vous simplement que vous n'avez pas d'attributs de largeur ou de hauteur de l'image. Je l'appelle superlastic :) 
Humm ... approche intéressante. Connaissez-vous de tout site Web qui utilise cette méthode?
Je suppose que en laissant le navigateur choisir la taille de l'image, il y aura des artefacts étranges, non?
Il n'y a pas de bonne réponse à cette question car aucun objectif de deux design n'est jamais ressemblé. Les dispositions de fluide rendent toute apparence de contrôle typographique pratiquement impossible, mais toutes les conceptions ne nécessitent pas ou ne le veulent pas.
Aucune collection de «meilleures pratiques» équivalendra à une éducation de conception réelle, et tous les utilisateurs se sentent obligés de souffler sur les fenêtres de leurs navigateurs pour remplir l'écran entier, non plus.
Il existe des moyens de créer des règles différentes me semble que c'était dans l'intérêt des appareils "fabricants" de les rendre compatibles avec des sites Web qui prédisent l'avènement de ces appareils de 5 à 10 ans.
Et sinon, c'est leur problème. @media à l'intérieur d'une feuille de style - W3C a quelque chose sur ce -et bien que ce soit un gros chat de Schroedinger si les navigateurs de poche obéiront aux règles, il est assez sûr de supposer que, même s'ils ne le font pas, ils ont assez grand Écrans ratinés Pour simplement utiliser un modèle d'échelle du site tel qu'il apparaît sur des ordinateurs de bureau.
Vous pouvez utiliser largeur de périphérique dans votre requête de support pour fournir différents CSS pour les moniteurs plus petits et plus gros.
Bien sûr: ce n'est pas super soutenu pour le moment, je pense que vous serez au moins mal de chance dans IE au moins.
laissant 980 pixels inutilisés dans un moniteur de 24 "semble assez étrange de ne pas dire mal
Je ne suis pas d'accord ici. Si vous avez un moniteur avec une résolution élevée, vous n'exécutez probablement pas une fenêtre de navigateur maximisée. Et même si vous êtes, êtes-vous vraiment préparé que le contenu est tout dans une zone fixe au milieu? Vraiment?
Tant que votre site a une configuration décente et utilisable, je ne vois pas le problème avec l'espace de chaque côté sur des moniteurs élevés.
@Paul: Comme je l'ai dit avant d'avoir 22 "1650 pixels de large moniteur. J'utilise toujours mon navigateur dans un état maximisé et je dois dire que cela donne une impression sur moi avoir 43% de mon port de vue vide. Avec un 24 "Moniteur J'aurais 51% du port d'affichage inutilisé. C'est un terrible gaspillage d'espace.
Assez juste. Si vous pouvez penser à quelque chose de bien à faire dans l'espace, super. Ce n'est pas parce que l'espace est là que vous devez y mettre quelque chose.
Peut-être que les utilisateurs ayant des écrans de grande taille peuvent zoomer sur le site.
C'est ce que je fais (calculez à l'aide de ma télévision)
Je pense généralement que les mises en page des fluides sont une bonne idée. Le problème commence lorsque votre agencement de fluide commence à devenir très large avec des écrans haute résolution - il y a une limite à la façon dont l'œil humain peut suivre horizontalement sans perdre le positionnement vertical. C'est pourquoi les colonnes de journaux, par exemple, sont toujours plutôt étroites.
Essayez de regarder Wikipedia dans un écran haute résolution et vous verrez qu'ils limitent la largeur maximale à quelque chose d'environ 800-900px - plus que (en supposant une police 12PT assez standard) et les gens cessent de pouvoir lire Jusqu'à la fin de la ligne, puis trouvez sans effort le début de la ligne suivante et le tout se brise dans un gâchis de la souche des yeux et du cou.
sur les sites Web I Construire, j'utilise max-largeur pour limiter la largeur maximale du contenu du texte (et dans ce cas, j'inclus également des images et d'autres éléments) à environ 720-800px, qui avec des barres latérales et de telles personnes peuvent éventuellement arriver à environ 1000px. Si l'écran est plus large alors que, puis centrez sur le contenu de gauche l'alignez-lui (à droite sur les sites Web RTL) - les deux fonctionnent bien.
Mais vous devez concevoir votre mise en page afin qu'elle coule lorsque la largeur disponible est plus étroite - ceci est très utile pour les personnes atteintes de netbooks (qui sont plutôt populaires maintenant et je m'attends à devenir plus populaire à l'avenir), téléphones intelligents et Même les appareils mobiles de petit écran. De tels appareils mobiles de plus en plus de navigateurs standard de fonctionnalités et vous devriez résoudre ce problème dans vos conceptions - même si un navigateur mobile peut réduire votre site Web en quelque sorte, le "mode mobile" le fait généralement en gâchant la page et en tuant votre expérience d'utilisateur envisagée.
Grande réponse, m'a fourni de très bonnes perspectives. Merci.
La plupart des discussions informatives sur les présentations que j'ai lues jusqu'à présent sont dans le livre de la maîtrise CSS de l'Andy Budd. Si vous avez une chance, lisez-le. Je pense que c'est un livre indispensable sur CSS (niveau intermédiaire). On dirait que le chapitre des présentations est disponible dans le formulaire d'article ici.
http://www.webreference.com/authoreding/style/sheets/css_mastery2/ < / a>
Un autre lien:
Liquide et fluide sont deux noms différents pour la même technique.
hth.
Les mises en page des fluides étaient la réponse avant Conception réactive Soutien dans les navigateurs est sorti. Pas besoin d'utiliser plus de mises en page fluide ou élastique.
N'oubliez pas les utilisateurs mobiles. La résolution de l'écran peut être là quelque chose comme 320 x 240.
@ Juha: Ouais, mais les navigateurs mobiles redimensionnent normalement le contenu pour s'adapter à l'écran, quoi que ce soit, au moins c'est mon expérience.
Voir aussi Stackoverflow.com/questions/1413602/ ... Pour plus d'informations sur cet argument sans fin.
@ Alix: Vérifiez ma réponse. Espérons que cela aidera.