Update: I deleted my motivation because it seems to distract readers. This is not about "why don't you make your window smaller". See the screenshots and you will see obstructed text because of fixed width. See my reference to "em/ex" notation in CSS. I would like to have a real discussion here. Thank you.
更新:我删除了我的动机,因为它似乎分散了读者的注意力。这不是“为什么不让你的窗户变小”。查看屏幕截图,由于宽度固定,您将看到受阻的文本。请参阅CSS中对“em / ex”表示法的引用。我想在这里进行真正的讨论。谢谢。
Now I would like to ask real experts on this topic -- I'm not a web designer -- why fixed width layout are still that popular and if there are really good reasons for it. (you are welcome to point out reasons against it as well.)
现在我想问一下关于这个主题的真正专家 - 我不是网页设计师 - 为什么固定宽度布局仍然很受欢迎,如果它有很好的理由。 (欢迎您指出反对它的理由。)
-
Is it too hard to design your layout relatively (from start on)? It seems some people even forgot how to do it.
相对来说(从一开始)设计你的布局是否太难了?似乎有些人甚至忘记了怎么做。
-
Do you have real reasons like readability and just don't know how to deal with it correctly? Here I'm referring to pieces of wisdom, like it's harder to read longer lines (that's why newspapers use columns) -- but then, width should be given using
emandex.你有真正的理由,比如可读性,只是不知道如何正确处理它?在这里,我指的是智慧,比如阅读更长的线条更难(这就是报纸使用列的原因) - 但是,宽度应该使用em和ex来给出。
-
Are you forced by some old guidelines? In the dark old age of HTML, people did a lot of things wrong; now everybody finally uses CSS, but perhaps this one just sticked.
您是否被某些旧指南所迫?在黑暗的HTML时代,人们做了很多错事;现在每个人最终都使用CSS,但也许这个只是坚持。
-
Or are you like me, wondering why everybody is doing it "wrong"?
或者你喜欢我,想知道为什么每个人都这样做“错误”?
To illustrate the issue, I want to give screenshots of negative examples first:
为了说明这个问题,我想首先给出反面例子的截图:
- * (here I can't even see what would make it any hard to fix it)
- Filmstarts (a german website which renders itself unreadable-if I don't take a reading-glass with me)
*(在这里我甚至看不到会让它变得难以修复的东西)
电影明星(一个德国网站让自己变得难以理解 - 如果我不随身携带阅读玻璃)
And here is a positive example. It looks like a typical fixed with site (even with transparent borders), but it is not:
这是一个积极的例子。它看起来像一个典型的固定网站(即使有透明的边框),但它不是:
Website on Wiki software -- associated Forums
维基软件网站 - 相关论坛
What do you think?
你怎么看?
Update: Related questions: this one and that one.
更新:相关问题:这个和那一个。
27 个解决方案
#1
And here, as expected, comes the usual canard: “long lines are too hard to read”.
在这里,正如预期的那样,通常的鸭子会出现:“长线难以阅读”。
[Citation needed], folks.
人们,[需要引证]
See http://webusability.com/article_line_length_12_2002.htm for a summary of actual research in this area. A number of these, plus http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.asp, find that although users express a preference for moderate line lengths, reading speeds do not sharply drop off with ‘long’ lines; in fact many show increased speeds with the longer settings.
有关该领域实际研究的摘要,请参见http://webusability.com/article_line_length_12_2002.htm。其中一些,加上http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.asp,发现尽管用户表达了对中等线长度的偏好,但阅读速度不会因“长”线而急剧下降;事实上,许多人通过更长的设置显示出更高的速度
As long as it's not ridiculously long, and taking care to use a decent amount of leading, long lines are not generally a real issue at today's typical browser widths and default font sizes. (If you're one of those designers that loves to use teeny-tiny type for everything, it could be an issue, but then you're already making it impossible to read with the flyspeck text. Stop it!)
只要它不是非常长,并且注意使用相当数量的前导,长线通常不是当今典型的浏览器宽度和默认字体大小的真正问题。 (如果你是那些喜欢使用极小类型的设计师之一,那可能是一个问题,但是你已经无法用flyspeck文本阅读了。停止它!)
So as it's only an option of user preference that prefers medium-short lines, let us users decide how much screen space we want to give the web site to get our work done. We're the ones best-equipped to know. If you decide you know definitively best you're likely to waste space, or, if you guessed too long, make us scroll back and forth sideways to read the text — and that really is a readability nightmare.
因此,只有用户偏好的选项更喜欢中短线,让我们用户决定我们希望为网站提供多少屏幕空间来完成我们的工作。我们是最有能力知道的人。如果你决定最终知道最好你可能会浪费空间,或者,如果你猜太久,让我们来回滚动来阅读文本 - 这真的是一个可读性的噩梦。
If you want to protect us from ourselves, you can compromise by specifying a min-width and max-width in ‘em’ units so that the page is responsive to liquid layout, but doesn't get stretched to extremes.
如果你想保护我们自己,你可以通过以'em'单位指定最小宽度和最大宽度来妥协,这样页面就能响应液体布局,但不会被拉伸到极端。
But otherwise, the best reason to design fixed-width is indeed that it is easier, especially for someone with a fixed-2D-grid view of the world and static visual-design tools like Photoshop.
但除此之外,设计固定宽度的最佳理由确实是它更容易,特别是对于具有固定2D网格视图的人和像Photoshop这样的静态视觉设计工具。
#2
It's already a pain to make a website that renders correctly across all popular browsers; if you also want it to render correctly at all text sizes, it's quite a lot of work. A lot of web developers design their sites for the default font size and try to support fonts that are either a little bit larger or a little bit smaller. (You might be interested in this dated but relevant piece from Jakob Nielsen.)
制作一个能够在所有流行浏览器中正确呈现的网站已经很痛苦;如果你还希望它能在所有文本大小上正确呈现,那么这是相当多的工作。许多Web开发人员将他们的站点设计为默认字体大小,并尝试支持更大或更小的字体。 (你可能会对雅各布尼尔森这篇过时但相关的文章感兴趣。)
As for fixed-width sites, it's hard to say. Personally, I suspect that a lot of web designers just like to feel like they have a lot of control over their look and feel, and think the site looks "ugly" when you stretch it too far, so they don't let you do it. Probably not wise, but there you go.
对于固定宽度的网站,很难说。就个人而言,我怀疑很多网页设计师都觉得他们对自己的外观和感觉有很大的控制感,并认为当你将它拉得太远时,网站看起来很“丑陋”,所以他们不让你做它。可能不明智,但你去了。
#3
Now I would like to ask real experts on this topic -- I'm not a web designer -- why fixed width layout are still that popular and if there are really good reasons for it.
现在我想问一下关于这个主题的真正专家 - 我不是网页设计师 - 为什么固定宽度布局仍然很受欢迎,如果它有很好的理由。
Ah, both subjective and argumentative. I'm sure my argument won't convince you, but here's one really good reason, IMHO:
啊,主观和议论。我相信我的论点不会说服你,但这是一个非常好的理由,恕我直言:
Presentation.
Just like a movie, the director has an experience in mind for the viewer. They frame the movie just so. They move the action at a given pace for the emotion they are trying to invoke in the viewer. Even though DVDs have had the "angle" feature since inception, few movies have ever given viewers the opportunity to watch the film from a different point of view, and if they have that viewpoint was still under the control of the director.
就像电影一样,导演对观众有一种体验。他们为这部电影构图。他们以给定的速度移动动作,以寻求他们试图在观众中调用的情感。尽管DVD从一开始就具有“角度”特征,但很少有电影能够让观众有机会从不同的角度观看电影,如果他们有这种观点仍然在导演的控制之下。
Now, any old sap can throw up a website, and for the most part they aren't interested in anything more than the content.
现在,任何旧的汁液都可以抛出一个网站,而且大多数情况下他们对内容不感兴趣。
But real designers fully understand that the design must be understood as a whole. A wide layout has a very different impact on people than a multicolumn or thin layout. Reader eyes move in a certain pattern, and the text is intended to pull the reader along a path.
但真正的设计师完全明白,设计必须作为一个整体来理解。与多列或薄布局相比,宽广布局对人的影响截然不同。读者眼睛以某种模式移动,文本旨在沿着路径拉动读者。
Those who claim that every layout should have certain features are shortsighted. There are no universally true 'rules', and trying to make an expanding layout a rule is shortsighted at best, and arrogant at worst.
声称每个布局都应具有某些功能的人都是短视的。没有普遍真实的“规则”,试图扩大布局规则充其量只是短视,最坏的是傲慢。
-Adam
#4
Here are my $0.02 and they are worth exactly what you paid for them (and if that's not a perfect example of the current economic situation... :-))
这是我的0.02美元,他们的价值正是你为他们付出的(如果这不是当前经济形势的完美例子...... :-))
The layout of a website should be dictated by the overall user experience. This is in part determined by the accessibility, in part by the design, in part by the functionality:
网站的布局应由整体用户体验决定。这部分取决于可访问性,部分取决于设计,部分取决于功能:
- Accessibility - as several people pointed out, letting the website use the full width of the browser without any control can result in quite a long lines that make it hard to read[1]. Making the text automatically layout in multiple columns is a potential answer to this problem, but it's really hard to achieve with CSS (that's gotta be the worst tool for doing layout humanity ever devised, but that's a separate topic) and is fraught with other issues as well.
可访问性 - 正如几位人士所指出的那样,让网站在没有任何控制的情况下使用浏览器的整个宽度会导致相当长的行,这使得难以阅读[1]。使文本自动布局在多列中是这个问题的一个潜在答案,但是用CSS实现真的很难(这是制作布局人性化的最糟糕的工具,但这是一个单独的主题)并且充满了其他问题同样。
I should note that you do have a point - most websites with fixed width do suck on high-DPI because they don't take into account the changed font size. However, that's not an inherent problem of the fixed width design; I've seen it with fluid designs as well.
我应该注意到你确实有一点 - 大多数具有固定宽度的网站都会对高DPI感到厌烦,因为它们没有考虑到改变的字体大小。然而,这不是固定宽度设计的固有问题;我也看过流体设计。
[1] No, I don't have a citation. I, however, have tried reading on full-screen on my 24" 1920x1200 96dpi [2] and gotta tell you - after 15 minutes my neck is cramping from the constant turning of my head.
[1]不,我没有引用。然而,我已经尝试在我的24英寸1920x1200 96dpi [2]上全屏阅读,并且要告诉你 - 15分钟后,我的脖子因不断转过头而痉挛。
[2] The typical user still runs 1024x768 or 1280x1024 (based on instrumentation from the product I work on, with about little bit less than 10mln installs for the latest version). So yeah, I am not the typical user.
[2]典型的用户仍然运行1024x768或1280x1024(基于我工作的产品的仪器,最新版本的安装量略少于10mln)。所以是的,我不是典型的用户。
-
Design - most modern designs are very rich on graphical and video elements. Most graphical elements do not scale well with the document reflow and video does not scale at all. (I would again blame this on CSS - it's support for dynamic resizing of images is lacking some basic operations and there is aboslutely no support for building and control of the visual tree. But I digress again :-)) As such, disegners opt in for the easier approach.
设计 - 大多数现代设计都非常丰富的图形和视频元素。大多数图形元素无法与文档重排进行良好的扩展,视频根本无法扩展。 (我会再次把它归咎于CSS - 它支持动态调整大小的图像缺乏一些基本的操作,而且很可能不支持构建和控制可视化树。但我再次离题:-))因此,提供者选择加入为了更容易的方法。
-
Functionality - fluid layout is really good for dealing with big text chunks like documents. However, quite a few modern websites are in effect applications, not documents. They have multiple elements and controls and increasing the area on which these elements are scatered makes it harder for the user to keep all of them in focus.
功能 - 流畅的布局非常适合处理像文档这样的大文本块。但是,相当多的现代网站实际上是应用程序,而不是文档。它们具有多个元素和控件,并且增加了这些元素被占用的区域,使得用户更难以将所有元素保持在焦点上。
Couple examples:
- two control groups that are aligned at the left and the right end will be too far away from each other in full-screen width. Note: that can be alleviated by choosing to always keep all the controls grouped together, like most desktop applications do (almost all desktop apps keep all toolbars left-aligned).
- a picture/video and associated text below it. On full screen there are two possible approaches for fluid layout: a) scale the picture to the full width, at which point the text is visually lost b) leave the picture the same width, but let the text flow the full width, at which point the picture is visually lost.
在左屏幕和右端对齐的两个控制组在全屏宽度上彼此相距太远。注意:可以通过选择始终将所有控件组合在一起来缓解这种情况,就像大多数桌面应用程序一样(几乎所有桌面应用程序都保持所有工具栏左对齐)。
下面的图片/视频及相关文字。在全屏幕上有两种可能的流体布局方法:a)将图片缩放到整个宽度,此时文本在视觉上丢失b)使图片保持相同的宽度,但让文本流动整个宽度,在此处指出图片在视觉上丢失了。
I guess my point is that the fluid layout is not the Holy Grail of all layouts and there are scenarios where it's not applicable. The designer and the developer of the webapp should choose the appropriate layout and implement it so that it meets the needs of the target users, delivers the best experience of the product functionality and adapts to the user environment.
我想我的观点是流体布局不是所有布局的圣杯,并且有些场景不适用。 webapp的设计者和开发者应该选择适当的布局并实现它,以便满足目标用户的需求,提*品功能的最佳体验并适应用户环境。
#5
I suspect that most web developers go for fixed width because it's by far easier to develop such a site (in addition, many Content Management Systems only offer a fixed-width layout). Getting a dynamic layout to work well & correctly in different browsers is more tricky - but it is definity doable (I'm just recently working on that issue ;-).
我怀疑大多数Web开发人员都采用固定宽度,因为开发这样一个站点要容易得多(此外,许多内容管理系统只提供固定宽度的布局)。让动态布局在不同的浏览器中正常和正确地工作是更棘手的 - 但它是可靠的(我最近刚刚在这个问题上工作;-)。
And I do agree with you - I want web pages that dynamically adjust their contents to the browser size that I as the 'customer' like to work with (whether that's small or large). I don't like to be patronized into "not using my browser in full-screen mode" or anything the like...
我同意你的看法 - 我希望网页能够动态调整其内容,使其成为我作为“客户”喜欢使用的浏览器大小(无论是小还是小)。我不喜欢光顾“不在全屏模式下使用我的浏览器”或类似的东西......
#6
You might try zooming in. Most modern browsers will zoom the whole page by default, not just the text. This preserves the page layout and uses more of your screen. Usually the shortcut is ctrl + + and ctrl + -. It works well on my laptop, at least
您可以尝试放大。大多数现代浏览器默认会缩放整个页面,而不仅仅是文本。这样可以保留页面布局并使用更多屏幕。通常快捷键是ctrl + +和ctrl + - 。至少在我的笔记本电脑上运行良好
#7
[Forget my mention of the windowmanagement, it wasnt on topic]
[忘记我提到的窗口管理,它不是主题]
I currently run a big internet-community and we'll switch to fixed-width (for 1024px) design asap because we only get problems currently using a dynamic-width-layout: You cant rely on anything, and (the biggest problem imho) text gets to long, so there are only a few lines but the lines themself are much to long to overview.
我目前运行一个大的互联网社区,我们将尽快切换到固定宽度(1024px)设计,因为我们目前只使用动态宽度布局遇到问题:你不能依赖任何东西,(最大的问题是imho)文本变得很长,所以只有几行但是这些行本身很难概述。
#8
Readability and Predictability
You need to know how things will be displayed to be sure it will be readable and pleasant to the eyes. By using a fixed width, you know exactly (almost exactly because of cross-browser support) what your users will see.
你需要知道如何显示事物,以确保它的可读性和愉悦性。通过使用固定宽度,您可以准确地知道(几乎完全是因为跨浏览器支持)用户将看到的内容。
However fixed-width designs would be a thing from the past if browsers could support correctly exactly 2 CSS properties:
然而,如果浏览器能够正确支持2个CSS属性,那么固定宽度设计将成为过去的事情:
min-width
max-width
That would allow designers to design web sites that would be flexible and predictable. No more surprises and users can use whatever resolution they want.
这将使设计人员能够设计出灵活且可预测的网站。没有更多的惊喜,用户可以使用他们想要的任何分辨率。
#9
In my experience, it is for two reasons:
根据我的经验,这有两个原因:
1) Speed - it is generally faster to write a web page in fixed with, rather than trying to write one that resizes correctly at more than a small number of resolutions.
1)速度 - 编写一个固定的网页通常更快,而不是尝试编写一个在超过少量分辨率下正确调整大小的网页。
2) The designer of the web site isn't the ultimate approver of what goes into production - if you try to work with a flow instead of fixed layout you get questions about why it looks different on Sallys' PC vs the Big bosses, and why can't you move this over to here, etc, which are easier to fix by moving to a fixed layout.
2)网站的设计者并不是投入生产的最终批准者 - 如果你尝试使用流程而不是固定布局,你会得到关于为什么它在Sallys的PC和Big Boss上看起来不同的问题,以及为什么你不能把它移到这里等,通过移动到固定的布局更容易修复。
#10
Tabbed Browsers
Since I use a tabbed browser for day to day use, resizing my window every time I switch tabs is actually a bit of a hassle. I have the window set to the maximum usable width for my purposes, and to accommodate the "largest" tab that is open. For the remaining tabs, having fluid layouts is actually kind of annoying and distracting. Items and text jump around and change position depending on how I may have resized my window for another tab. Also, fluid layouts result in uncomfortably wide blocks of short (vertically) text.
由于我使用标签式浏览器进行日常使用,每次切换标签时调整窗口大小实际上都有点麻烦。为了我的目的,我将窗口设置为最大可用宽度,并容纳打开的“最大”选项卡。对于剩余的标签,具有流体布局实际上是令人烦恼和分散注意力的。项目和文本跳转并根据我为另一个选项卡调整窗口大小的方式更改位置。而且,流体布局导致令人不舒服的宽的短(垂直)文本块。
For me, it's a lot easier as a reader to keep my eyes tracking properly on narrower blocks of text with lots of vertical scroll, and it's much easier when sites I'm familiar with stay the same size so that the layout and positioning is predictable, regardless of what I've done to my window to accommodate other tabs. I actually used to be a big fan of fluid layouts, but I find more and more that I prefer fixed layouts now that I use a tabbed browser.
对我来说,作为一个读者可以更容易地让我的眼睛正确地跟踪有较多垂直滚动的较窄的文本块,并且当我熟悉的网站保持相同的大小以便布局和定位可预测时更容易,不管我在窗口做了什么,以容纳其他标签。我实际上曾经是流畅布局的忠实粉丝,但我现在发现越来越多我更喜欢使用标签式浏览器的固定布局。
#11
I think the question shouldn't be "Why would you choose a fixed-width design?" it should be "why wouldn't you?"
我认为问题不应该是“你为什么选择固定宽度的设计?”它应该是“你为什么不呢?”
Firstly, you need to cater for the lowest-common denominator. Many developers will be running on screens with resolutions like 1680x1050, 1920x1200 and 1280x1024. Some users will be using 1024x768, which I personally consider the lowest resolution you need to cater for (thank God it's not 800x600 anymore). If you fix the width to 960-1000 pixels then you don't run the problem of developers unintentionally making pages that can't be viewed without scrolling on a monitor with less than 1600 pixels (wide). Believe me it happens.
首先,您需要迎合最低标准。许多开发人员将在1680x1050,1920x1200和1280x1024等分辨率的屏幕上运行。有些用户会使用1024x768,我个人认为这是你需要满足的最低分辨率(感谢上帝,它不再是800x600)。如果您将宽度固定为960-1000像素,那么您不会遇到开发人员无意中制作无法在不超过1600像素(宽)的显示器上滚动而无法查看的页面的问题。相信我,它发生了。
Layout on any non-trivial Webpage is hard. Throw in cross-browser support such that your page not only works but looks reasonably consistent and it's a huge problem. Now try to throw in variable width and it just gets that much worse if not impossible. Look at the payoff too: who is it going to benefit? A small minority of users that have high resolutions and actually want to stretch that content across the entire screen. I have a widescreen monitor and I won't maximize my browser for instance. Many people are like me in this respect.
任何非平凡网页上的布局都很难。抛弃跨浏览器支持,使您的页面不仅有效,而且看起来相当一致,这是一个很大的问题。现在尝试抛出可变宽度,如果不是不可能的话,它会变得更糟。看看收益:谁会受益?少数用户具有高分辨率并且实际上希望在整个屏幕上扩展该内容。我有一个宽屏显示器,我不会最大化我的浏览器。在这方面很多人都像我一样。
Consider another problem: CSS. CSS s good for many things but is a royal pain in many others. For one thing. Now browser box model differences aside, there are still many quirks with how different browsers handle CSS and even if there weren't there are many trivial things CSS can't do and the only workaround is to do things by pixel.
考虑另一个问题:CSS。 CSS对许多事情有好处,但在许多其他事情上是一种皇室般的痛苦。一方面。现在除了浏览器盒模型差异之外,还有许多不同浏览器如何处理CSS的怪癖,即使没有很多CSS无法做到的琐碎事情,唯一的解决方法是按像素执行操作。
As a concrete example, I'm doing some tables at the moment that are bursting at the seams. I'm reloading the contents with an Ajax call and replacing the contents. Now I at first tried to fix the widths of the columns with percentages. Doing it this way would be a prerequisite for not fixing the width. Firefox treated those as a suggestion and would resize them anyway even when it arguably didn't have to. I didn't get satisfactory results until I fixed the widths in pixels.
作为一个具体的例子,我正在做一些在接缝处爆裂的桌子。我正在用Ajax调用重新加载内容并替换内容。现在我开始尝试用百分比来修复列的宽度。这样做是未固定宽度的先决条件。 Firefox将这些视为一种建议,并且无论如何都会调整大小,即使它可能没有必要。在我以像素为单位修正宽度之前,我没有得到满意的结果。
At the end of the day no website really cares if it stretches across 1600 pixels or not. That's what it comes down to.
在一天结束时,没有网站真正关心它是否延伸到1600像素。这就是它归结为什么。
#12
I've worked with a lot of artists. They design a layout to be pleasing and clear. They want the presentation to match what they designed. Artist-driven design leads to fixed-width. For brochure sites, fixed width makes a lot of sense.
我和很多艺术家合作过。他们设计的布局令人愉悦和清晰。他们希望演示文稿与他们设计的内容相匹配。艺术家驱动的设计导致固定宽度。对于宣传册网站,固定宽度很有意义。
For sites with rapidly-changing content (news or shopping, or most anything driven by a CMS), I much prefer fluid, full-screen designs.
对于内容快速变化的网站(新闻或购物,或大多数由CMS驱动的网站),我更喜欢流畅的全屏设计。
#13
One of the biggest concerns that fixing the width of a website solves is readability. If you let a site be arbitrarily wide and have a block of text using that entire width, it becomes very difficult for people to read. If you make the font size bigger to compensate, then you destroy the experience for people with smaller screens.
修复网站宽度解决的最大问题之一是可读性。如果你让网站任意宽,并且使用整个宽度的文本块,那么人们就很难阅读。如果你更大的字体大小来补偿,那么你会破坏屏幕较小的人的体验。
On the other hand, if your content is visual or modular and you can make it fill up the page more intelligently, you might have a case for a totally fluid layout.
另一方面,如果您的内容是可视化的或模块化的,并且您可以更加智能地填充页面,那么您可能需要完全流畅的布局。
But I agree with the others who question why you would maximize a browser on such a big display. Why not make your browser window smaller? You'll be more productive and you'll stop worrying about it at the same time.
但我同意其他人质疑为什么要在如此大的显示器上最大化浏览器。为什么不让浏览器窗口更小?你会更有效率,同时你也不会担心它。
Many browsers do a better job of scaling websites to be larger than they used to; Firefox 3, at least, grows the entire page when you zoom in, not breaking the layout.
许多浏览器在将网站扩展到比以前更大的方面做得更好;至少Firefox 3在放大时会增加整个页面,而不会破坏布局。
#14
If you want it to take up more screen real estate, use a lower resolution. This can be useful if you're displaying a website on a large monitor up on a wall for public view. Otherwise, take @theomega's advice and use the rest of your screen for other windows.
如果您希望它占用更多的屏幕空间,请使用较低的分辨率。如果您在墙上的大型显示器上显示网站以供公众查看,这将非常有用。否则,请接受@theomega的建议,并将其余的屏幕用于其他窗口。
As for a little (of the very little) of what I know about web design and fixed width sites:
至于我对网页设计和固定宽度网站的一点知识(很少):
- They tend to make good use of white space and draw your focus down the page. Cluttering up the page by cramming every last corner with content is what designers call "visual intimidation." It's difficult to figure out what's important versus what's not.
- They feel more "finished", like a picture in a frame instead of like a photo print thumb-tacked up on a cork board.
他们倾向于充分利用空白区域并将注意力集中在页面上。设计师称之为“视觉恐吓”,将每一个角落都塞满内容,使页面混乱。很难弄清楚什么是重要的而不是什么。
他们感觉更“完美”,就像一个框架中的图片,而不是像在软木板上用拇指钉上的照片打印。
#15
"It has a resolution of 1920x1200, so all fixed-width sites waste space The form factor is only 15". So I have to use larger fonts and the text won't fit into these crammed layouts any more, sometimes even getting obstructed by other elements."
“它的分辨率为1920x1200,所以所有固定宽度的网站都浪费空间,外形尺寸仅为15”。所以我必须使用更大的字体,文字将不再适合这些填充的布局,有时甚至被其他元素阻挡。“
There is a good reason for that. If the paragraph are stretched too wide, it gets more difficult to read. Humans need a "break" after about 15 to 20 words and that is EXACTLY why we don't have books that are very wide.
这是有充分理由的。如果段落拉得太宽,则更难以阅读。人类在大约15到20个单词后需要“休息”,这正是为什么我们没有非常宽的书籍。
The higher resolution allows you to have MORE details BUT it also depends on HOW you use the space. I never maximize the browser and PC's are built for window multitasking, not ONE window at a time.
较高的分辨率允许您拥有更多细节,但它还取决于您如何使用空间。我从来没有最大化浏览器和PC是为窗口多任务而建,而不是一次只有一个窗口。
#16
The whole point of being able to adjust the size of your browser window is to better see the content of a web page, in the way that suits your situation. If the page isn't going to adjust, why not just make browser windows a single, fixed size?
能够调整浏览器窗口大小的重点是更好地以适合您情况的方式查看网页内容。如果页面无法调整,为什么不将浏览器窗口设置为固定大小?
If I have a big monitor, I want to be able to stretch my window out and have the content correctly fill it. If I need space for another window, I want to be able to shrink my browser window down and have the content correctly adjust by changing the layout (until a certain minimum point, and then by switching to a scroll bar, of course.)
如果我有一个大显示器,我希望能够拉出我的窗口,让内容正确填充它。如果我需要空间用于另一个窗口,我希望能够缩小我的浏览器窗口并通过更改布局来正确调整内容(直到某个最小点,然后切换到滚动条,当然。)
#17
Fixed width layouts are perfectly acceptable.
固定宽度布局是完全可以接受的。
Fluid layouts are nice, but are more difficult to implement, especially if there are more than two columns and source div order is important.
流体布局很好,但实现起来比较困难,特别是如果有两列以上且源div顺序很重要。
Line length is an issue regarding readability, but this interacts with font size. So you have to balance width against likely font sizes on screen.
行长度是有关可读性的问题,但这与字体大小相互作用。因此,您必须在屏幕上平衡宽度与可能的字体大小。
Nowadays, it's reasonable to assume that 1024 x 768 and up is the vast majority of the desktop user market, so you can safely design for 960 px fixed width -- for screen media type.
如今,假设1024 x 768及以上是桌面用户市场的绝大部分是合理的,因此您可以安全地设计960像素的固定宽度 - 用于屏幕媒体类型。
A couple of important constraints:
一些重要的限制因素:
- ensure is that horizontal scrolling is never required by the user
- if conversions are an issue, make sure that clickable things -- particularly "calls to action" or anything than makes your cash register go "ka-ching" should not fall to the right of the 770th pixel or so -- just in case.
确保用户永远不需要水平滚动
如果转换是一个问题,请确保可点击的东西 - 特别是“号召性用语”或任何使你的收银机变为“ka-ching”的东西不应该落在第770个像素左右 - 以防万一。
But another consideration is handheld media. You should provide alternate CSS for handheld media type. Many of these screens are under 400 px wide.
但另一个考虑因素是手持媒体。您应该为手持媒体类型提供备用CSS。其中许多屏幕宽度不到400像素。
Delivering a site that looks good and functions on a wide variety browsers, devices, display widths and viewport sizes is a moving target and continuous challenge.
提供一个看起来很好并且可以在各种浏览器,设备,显示宽度和视口大小上运行的网站是一个不断变化的目标和持续的挑战。
As regards the filmstarts.de site, it is definitely a mess, but the problem is not that it is a fixed width layout, but rather with how the layout is designed and implemented. There are good and bad implementations of fixed width layouts, just like there are good and bad implementations of fluid layouts, or semi-fluid layouts with fixed width elements, etc.
至于filmstarts.de网站,它绝对是一团糟,但问题不在于它是固定宽度的布局,而是布局的设计和实现方式。固定宽度布局有好的和坏的实现,就像流体布局的好的和坏的实现,或具有固定宽度元素的半流体布局等。
#18
I put it down to laziness. Fixed width layouts are simply easier to design and make look nice because you do not need to worry about the size changing. This, for example, makes it really easy to add images, since you know what size the layout will be.
我把它归结为懒惰。固定宽度布局更容易设计,使外观更好,因为您不必担心尺寸变化。例如,这使得添加图像变得非常容易,因为您知道布局的大小。
Personally, fixed-width websites really irritate me. I like to use large monitors. I paid a lot of money for them, so I'd like to make use to make use of them instead of having most of it be left blank. This is made even worse by sites which refuse to get larger if I increase the font size. I don't have the best eyesight and often use larger fonts to read text on websites and nothing is worse than a fixed-width layout leaving me with three words per line and a mostly blank screen...
就个人而言,固定宽度的网站真的让我很恼火。我喜欢使用大型显示器。我为他们付了很多钱,所以我想利用它们而不是把大部分都留空。如果我增加字体大小,拒绝变大的网站会更糟糕。我没有最好的视力,经常使用较大的字体来阅读网站上的文字,没有什么比固定宽度的布局更糟糕了,每行留下三个字,大部分是空白屏......
#19
As far as I'm aware while all the reasons cited are valid, the primary reason is that a lot of machines in monolithic institutions like banks and government orgs are still on fixed and somewhat archaic low resolutions. It's just the lowest common denominator sadly.
据我所知,虽然引用的所有理由都是有效的,但主要原因是像银行和*机构这样的单一机构中的许多机器仍处于固定且有些过时的低分辨率。遗憾的是,它只是最低的共同点。
#20
I personally like fixed width sites better. I am not forced to mess with my browser window to get a line size I can deal with. I personally find very long lines very hard to read. I also just think it looks better although that is 100% completely subjective.
我个人更喜欢固定宽度的网站。我没有*乱用我的浏览器窗口来获得我可以处理的行大小。我个人觉得很长很难读。我也认为它看起来更好,尽管这是100%完全主观的。
I have designed and worked with both. Some aspects of variable width sites make displaying data easier. The only problem I have had with them is due to right aligned navigation which was a little messy when it could move based on the user's browser setting.
我设计并与两者合作。可变宽度站点的某些方面使得显示数据更容易。我遇到的唯一问题是由于右对齐导航,当它可以根据用户的浏览器设置移动时有点乱。
My final answer - both are fine and each have their place.
我的最终答案 - 两者都很好,每个人都有自己的位置。
#21
I just came across this site, which actually has a link in the top right corner that lets you switch between fixed and fluid.
我刚刚看到这个网站,它实际上在右上角有一个链接,可以让你在固定和流畅之间切换。
#22
Long lines of text can be difficult to read. For the website I work on we limit the width for usability and readability. We have also designed our site to scale well using CTRL-+ to zoom.
长行的文字可能难以阅读。对于我工作的网站,我们限制了可用性和可读性的宽度。我们还设计了我们的网站,以便使用CTRL- +进行缩放。
#23
A major point for using fixed width is that the designer can actually control the way the webpage looks irrespective of browser environment. I see two reasons to use FW:
使用固定宽度的一个要点是,设计人员实际上可以控制网页的外观,无论浏览器环境如何。我看到使用FW的两个原因:
- The designer wants the webpage to look all the same.
- The designer lacks time/wish/... to test their page in different modes and in different browsers, and just avoids the risk of webpage layot starting flying around.
设计师希望网页看起来都一样。
设计师缺乏时间/愿望/ ......以不同的模式和不同的浏览器测试他们的页面,只是避免了网页开始飞来飞去的风险。
#24
I didn't make fixed-size layout until I switched to a 32 inches monitor. It is very hard to read the text if the lines goes over 32 inches. I've learned appreciate text that do not span over more than 1,000 pixels, and I have switched to fixed layout since.
在切换到32英寸显示器之前,我没有制作固定尺寸的布局。如果线条超过32英寸,则很难阅读文本。我已经学会了不超过1000像素的欣赏文字,我已经切换到固定布局了。
But I agree that reducing the content width to < 800px is a pain when you have a big monitor.
但我同意,当你有一个大显示器时,将内容宽度减少到<800px会很痛苦。
#25
Most users lack understanding of how to use a browser properly. When the day come such that users actually know how to use a computer then you will understand that fluid width is the obvious choice for web sites.
大多数用户都不了解如何正确使用浏览器。当用户真正知道如何使用计算机的那一天,您就会明白流体宽度是网站的明显选择。
#26
I am frequently forced too. None of the 3 developers here has a strong background in design, and the dictated rules and implementations we strive for reflects this. It is an area I want to improve in.
我经常*。这里的3位开发人员都没有强大的设计背景,我们努力争取的规则和实施反映了这一点。这是我想改进的一个领域。
#27
Liquid layout using % as unit can adapt to any screen.
使用%作为单位的液体布局可以适应任何屏幕。
Some layouts must use fixed column design. If there's table or image in the column, you have to use fixed column, or the table or image will break the column in liquid design. In grid layouts with heights of the grid normally fixed, it's better using fixed column or the widths may got uneven.
某些布局必须使用固定列设计。如果列中有表格或图像,则必须使用固定列,否则表格或图像将破坏液体设计中的列。在网格布局中,网格的高度通常是固定的,使用固定柱会更好,或者宽度可能不均匀。
It's upto the content of webpage to use elastic column or fixed column layout.
使用弹性柱或固定列布局是网页的内容。
#1
And here, as expected, comes the usual canard: “long lines are too hard to read”.
在这里,正如预期的那样,通常的鸭子会出现:“长线难以阅读”。
[Citation needed], folks.
人们,[需要引证]
See http://webusability.com/article_line_length_12_2002.htm for a summary of actual research in this area. A number of these, plus http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.asp, find that although users express a preference for moderate line lengths, reading speeds do not sharply drop off with ‘long’ lines; in fact many show increased speeds with the longer settings.
有关该领域实际研究的摘要,请参见http://webusability.com/article_line_length_12_2002.htm。其中一些,加上http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.asp,发现尽管用户表达了对中等线长度的偏好,但阅读速度不会因“长”线而急剧下降;事实上,许多人通过更长的设置显示出更高的速度
As long as it's not ridiculously long, and taking care to use a decent amount of leading, long lines are not generally a real issue at today's typical browser widths and default font sizes. (If you're one of those designers that loves to use teeny-tiny type for everything, it could be an issue, but then you're already making it impossible to read with the flyspeck text. Stop it!)
只要它不是非常长,并且注意使用相当数量的前导,长线通常不是当今典型的浏览器宽度和默认字体大小的真正问题。 (如果你是那些喜欢使用极小类型的设计师之一,那可能是一个问题,但是你已经无法用flyspeck文本阅读了。停止它!)
So as it's only an option of user preference that prefers medium-short lines, let us users decide how much screen space we want to give the web site to get our work done. We're the ones best-equipped to know. If you decide you know definitively best you're likely to waste space, or, if you guessed too long, make us scroll back and forth sideways to read the text — and that really is a readability nightmare.
因此,只有用户偏好的选项更喜欢中短线,让我们用户决定我们希望为网站提供多少屏幕空间来完成我们的工作。我们是最有能力知道的人。如果你决定最终知道最好你可能会浪费空间,或者,如果你猜太久,让我们来回滚动来阅读文本 - 这真的是一个可读性的噩梦。
If you want to protect us from ourselves, you can compromise by specifying a min-width and max-width in ‘em’ units so that the page is responsive to liquid layout, but doesn't get stretched to extremes.
如果你想保护我们自己,你可以通过以'em'单位指定最小宽度和最大宽度来妥协,这样页面就能响应液体布局,但不会被拉伸到极端。
But otherwise, the best reason to design fixed-width is indeed that it is easier, especially for someone with a fixed-2D-grid view of the world and static visual-design tools like Photoshop.
但除此之外,设计固定宽度的最佳理由确实是它更容易,特别是对于具有固定2D网格视图的人和像Photoshop这样的静态视觉设计工具。
#2
It's already a pain to make a website that renders correctly across all popular browsers; if you also want it to render correctly at all text sizes, it's quite a lot of work. A lot of web developers design their sites for the default font size and try to support fonts that are either a little bit larger or a little bit smaller. (You might be interested in this dated but relevant piece from Jakob Nielsen.)
制作一个能够在所有流行浏览器中正确呈现的网站已经很痛苦;如果你还希望它能在所有文本大小上正确呈现,那么这是相当多的工作。许多Web开发人员将他们的站点设计为默认字体大小,并尝试支持更大或更小的字体。 (你可能会对雅各布尼尔森这篇过时但相关的文章感兴趣。)
As for fixed-width sites, it's hard to say. Personally, I suspect that a lot of web designers just like to feel like they have a lot of control over their look and feel, and think the site looks "ugly" when you stretch it too far, so they don't let you do it. Probably not wise, but there you go.
对于固定宽度的网站,很难说。就个人而言,我怀疑很多网页设计师都觉得他们对自己的外观和感觉有很大的控制感,并认为当你将它拉得太远时,网站看起来很“丑陋”,所以他们不让你做它。可能不明智,但你去了。
#3
Now I would like to ask real experts on this topic -- I'm not a web designer -- why fixed width layout are still that popular and if there are really good reasons for it.
现在我想问一下关于这个主题的真正专家 - 我不是网页设计师 - 为什么固定宽度布局仍然很受欢迎,如果它有很好的理由。
Ah, both subjective and argumentative. I'm sure my argument won't convince you, but here's one really good reason, IMHO:
啊,主观和议论。我相信我的论点不会说服你,但这是一个非常好的理由,恕我直言:
Presentation.
Just like a movie, the director has an experience in mind for the viewer. They frame the movie just so. They move the action at a given pace for the emotion they are trying to invoke in the viewer. Even though DVDs have had the "angle" feature since inception, few movies have ever given viewers the opportunity to watch the film from a different point of view, and if they have that viewpoint was still under the control of the director.
就像电影一样,导演对观众有一种体验。他们为这部电影构图。他们以给定的速度移动动作,以寻求他们试图在观众中调用的情感。尽管DVD从一开始就具有“角度”特征,但很少有电影能够让观众有机会从不同的角度观看电影,如果他们有这种观点仍然在导演的控制之下。
Now, any old sap can throw up a website, and for the most part they aren't interested in anything more than the content.
现在,任何旧的汁液都可以抛出一个网站,而且大多数情况下他们对内容不感兴趣。
But real designers fully understand that the design must be understood as a whole. A wide layout has a very different impact on people than a multicolumn or thin layout. Reader eyes move in a certain pattern, and the text is intended to pull the reader along a path.
但真正的设计师完全明白,设计必须作为一个整体来理解。与多列或薄布局相比,宽广布局对人的影响截然不同。读者眼睛以某种模式移动,文本旨在沿着路径拉动读者。
Those who claim that every layout should have certain features are shortsighted. There are no universally true 'rules', and trying to make an expanding layout a rule is shortsighted at best, and arrogant at worst.
声称每个布局都应具有某些功能的人都是短视的。没有普遍真实的“规则”,试图扩大布局规则充其量只是短视,最坏的是傲慢。
-Adam
#4
Here are my $0.02 and they are worth exactly what you paid for them (and if that's not a perfect example of the current economic situation... :-))
这是我的0.02美元,他们的价值正是你为他们付出的(如果这不是当前经济形势的完美例子...... :-))
The layout of a website should be dictated by the overall user experience. This is in part determined by the accessibility, in part by the design, in part by the functionality:
网站的布局应由整体用户体验决定。这部分取决于可访问性,部分取决于设计,部分取决于功能:
- Accessibility - as several people pointed out, letting the website use the full width of the browser without any control can result in quite a long lines that make it hard to read[1]. Making the text automatically layout in multiple columns is a potential answer to this problem, but it's really hard to achieve with CSS (that's gotta be the worst tool for doing layout humanity ever devised, but that's a separate topic) and is fraught with other issues as well.
可访问性 - 正如几位人士所指出的那样,让网站在没有任何控制的情况下使用浏览器的整个宽度会导致相当长的行,这使得难以阅读[1]。使文本自动布局在多列中是这个问题的一个潜在答案,但是用CSS实现真的很难(这是制作布局人性化的最糟糕的工具,但这是一个单独的主题)并且充满了其他问题同样。
I should note that you do have a point - most websites with fixed width do suck on high-DPI because they don't take into account the changed font size. However, that's not an inherent problem of the fixed width design; I've seen it with fluid designs as well.
我应该注意到你确实有一点 - 大多数具有固定宽度的网站都会对高DPI感到厌烦,因为它们没有考虑到改变的字体大小。然而,这不是固定宽度设计的固有问题;我也看过流体设计。
[1] No, I don't have a citation. I, however, have tried reading on full-screen on my 24" 1920x1200 96dpi [2] and gotta tell you - after 15 minutes my neck is cramping from the constant turning of my head.
[1]不,我没有引用。然而,我已经尝试在我的24英寸1920x1200 96dpi [2]上全屏阅读,并且要告诉你 - 15分钟后,我的脖子因不断转过头而痉挛。
[2] The typical user still runs 1024x768 or 1280x1024 (based on instrumentation from the product I work on, with about little bit less than 10mln installs for the latest version). So yeah, I am not the typical user.
[2]典型的用户仍然运行1024x768或1280x1024(基于我工作的产品的仪器,最新版本的安装量略少于10mln)。所以是的,我不是典型的用户。
-
Design - most modern designs are very rich on graphical and video elements. Most graphical elements do not scale well with the document reflow and video does not scale at all. (I would again blame this on CSS - it's support for dynamic resizing of images is lacking some basic operations and there is aboslutely no support for building and control of the visual tree. But I digress again :-)) As such, disegners opt in for the easier approach.
设计 - 大多数现代设计都非常丰富的图形和视频元素。大多数图形元素无法与文档重排进行良好的扩展,视频根本无法扩展。 (我会再次把它归咎于CSS - 它支持动态调整大小的图像缺乏一些基本的操作,而且很可能不支持构建和控制可视化树。但我再次离题:-))因此,提供者选择加入为了更容易的方法。
-
Functionality - fluid layout is really good for dealing with big text chunks like documents. However, quite a few modern websites are in effect applications, not documents. They have multiple elements and controls and increasing the area on which these elements are scatered makes it harder for the user to keep all of them in focus.
功能 - 流畅的布局非常适合处理像文档这样的大文本块。但是,相当多的现代网站实际上是应用程序,而不是文档。它们具有多个元素和控件,并且增加了这些元素被占用的区域,使得用户更难以将所有元素保持在焦点上。
Couple examples:
- two control groups that are aligned at the left and the right end will be too far away from each other in full-screen width. Note: that can be alleviated by choosing to always keep all the controls grouped together, like most desktop applications do (almost all desktop apps keep all toolbars left-aligned).
- a picture/video and associated text below it. On full screen there are two possible approaches for fluid layout: a) scale the picture to the full width, at which point the text is visually lost b) leave the picture the same width, but let the text flow the full width, at which point the picture is visually lost.
在左屏幕和右端对齐的两个控制组在全屏宽度上彼此相距太远。注意:可以通过选择始终将所有控件组合在一起来缓解这种情况,就像大多数桌面应用程序一样(几乎所有桌面应用程序都保持所有工具栏左对齐)。
下面的图片/视频及相关文字。在全屏幕上有两种可能的流体布局方法:a)将图片缩放到整个宽度,此时文本在视觉上丢失b)使图片保持相同的宽度,但让文本流动整个宽度,在此处指出图片在视觉上丢失了。
I guess my point is that the fluid layout is not the Holy Grail of all layouts and there are scenarios where it's not applicable. The designer and the developer of the webapp should choose the appropriate layout and implement it so that it meets the needs of the target users, delivers the best experience of the product functionality and adapts to the user environment.
我想我的观点是流体布局不是所有布局的圣杯,并且有些场景不适用。 webapp的设计者和开发者应该选择适当的布局并实现它,以便满足目标用户的需求,提*品功能的最佳体验并适应用户环境。
#5
I suspect that most web developers go for fixed width because it's by far easier to develop such a site (in addition, many Content Management Systems only offer a fixed-width layout). Getting a dynamic layout to work well & correctly in different browsers is more tricky - but it is definity doable (I'm just recently working on that issue ;-).
我怀疑大多数Web开发人员都采用固定宽度,因为开发这样一个站点要容易得多(此外,许多内容管理系统只提供固定宽度的布局)。让动态布局在不同的浏览器中正常和正确地工作是更棘手的 - 但它是可靠的(我最近刚刚在这个问题上工作;-)。
And I do agree with you - I want web pages that dynamically adjust their contents to the browser size that I as the 'customer' like to work with (whether that's small or large). I don't like to be patronized into "not using my browser in full-screen mode" or anything the like...
我同意你的看法 - 我希望网页能够动态调整其内容,使其成为我作为“客户”喜欢使用的浏览器大小(无论是小还是小)。我不喜欢光顾“不在全屏模式下使用我的浏览器”或类似的东西......
#6
You might try zooming in. Most modern browsers will zoom the whole page by default, not just the text. This preserves the page layout and uses more of your screen. Usually the shortcut is ctrl + + and ctrl + -. It works well on my laptop, at least
您可以尝试放大。大多数现代浏览器默认会缩放整个页面,而不仅仅是文本。这样可以保留页面布局并使用更多屏幕。通常快捷键是ctrl + +和ctrl + - 。至少在我的笔记本电脑上运行良好
#7
[Forget my mention of the windowmanagement, it wasnt on topic]
[忘记我提到的窗口管理,它不是主题]
I currently run a big internet-community and we'll switch to fixed-width (for 1024px) design asap because we only get problems currently using a dynamic-width-layout: You cant rely on anything, and (the biggest problem imho) text gets to long, so there are only a few lines but the lines themself are much to long to overview.
我目前运行一个大的互联网社区,我们将尽快切换到固定宽度(1024px)设计,因为我们目前只使用动态宽度布局遇到问题:你不能依赖任何东西,(最大的问题是imho)文本变得很长,所以只有几行但是这些行本身很难概述。
#8
Readability and Predictability
You need to know how things will be displayed to be sure it will be readable and pleasant to the eyes. By using a fixed width, you know exactly (almost exactly because of cross-browser support) what your users will see.
你需要知道如何显示事物,以确保它的可读性和愉悦性。通过使用固定宽度,您可以准确地知道(几乎完全是因为跨浏览器支持)用户将看到的内容。
However fixed-width designs would be a thing from the past if browsers could support correctly exactly 2 CSS properties:
然而,如果浏览器能够正确支持2个CSS属性,那么固定宽度设计将成为过去的事情:
min-width
max-width
That would allow designers to design web sites that would be flexible and predictable. No more surprises and users can use whatever resolution they want.
这将使设计人员能够设计出灵活且可预测的网站。没有更多的惊喜,用户可以使用他们想要的任何分辨率。
#9
In my experience, it is for two reasons:
根据我的经验,这有两个原因:
1) Speed - it is generally faster to write a web page in fixed with, rather than trying to write one that resizes correctly at more than a small number of resolutions.
1)速度 - 编写一个固定的网页通常更快,而不是尝试编写一个在超过少量分辨率下正确调整大小的网页。
2) The designer of the web site isn't the ultimate approver of what goes into production - if you try to work with a flow instead of fixed layout you get questions about why it looks different on Sallys' PC vs the Big bosses, and why can't you move this over to here, etc, which are easier to fix by moving to a fixed layout.
2)网站的设计者并不是投入生产的最终批准者 - 如果你尝试使用流程而不是固定布局,你会得到关于为什么它在Sallys的PC和Big Boss上看起来不同的问题,以及为什么你不能把它移到这里等,通过移动到固定的布局更容易修复。
#10
Tabbed Browsers
Since I use a tabbed browser for day to day use, resizing my window every time I switch tabs is actually a bit of a hassle. I have the window set to the maximum usable width for my purposes, and to accommodate the "largest" tab that is open. For the remaining tabs, having fluid layouts is actually kind of annoying and distracting. Items and text jump around and change position depending on how I may have resized my window for another tab. Also, fluid layouts result in uncomfortably wide blocks of short (vertically) text.
由于我使用标签式浏览器进行日常使用,每次切换标签时调整窗口大小实际上都有点麻烦。为了我的目的,我将窗口设置为最大可用宽度,并容纳打开的“最大”选项卡。对于剩余的标签,具有流体布局实际上是令人烦恼和分散注意力的。项目和文本跳转并根据我为另一个选项卡调整窗口大小的方式更改位置。而且,流体布局导致令人不舒服的宽的短(垂直)文本块。
For me, it's a lot easier as a reader to keep my eyes tracking properly on narrower blocks of text with lots of vertical scroll, and it's much easier when sites I'm familiar with stay the same size so that the layout and positioning is predictable, regardless of what I've done to my window to accommodate other tabs. I actually used to be a big fan of fluid layouts, but I find more and more that I prefer fixed layouts now that I use a tabbed browser.
对我来说,作为一个读者可以更容易地让我的眼睛正确地跟踪有较多垂直滚动的较窄的文本块,并且当我熟悉的网站保持相同的大小以便布局和定位可预测时更容易,不管我在窗口做了什么,以容纳其他标签。我实际上曾经是流畅布局的忠实粉丝,但我现在发现越来越多我更喜欢使用标签式浏览器的固定布局。
#11
I think the question shouldn't be "Why would you choose a fixed-width design?" it should be "why wouldn't you?"
我认为问题不应该是“你为什么选择固定宽度的设计?”它应该是“你为什么不呢?”
Firstly, you need to cater for the lowest-common denominator. Many developers will be running on screens with resolutions like 1680x1050, 1920x1200 and 1280x1024. Some users will be using 1024x768, which I personally consider the lowest resolution you need to cater for (thank God it's not 800x600 anymore). If you fix the width to 960-1000 pixels then you don't run the problem of developers unintentionally making pages that can't be viewed without scrolling on a monitor with less than 1600 pixels (wide). Believe me it happens.
首先,您需要迎合最低标准。许多开发人员将在1680x1050,1920x1200和1280x1024等分辨率的屏幕上运行。有些用户会使用1024x768,我个人认为这是你需要满足的最低分辨率(感谢上帝,它不再是800x600)。如果您将宽度固定为960-1000像素,那么您不会遇到开发人员无意中制作无法在不超过1600像素(宽)的显示器上滚动而无法查看的页面的问题。相信我,它发生了。
Layout on any non-trivial Webpage is hard. Throw in cross-browser support such that your page not only works but looks reasonably consistent and it's a huge problem. Now try to throw in variable width and it just gets that much worse if not impossible. Look at the payoff too: who is it going to benefit? A small minority of users that have high resolutions and actually want to stretch that content across the entire screen. I have a widescreen monitor and I won't maximize my browser for instance. Many people are like me in this respect.
任何非平凡网页上的布局都很难。抛弃跨浏览器支持,使您的页面不仅有效,而且看起来相当一致,这是一个很大的问题。现在尝试抛出可变宽度,如果不是不可能的话,它会变得更糟。看看收益:谁会受益?少数用户具有高分辨率并且实际上希望在整个屏幕上扩展该内容。我有一个宽屏显示器,我不会最大化我的浏览器。在这方面很多人都像我一样。
Consider another problem: CSS. CSS s good for many things but is a royal pain in many others. For one thing. Now browser box model differences aside, there are still many quirks with how different browsers handle CSS and even if there weren't there are many trivial things CSS can't do and the only workaround is to do things by pixel.
考虑另一个问题:CSS。 CSS对许多事情有好处,但在许多其他事情上是一种皇室般的痛苦。一方面。现在除了浏览器盒模型差异之外,还有许多不同浏览器如何处理CSS的怪癖,即使没有很多CSS无法做到的琐碎事情,唯一的解决方法是按像素执行操作。
As a concrete example, I'm doing some tables at the moment that are bursting at the seams. I'm reloading the contents with an Ajax call and replacing the contents. Now I at first tried to fix the widths of the columns with percentages. Doing it this way would be a prerequisite for not fixing the width. Firefox treated those as a suggestion and would resize them anyway even when it arguably didn't have to. I didn't get satisfactory results until I fixed the widths in pixels.
作为一个具体的例子,我正在做一些在接缝处爆裂的桌子。我正在用Ajax调用重新加载内容并替换内容。现在我开始尝试用百分比来修复列的宽度。这样做是未固定宽度的先决条件。 Firefox将这些视为一种建议,并且无论如何都会调整大小,即使它可能没有必要。在我以像素为单位修正宽度之前,我没有得到满意的结果。
At the end of the day no website really cares if it stretches across 1600 pixels or not. That's what it comes down to.
在一天结束时,没有网站真正关心它是否延伸到1600像素。这就是它归结为什么。
#12
I've worked with a lot of artists. They design a layout to be pleasing and clear. They want the presentation to match what they designed. Artist-driven design leads to fixed-width. For brochure sites, fixed width makes a lot of sense.
我和很多艺术家合作过。他们设计的布局令人愉悦和清晰。他们希望演示文稿与他们设计的内容相匹配。艺术家驱动的设计导致固定宽度。对于宣传册网站,固定宽度很有意义。
For sites with rapidly-changing content (news or shopping, or most anything driven by a CMS), I much prefer fluid, full-screen designs.
对于内容快速变化的网站(新闻或购物,或大多数由CMS驱动的网站),我更喜欢流畅的全屏设计。
#13
One of the biggest concerns that fixing the width of a website solves is readability. If you let a site be arbitrarily wide and have a block of text using that entire width, it becomes very difficult for people to read. If you make the font size bigger to compensate, then you destroy the experience for people with smaller screens.
修复网站宽度解决的最大问题之一是可读性。如果你让网站任意宽,并且使用整个宽度的文本块,那么人们就很难阅读。如果你更大的字体大小来补偿,那么你会破坏屏幕较小的人的体验。
On the other hand, if your content is visual or modular and you can make it fill up the page more intelligently, you might have a case for a totally fluid layout.
另一方面,如果您的内容是可视化的或模块化的,并且您可以更加智能地填充页面,那么您可能需要完全流畅的布局。
But I agree with the others who question why you would maximize a browser on such a big display. Why not make your browser window smaller? You'll be more productive and you'll stop worrying about it at the same time.
但我同意其他人质疑为什么要在如此大的显示器上最大化浏览器。为什么不让浏览器窗口更小?你会更有效率,同时你也不会担心它。
Many browsers do a better job of scaling websites to be larger than they used to; Firefox 3, at least, grows the entire page when you zoom in, not breaking the layout.
许多浏览器在将网站扩展到比以前更大的方面做得更好;至少Firefox 3在放大时会增加整个页面,而不会破坏布局。
#14
If you want it to take up more screen real estate, use a lower resolution. This can be useful if you're displaying a website on a large monitor up on a wall for public view. Otherwise, take @theomega's advice and use the rest of your screen for other windows.
如果您希望它占用更多的屏幕空间,请使用较低的分辨率。如果您在墙上的大型显示器上显示网站以供公众查看,这将非常有用。否则,请接受@theomega的建议,并将其余的屏幕用于其他窗口。
As for a little (of the very little) of what I know about web design and fixed width sites:
至于我对网页设计和固定宽度网站的一点知识(很少):
- They tend to make good use of white space and draw your focus down the page. Cluttering up the page by cramming every last corner with content is what designers call "visual intimidation." It's difficult to figure out what's important versus what's not.
- They feel more "finished", like a picture in a frame instead of like a photo print thumb-tacked up on a cork board.
他们倾向于充分利用空白区域并将注意力集中在页面上。设计师称之为“视觉恐吓”,将每一个角落都塞满内容,使页面混乱。很难弄清楚什么是重要的而不是什么。
他们感觉更“完美”,就像一个框架中的图片,而不是像在软木板上用拇指钉上的照片打印。
#15
"It has a resolution of 1920x1200, so all fixed-width sites waste space The form factor is only 15". So I have to use larger fonts and the text won't fit into these crammed layouts any more, sometimes even getting obstructed by other elements."
“它的分辨率为1920x1200,所以所有固定宽度的网站都浪费空间,外形尺寸仅为15”。所以我必须使用更大的字体,文字将不再适合这些填充的布局,有时甚至被其他元素阻挡。“
There is a good reason for that. If the paragraph are stretched too wide, it gets more difficult to read. Humans need a "break" after about 15 to 20 words and that is EXACTLY why we don't have books that are very wide.
这是有充分理由的。如果段落拉得太宽,则更难以阅读。人类在大约15到20个单词后需要“休息”,这正是为什么我们没有非常宽的书籍。
The higher resolution allows you to have MORE details BUT it also depends on HOW you use the space. I never maximize the browser and PC's are built for window multitasking, not ONE window at a time.
较高的分辨率允许您拥有更多细节,但它还取决于您如何使用空间。我从来没有最大化浏览器和PC是为窗口多任务而建,而不是一次只有一个窗口。
#16
The whole point of being able to adjust the size of your browser window is to better see the content of a web page, in the way that suits your situation. If the page isn't going to adjust, why not just make browser windows a single, fixed size?
能够调整浏览器窗口大小的重点是更好地以适合您情况的方式查看网页内容。如果页面无法调整,为什么不将浏览器窗口设置为固定大小?
If I have a big monitor, I want to be able to stretch my window out and have the content correctly fill it. If I need space for another window, I want to be able to shrink my browser window down and have the content correctly adjust by changing the layout (until a certain minimum point, and then by switching to a scroll bar, of course.)
如果我有一个大显示器,我希望能够拉出我的窗口,让内容正确填充它。如果我需要空间用于另一个窗口,我希望能够缩小我的浏览器窗口并通过更改布局来正确调整内容(直到某个最小点,然后切换到滚动条,当然。)
#17
Fixed width layouts are perfectly acceptable.
固定宽度布局是完全可以接受的。
Fluid layouts are nice, but are more difficult to implement, especially if there are more than two columns and source div order is important.
流体布局很好,但实现起来比较困难,特别是如果有两列以上且源div顺序很重要。
Line length is an issue regarding readability, but this interacts with font size. So you have to balance width against likely font sizes on screen.
行长度是有关可读性的问题,但这与字体大小相互作用。因此,您必须在屏幕上平衡宽度与可能的字体大小。
Nowadays, it's reasonable to assume that 1024 x 768 and up is the vast majority of the desktop user market, so you can safely design for 960 px fixed width -- for screen media type.
如今,假设1024 x 768及以上是桌面用户市场的绝大部分是合理的,因此您可以安全地设计960像素的固定宽度 - 用于屏幕媒体类型。
A couple of important constraints:
一些重要的限制因素:
- ensure is that horizontal scrolling is never required by the user
- if conversions are an issue, make sure that clickable things -- particularly "calls to action" or anything than makes your cash register go "ka-ching" should not fall to the right of the 770th pixel or so -- just in case.
确保用户永远不需要水平滚动
如果转换是一个问题,请确保可点击的东西 - 特别是“号召性用语”或任何使你的收银机变为“ka-ching”的东西不应该落在第770个像素左右 - 以防万一。
But another consideration is handheld media. You should provide alternate CSS for handheld media type. Many of these screens are under 400 px wide.
但另一个考虑因素是手持媒体。您应该为手持媒体类型提供备用CSS。其中许多屏幕宽度不到400像素。
Delivering a site that looks good and functions on a wide variety browsers, devices, display widths and viewport sizes is a moving target and continuous challenge.
提供一个看起来很好并且可以在各种浏览器,设备,显示宽度和视口大小上运行的网站是一个不断变化的目标和持续的挑战。
As regards the filmstarts.de site, it is definitely a mess, but the problem is not that it is a fixed width layout, but rather with how the layout is designed and implemented. There are good and bad implementations of fixed width layouts, just like there are good and bad implementations of fluid layouts, or semi-fluid layouts with fixed width elements, etc.
至于filmstarts.de网站,它绝对是一团糟,但问题不在于它是固定宽度的布局,而是布局的设计和实现方式。固定宽度布局有好的和坏的实现,就像流体布局的好的和坏的实现,或具有固定宽度元素的半流体布局等。
#18
I put it down to laziness. Fixed width layouts are simply easier to design and make look nice because you do not need to worry about the size changing. This, for example, makes it really easy to add images, since you know what size the layout will be.
我把它归结为懒惰。固定宽度布局更容易设计,使外观更好,因为您不必担心尺寸变化。例如,这使得添加图像变得非常容易,因为您知道布局的大小。
Personally, fixed-width websites really irritate me. I like to use large monitors. I paid a lot of money for them, so I'd like to make use to make use of them instead of having most of it be left blank. This is made even worse by sites which refuse to get larger if I increase the font size. I don't have the best eyesight and often use larger fonts to read text on websites and nothing is worse than a fixed-width layout leaving me with three words per line and a mostly blank screen...
就个人而言,固定宽度的网站真的让我很恼火。我喜欢使用大型显示器。我为他们付了很多钱,所以我想利用它们而不是把大部分都留空。如果我增加字体大小,拒绝变大的网站会更糟糕。我没有最好的视力,经常使用较大的字体来阅读网站上的文字,没有什么比固定宽度的布局更糟糕了,每行留下三个字,大部分是空白屏......
#19
As far as I'm aware while all the reasons cited are valid, the primary reason is that a lot of machines in monolithic institutions like banks and government orgs are still on fixed and somewhat archaic low resolutions. It's just the lowest common denominator sadly.
据我所知,虽然引用的所有理由都是有效的,但主要原因是像银行和*机构这样的单一机构中的许多机器仍处于固定且有些过时的低分辨率。遗憾的是,它只是最低的共同点。
#20
I personally like fixed width sites better. I am not forced to mess with my browser window to get a line size I can deal with. I personally find very long lines very hard to read. I also just think it looks better although that is 100% completely subjective.
我个人更喜欢固定宽度的网站。我没有*乱用我的浏览器窗口来获得我可以处理的行大小。我个人觉得很长很难读。我也认为它看起来更好,尽管这是100%完全主观的。
I have designed and worked with both. Some aspects of variable width sites make displaying data easier. The only problem I have had with them is due to right aligned navigation which was a little messy when it could move based on the user's browser setting.
我设计并与两者合作。可变宽度站点的某些方面使得显示数据更容易。我遇到的唯一问题是由于右对齐导航,当它可以根据用户的浏览器设置移动时有点乱。
My final answer - both are fine and each have their place.
我的最终答案 - 两者都很好,每个人都有自己的位置。
#21
I just came across this site, which actually has a link in the top right corner that lets you switch between fixed and fluid.
我刚刚看到这个网站,它实际上在右上角有一个链接,可以让你在固定和流畅之间切换。
#22
Long lines of text can be difficult to read. For the website I work on we limit the width for usability and readability. We have also designed our site to scale well using CTRL-+ to zoom.
长行的文字可能难以阅读。对于我工作的网站,我们限制了可用性和可读性的宽度。我们还设计了我们的网站,以便使用CTRL- +进行缩放。
#23
A major point for using fixed width is that the designer can actually control the way the webpage looks irrespective of browser environment. I see two reasons to use FW:
使用固定宽度的一个要点是,设计人员实际上可以控制网页的外观,无论浏览器环境如何。我看到使用FW的两个原因:
- The designer wants the webpage to look all the same.
- The designer lacks time/wish/... to test their page in different modes and in different browsers, and just avoids the risk of webpage layot starting flying around.
设计师希望网页看起来都一样。
设计师缺乏时间/愿望/ ......以不同的模式和不同的浏览器测试他们的页面,只是避免了网页开始飞来飞去的风险。
#24
I didn't make fixed-size layout until I switched to a 32 inches monitor. It is very hard to read the text if the lines goes over 32 inches. I've learned appreciate text that do not span over more than 1,000 pixels, and I have switched to fixed layout since.
在切换到32英寸显示器之前,我没有制作固定尺寸的布局。如果线条超过32英寸,则很难阅读文本。我已经学会了不超过1000像素的欣赏文字,我已经切换到固定布局了。
But I agree that reducing the content width to < 800px is a pain when you have a big monitor.
但我同意,当你有一个大显示器时,将内容宽度减少到<800px会很痛苦。
#25
Most users lack understanding of how to use a browser properly. When the day come such that users actually know how to use a computer then you will understand that fluid width is the obvious choice for web sites.
大多数用户都不了解如何正确使用浏览器。当用户真正知道如何使用计算机的那一天,您就会明白流体宽度是网站的明显选择。
#26
I am frequently forced too. None of the 3 developers here has a strong background in design, and the dictated rules and implementations we strive for reflects this. It is an area I want to improve in.
我经常*。这里的3位开发人员都没有强大的设计背景,我们努力争取的规则和实施反映了这一点。这是我想改进的一个领域。
#27
Liquid layout using % as unit can adapt to any screen.
使用%作为单位的液体布局可以适应任何屏幕。
Some layouts must use fixed column design. If there's table or image in the column, you have to use fixed column, or the table or image will break the column in liquid design. In grid layouts with heights of the grid normally fixed, it's better using fixed column or the widths may got uneven.
某些布局必须使用固定列设计。如果列中有表格或图像,则必须使用固定列,否则表格或图像将破坏液体设计中的列。在网格布局中,网格的高度通常是固定的,使用固定柱会更好,或者宽度可能不均匀。
It's upto the content of webpage to use elastic column or fixed column layout.
使用弹性柱或固定列布局是网页的内容。