更新: 我删除了我的动机因为它似乎分散了读者的注意力.这不是"为什么不让你的窗户变小".查看屏幕截图,由于宽度固定,您将看到受阻的文本.请参阅CSS中对"em/ex"表示法的引用.我想在这里进行真正的讨论.谢谢.
现在我想问一下这个主题的真正专家 - 我不是一个网页设计师 - 为什么固定宽度布局仍然很受欢迎,如果它有很好的理由.(欢迎您指出反对它的理由.)
相对来说(从一开始)设计你的布局是否太难了?似乎有些人甚至忘记了怎么做.
你有真正的理由,如可读性,只是不知道如何正确处理它?在这里,我指的是智慧,比如阅读更长的线条更难(这就是报纸使用列的原因) - 但是,宽度应该用em
和ex
来给出.
你被一些旧的指导方针强迫了吗?在黑暗的HTML时代,人们做了很多错事; 现在每个人最终都使用CSS,但也许这个只是坚持.
或者你喜欢我,想知道为什么每个人都这样做"错了"?
为了说明这个问题,我想首先给出反面例子的截图:
StackOverflow的(在这里我甚至不能看到什么会使它的任何努力找出解决方案)
电影明星(一个德国网站让自己变得难以理解 - 如果我不随身携带阅读玻璃)
这是一个积极的例子.它看起来像一个典型的固定网站(即使有透明的边框),但它不是:
Wiki软件上的网站 - 相关论坛
你怎么看?
更新:相关问题:这个和那一个.
正如预期的那样,这里出现了常见的鸭子:"长线难以阅读".
[编辑],人.
有关该领域实际研究的摘要,请参见http://webusability.com/article_line_length_12_2002.htm.其中一些,加上http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.asp,发现尽管用户表达了对中等线长度的偏好,但阅读速度不会因"长"线而急剧下降; 事实上,许多人通过较长的设置显示速度提高.
只要它不是非常长,并且注意使用相当数量的前导,长线通常不是当今典型的浏览器宽度和默认字体大小的真正问题.(如果你是那些喜欢使用极小类型的设计师之一,它可能是一个问题,但是你已经无法用flyspeck文本阅读了.停止它!)
因此,只有用户偏好的选项更喜欢中短线,让我们用户决定我们希望为网站提供多少屏幕空间来完成我们的工作.我们是最有能力知道的人.如果你确定你最终知道最好你可能会浪费空间,或者,如果你猜得太久,让我们来回滚动来阅读文本 - 这真的是一个可读性的噩梦.
如果你想保护我们自己,你可以通过以'em'单位指定最小宽度和最大宽度来妥协,这样页面就能响应液体布局,但不会被拉伸到极端.
但除此之外,设计固定宽度的最佳理由确实更容易,特别是对于具有固定2D网格视图的人和像Photoshop这样的静态视觉设计工具.
制作一个能够在所有流行浏览器中正确呈现的网站已经很痛苦; 如果你还希望它能在所有文本大小上正确呈现,那么这是相当多的工作.许多Web开发人员将他们的站点设计为默认字体大小,并尝试支持更大或更小的字体.(你可能会对雅各布尼尔森这篇过时但相关的文章感兴趣.)
对于固定宽度的网站,很难说.就我个人而言,我怀疑很多网页设计师都觉得他们对自己的外观和感觉有很大的控制感,并认为当你将它拉得太远时,网站看起来很"丑陋",所以他们不让你做它.可能不明智,但你去了.
现在我想问一下这个主题的真正专家 - 我不是一个网页设计师 - 为什么固定宽度布局仍然很受欢迎,如果它有很好的理由.
啊,主观和议论.我确信我的论点不会说服你,但这是一个非常好的理由,恕我直言:
介绍.
就像电影一样,导演也会为观众带来一种体验.他们就是这样制作电影的.他们以给定的速度移动动作,以寻找他们试图在观众中调用的情感.尽管DVD从一开始就具有"角度"特征,但很少有电影能够让观众有机会从不同的角度观看电影,如果他们有这种观点仍然在导演的控制之下.
现在,任何旧的傻瓜都可以抛出一个网站,而且大多数情况下他们对内容不感兴趣.
但真正的设计师完全明白,必须将设计理解为一个整体.与多列或薄布局相比,宽布局对人的影响截然不同.读者眼睛以某种模式移动,文本旨在沿着路径拉动读者.
声称每个布局都应具有某些功能的人都是短视的.没有普遍真实的"规则",试图扩大布局规则充其量只是短视,最坏的是傲慢.
-亚当
这是我的0.02美元,他们的价值正是你为他们付出的(如果这不是当前经济形势的完美例子...... :-))
网站布局应由整体用户体验决定.这部分取决于可访问性,部分取决于设计,部分取决于功能:
可访问性 - 正如几位人士指出的那样,让网站在没有任何控制的情况下使用浏览器的整个宽度会导致相当长的行,这使得难以阅读[1].使文本自动布局在多列中是这个问题的一个潜在答案,但是用CSS实现起来真的很难(这是制作布局人性化最糟糕的工具,但这是一个单独的主题)并且充满了其他问题同样.
我应该注意到你确实有一点 - 大多数具有固定宽度的网站都会对高DPI感到厌烦,因为它们没有考虑到改变的字体大小.然而,这不是固定宽度设计的固有问题; 我也看过流体设计.
[1]不,我没有引用.然而,我已经尝试在我的24英寸1920x1200 96dpi [2]上全屏阅读,并且要告诉你 - 15分钟后,我的脖子因不断转动我的脖子而痉挛.
[2]典型的用户仍然运行1024x768或1280x1024(基于我工作的产品的仪器,最新版本的安装量略少于10mln).所以是的,我不是典型的用户.
设计 - 大多数现代设计都非常丰富的图形和视频元素.大多数图形元素在文档重排时都不能很好地扩展,视频根本无法扩展.(我再次将其归咎于CSS - 它支持动态调整大小的图像缺乏一些基本操作,并且对于构建和控制可视树没有任何支持.但我再次离题:-))因此,提供者选择加入为了更容易的方法.
功能 - 流畅的布局非常适合处理像文档这样的大文本块.然而,相当多的现代网站实际上是应用程序,而不是文档.它们具有多个元素和控件,并且增加了这些元素被占用的区域,使得用户更难以将所有元素保持在焦点上.
情侣例子:
在左屏和右端对齐的两个控制组在全屏宽度上彼此相距太远.注意:可以通过选择始终将所有控件组合在一起来缓解这种情况,就像大多数桌面应用程序一样(几乎所有桌面应用程序都保持所有工具栏左对齐).
下面的图片/视频及相关文字.在全屏幕上有两种可能的流体布局方法:a)将图片缩放到全宽,此时文本在视觉上丢失b)使图片保持相同的宽度,但让文本流动整个宽度,在此处指出图片在视觉上丢失了.
我想我的观点是流体布局不是所有布局的圣杯,并且有些场景不适用.webapp的设计者和开发者应该选择适当的布局并实施它,以便满足目标用户的需求,提供产品功能的最佳体验并适应用户环境.