你为什么选择固定宽度的设计?

正如预期的那样,这里出现了通常的谣言:长线太难读了。

[需要引文] 伙计们。

见 http://webusability.com/article_line_length_12_2002.htm 对该领域的实际研究进行总结。一些,加上 http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.asp ,发现尽管用户表示喜欢中等长度的线,但阅读速度不会随着长线而急剧下降;事实上,许多人在较长的设置下显示速度增加。

只要不是 长得离谱 在今天的典型浏览器宽度和默认字体大小下,注意使用相当数量的前导、长线通常不是真正的问题。(如果你是一个喜欢使用微小字体的设计师,这可能是一个问题,但是你已经使得用flyspeck文本阅读变得不可能了。住手!

因此,这只是用户偏好的一个选项,更喜欢中短线,让我们的用户决定我们要给网站多少屏幕空间来完成我们的工作。我们是最有能力知道的人。如果你确定你最清楚你可能会浪费空间,或者,如果你猜得太久,让我们来回滚动阅读文本这真的是 是 可读性的噩梦。

如果您想保护我们不受自己的伤害,您可以通过指定最小宽度和最大宽度(以__em__为单位),使页面响应液体布局,但不会被拉伸到极端。

但是,否则,设计固定宽度的最佳原因实际上是它更容易,特别是对于拥有固定二维网格世界视图和静态视觉设计工具(如Photoshop)的人来说。

制作一个能够在所有流行浏览器中正确呈现的网站已经是一件痛苦的事情;如果你也希望它能在所有文本大小下正确呈现,那就需要很多工作。许多Web开发人员设计他们的网站的默认字体大小,并尝试支持字体,要么大一点,要么小一点。(你可能对 this dated but relevant piece 来自Jakob Nielsen。)

至于固定宽度的网站,很难说。就我个人而言,我怀疑很多网页设计师只是喜欢感觉他们对自己的外观和感觉有很大的控制,并且认为当你把网站拉伸得太远时,网站看起来“难看”,所以他们不让你这么做。也许不明智,但你去吧。

现在我想请教真正的专家 关于这个话题——我不是一个网络 设计器——为什么固定宽度布局是 仍然很受欢迎,如果有的话 这是很好的理由。

啊,既主观又好辩。我相信我的论点不会让你信服,但有一个很好的理由,imho:

演示。

就像电影一样,导演有 经验 为观众着想。他们把这部电影框成这样。他们以给定的速度移动动作,以获得他们试图在观众中唤起的情感。尽管DVD从一开始就具有“角度”功能,但很少有电影能让观众有机会从不同的角度观看电影,而且如果他们有这样的观点,导演仍然控制着他们。

现在,任何旧的SAP都可以创建一个网站,而且在大多数情况下,他们对任何内容都不感兴趣。

但是真正的设计师完全理解设计必须被理解为一个整体。宽布局对人的影响与多列或薄布局不同。读者的眼睛以一定的方式移动,文本的目的是沿着一条路径拉动读者。

那些声称每种布局都应该具有某些特征的人是目光短浅的。没有普遍正确的“规则”,试图使一个扩大的布局规则最多是短视,最坏是傲慢。

-亚当

这是我的0.02美元,它们的价值正是你为它们支付的(如果这不是当前经济形势的完美例子…-)

网站的布局应该由整体用户体验决定。这部分由可访问性决定,部分由设计决定,部分由功能决定:

1. 可访问性-正如一些人指出的那样,让网站在没有任何控制的情况下使用浏览器的整个宽度可能会导致相当长的行,使其难以阅读[1]。使文本自动在多个列中布局是这个问题的一个潜在答案,但使用CSS确实很难实现(这肯定是人类设计的最糟糕的布局工具,但这是一个单独的主题),而且还充满了其他问题。

我需要注意的是,你确实有一个观点——大多数固定宽度的网站都会吸纳高dpi,因为它们不考虑字体大小的变化。然而,这并不是固定宽度设计的固有问题;我也见过流体设计。

不,我没有引文。不过,我试过在24英寸1920x1200 96dpi的屏幕上阅读,我得告诉你——15分钟后,我的脖子因为不断的转过头而抽筋。

[2]典型的用户仍然运行1024x768或1280x1024(基于我工作的产品中的检测,对于最新版本,安装量大约小于10mln)。所以是的,我不是典型的用户。

2. 设计-大多数现代设计在图形和视频元素上都非常丰富。大多数图形元素在文档回流时无法很好地缩放,而视频则完全无法缩放。(我再次将此归咎于CSS——它对图像动态调整大小的支持缺乏一些基本操作,而且非常不支持构建和控制可视化树。但我再次离题:(-)因此,退伍军人选择了更简单的方法。

3. 功能性-流畅的布局非常适合处理像文档这样的大文本块。然而,相当多的现代网站实际上是应用程序,而不是文档。它们有多个元素和控件,并且增加了这些元素分散的区域,这使得用户很难集中所有元素。

几个例子:

• 左右两端对齐的两个控制组在全屏宽度上彼此距离过远。注意:这可以通过选择始终将所有控件分组在一起来减轻,就像大多数桌面应用程序那样(几乎所有桌面应用程序都保持所有工具栏保持对齐)。
• 图片/视频及其下面的相关文本。全屏显示有两种可能的流体布局方法: a)将图片缩放到全宽,此时文本将在视觉上丢失。 b)保持图片的宽度相同,但让文本以全宽显示,此时图片将在视觉上丢失。

我想我的观点是,流体布局并不是所有布局的圣杯,在某些情况下,它不适用。webapp的设计者和开发者应该选择合适的布局并实现它,以满足目标用户的需求,提供产品功能的最佳体验并适应用户环境。

我怀疑大多数Web开发人员使用固定宽度,因为开发这样的网站要容易得多(此外,许多内容管理系统只提供固定宽度的布局)。 让一个动态布局在不同的浏览器中正常工作要困难得多,但这是可以确定的(我最近正在研究这个问题;-)。

我同意你的观点-我希望网页能够动态地调整其内容以适应浏览器的大小 我是“客户” 喜欢和(无论是小的还是大的)一起工作。我不喜欢被人光顾到“不在全屏模式下使用我的浏览器”之类的事情…

你可以试着放大。大多数现代浏览器默认情况下会缩放整个页面,而不仅仅是文本。这将保留页面布局并使用更多屏幕。通常快捷方式是ctrl++和ctrl+-。至少在我的笔记本电脑上很好用

[忘记我提到的WindowManagement,这不是主题]

我目前经营着一个大的互联网社区,我们会尽快切换到固定宽度(1024px)的设计,因为我们目前使用动态宽度布局时只遇到问题:你不能依赖任何东西,以及(最大的问题imho) 文本变长了,所以只有几行,但它们本身的行太长了。 .

可读性和可预测性

你需要知道事物将如何显示,以确保它是可读的和令人愉快的眼睛。通过使用固定的宽度,您可以准确地(几乎完全是因为跨浏览器支持)了解用户将看到什么。

然而 如果浏览器能够正确地支持,固定宽度的设计将是过去的事情。 二 CSS属性:

最小宽度

最大宽度

这样设计人员就可以设计出 灵活且可预测 . 没有更多的惊喜,用户可以使用他们想要的任何分辨率。

根据我的经验,这有两个原因:

1)速度-通常情况下,使用固定格式编写网页的速度要快,而不是尝试编写一个以超过少量分辨率正确调整大小的网页。

2)网站的设计者并不是最终批准进入生产的东西的人——如果你试图用流程而不是固定布局工作,你会问到为什么Sallys的电脑和大老板看起来不一样,为什么你不能把它移到这里,等等,这些问题很容易通过移动到固定布局来解决。

选项卡浏览器

由于我每天都使用带选项卡的浏览器,所以每次切换选项卡时调整窗口大小实际上有点麻烦。我将窗口设置为最大可用宽度,以适应打开的“最大”选项卡。对于其余的选项卡,具有流畅的布局实际上有点烦人和分散注意力。项目和文本跳转并更改位置,具体取决于我如何为另一个选项卡调整窗口大小。此外,流畅的布局会导致短(垂直)文本块过宽。

对于我来说,作为一个读者,让我的眼睛在有很多垂直滚动的狭窄的文本块上正确地跟踪要容易得多,而且 许多的 当我熟悉的站点保持相同的大小,这样布局和定位就更容易预测,不管我对窗口做了什么来容纳其他选项卡。实际上,我曾经是流体布局的忠实粉丝,但现在我使用选项卡式浏览器,我发现越来越多的人更喜欢固定布局。

我认为问题不应该是“你为什么选择固定宽度的设计?”应该是 “你为什么不呢?”

首先,你需要迎合最低公分母。许多开发人员将在分辨率为1680x1050、1920x1200和1280x1024的屏幕上运行。有些用户将使用1024x768,我个人认为这是您需要满足的最低分辨率(谢天谢地,它不再是800x600)。如果您将宽度固定为960-1000像素,那么就不会出现开发人员无意中制作页面的问题,这些页面不需要在小于1600像素(宽)的显示器上滚动就无法查看。相信我,这是真的。

任何非平凡网页的布局都是困难的。加入跨浏览器支持,这样你的页面不仅可以工作,而且看起来相当一致,这是一个巨大的问题。现在试着加入可变宽度,如果不可能的话,它会变得更糟。看看回报:谁会受益?少数具有高分辨率的用户实际上希望将内容扩展到整个屏幕。例如,我有一个宽屏显示器,我不会将浏览器最大化。在这方面,很多人和我一样。

考虑另一个问题:css。CSS对许多事情都有好处,但对许多其他事物来说却是一种皇家的痛苦。一方面。现在撇开浏览器盒模型的差异不谈,不同的浏览器处理CSS的方式仍然有很多奇怪之处,即使没有,CSS也不能做很多琐碎的事情,唯一的解决办法就是按像素做事情。

作为一个具体的例子,我正在做一些在接缝处破裂的桌子。我正在用Ajax调用重新加载内容并替换内容。现在我开始尝试用百分比来固定列的宽度。这样做是不固定宽度的先决条件。火狐将这些作为一个建议,并将调整它们的大小,即使可以说它不必这样做。直到我用像素固定了宽度,我才得到满意的结果。

在一天结束的时候,没有一个网站真正关心它是否延伸到1600像素。归根结底就是这样。

我和很多艺术家合作过。他们设计了一个令人愉快和清晰的布局。他们希望演示文稿与他们设计的内容相匹配。艺术家驱动的设计导致固定的宽度。对于小册子网站,固定宽度非常有意义。

对于内容变化迅速的网站(新闻或购物,或大多数由CMS驱动的内容),我更喜欢流畅的全屏设计。

固定网站宽度解决的最大问题之一是可读性。如果你让一个网站任意宽度,并且有一个使用整个宽度的文本块,那么人们就很难阅读了。如果你让字体大小更大以弥补,那么你就破坏了小屏幕用户的体验。

另一方面,如果您的内容是可视的或模块化的,并且您可以使它更智能地填充页面,那么您可能会得到一个完全流畅的布局。

但我同意其他人的看法,他们质疑为什么在如此大的显示器上最大化浏览器。为什么不缩小浏览器窗口?你的工作效率会更高,同时你也不再担心它了。

许多浏览器在将网站扩展到比以前更大的规模方面做得更好;至少火狐3, grows the entire page when you zoom in ,而不是破坏布局。

如果你希望它占用更多的屏幕房地产,请使用较低的分辨率。如果你把一个网站放在一个大屏幕上,放在墙上供公众观看,这会很有用。否则,采取@ theomega 的建议,并将屏幕的其余部分用于其他窗口。

至于我对网页设计和固定宽度网站所知的一点(非常少的一点):

• 他们往往会很好地利用空白,并把你的注意力拉下来。在页面的每一个角落都塞满了内容,这就是设计师所说的“视觉威胁”,很难找出什么是重要的,什么是不重要的。
• 它们感觉更“完成”,就像一幅画框中的照片,而不是一个钉在软木板上的照片指纹。

“它的分辨率为1920x1200,因此所有固定宽度的场地都浪费空间 形状系数只有15“。因此,我必须使用更大的字体,文本将不再适合这些拥挤的布局,有时甚至会受到其他元素的阻碍。”

这是一个很好的理由。如果段落太宽,就更难阅读。人类需要在15到20个单词后“休息”,这就是为什么我们没有非常宽广的书籍。

更高的分辨率允许您获得更多的细节,但也取决于您如何使用空间。我从来没有最大化浏览器和个人电脑是为窗口多任务,而不是一次一个窗口。

能够调整浏览器窗口大小的关键是以适合您的情况的方式更好地查看网页的内容。如果页面不需要调整,为什么不让浏览器窗口成为一个单一的固定大小呢?

如果我有一个大的显示器,我希望能够把我的窗口伸出来,让内容正确地填满它。如果我需要另一个窗口的空间,我希望能够缩小我的浏览器窗口,并通过更改布局(直到某个最小点,然后切换到滚动条)来正确调整内容。

固定宽度的布局是完全可以接受的。

流体布局是很好的,但更难实现,特别是如果有两个以上的列和源DIV顺序是很重要的。

线条长度是一个关于可读性的问题,但它与字体大小相互作用。所以你必须平衡宽度和屏幕上可能的字体大小。

现在,假设1024 x 768及更高版本是台式机用户市场的绝大多数,这样就可以安全地设计960像素的固定宽度——用于屏幕媒体类型。

几个重要的限制:

• 确保水平滚动 是 从未 用户要求
• 如果转换是一个问题,请确保 可点击的东西——特别是 “行动呼吁”或 把收银机打开 “嘉庆”不应该落在 第770像素左右的右边-- 以防万一。

但另一个考虑因素是手持媒体。您应该为手持媒体类型提供备用CSS。其中许多屏幕的宽度低于400像素。

提供一个在各种浏览器、设备、显示宽度和视区大小上运行良好的站点是一个移动的目标和持续的挑战。

至于filmstarts.de site,它肯定是一个混乱的地方,但问题不是它是一个固定宽度的布局,而是如何设计和实现布局。固定宽度布局有好的和坏的实现,就像流体布局有好的和坏的实现,或者具有固定宽度元素的半流体布局等。

我把它归结为懒惰。固定宽度的布局设计简单,而且美观,因为您不需要担心大小的变化。例如,这使得添加图像变得非常容易,因为您知道布局的大小。

就个人而言,固定宽度的网站真的让我恼火。我喜欢用大屏幕。我为他们付了很多钱,所以我想利用他们,而不是让大部分都留白。如果我增加字体大小,那些拒绝变大的网站会使情况更糟。我没有最好的视力,经常使用更大的字体来阅读网站上的文本,没有什么比固定宽度的版面更糟糕的了,每行只有三个字,屏幕几乎是空白的…

据我所知,虽然所引用的所有理由都是正确的,但主要原因是,像银行和政府机构这样的整体机构中的许多机器仍然处于固定的、有些陈旧的低分辨率上。不幸的是,这只是最低的公分母。

我个人更喜欢固定宽度的网站。我不必为了得到一个我能处理的行大小而把浏览器窗口搞得一团糟。我个人觉得很长的一行很难读懂。我也认为它看起来更好,尽管那是100%完全主观的。

我已经设计并与两者合作。可变宽度站点的某些方面使显示数据更加容易。我对它们唯一的问题是右对齐导航,当它可以根据用户的浏览器设置移动时,导航有点混乱。

我的最终答案- 两者都很好,各自有自己的位置 .

我刚看到这个网站,它在右上角有一个链接,可以让你在固定和流动之间切换。

http://developer.spikesource.com/wiki/index.php/Home

长行文字很难阅读。对于我工作的网站,我们限制了可用性和可读性的宽度。我们还设计了使用ctrl-+缩放的网站。

使用固定宽度的一个主要点是,不管浏览器环境如何,设计器实际上都可以控制网页的外观。我看到使用fw的两个原因:

1. 设计师希望网页看起来完全一样。
2. 设计师缺乏时间/愿望。在不同的模式和不同的浏览器中测试他们的页面,并避免网页外挂开始飞来飞去的风险。

我没有做固定尺寸的布局,直到我切换到32英寸的显示器。如果行超过32英寸,就很难阅读文本。我学会了欣赏不超过1000像素的文本,从那以后我就改成了固定布局。

但我同意,当您有一个大的监视器时,将内容宽度减少到<800px是一件痛苦的事情。

大多数用户不了解如何正确使用浏览器。当一天到来时,用户实际上知道如何使用计算机,那么你就会明白,流体宽度是网站的明显选择。

我也经常被强迫。这里的3个开发人员在设计方面都没有很强的背景,我们所追求的规则和实现反映了这一点。这是我想改进的领域。

液体排版以%为单位,可适应任何画面。

某些布局必须使用固定列设计。如果列中有表格或图像,则必须使用固定列,否则在液体设计中表格或图像会破坏列。 在网格高度通常固定的网格布局中,最好使用固定列,否则宽度可能不均匀。

使用弹性柱或固定柱布局是网页的内容。