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

时间:2009-02-13 18:02:53

标签: layout

更新 我删除了我的动机,因为它似乎分散了读者的注意力。这不是“为什么不让你的窗户变小”。查看屏幕截图,由于宽度固定,您将看到受阻的文本。请参阅CSS中对“em / ex”表示法的引用。我想在这里进行真正的讨论。谢谢。


现在我想问一下这个主题的真正专家 - 我不是网页设计师 - 为什么固定宽度布局仍然很受欢迎,如果真的有的原因。 (欢迎你指出反对它的理由。)

  • 设置你的布局是否太难(从一开始)?似乎有些人甚至forgot how to do it

  • 你有真正的理由喜欢可读性,只是不知道如何正确处理它?在这里,我指的是智慧,比如阅读更长的线条更难(这就是报纸使用列的原因) - 但是,宽度应该使用em and ex给出。

  • 某些old guidelines被迫吗?在HTML的黑暗时代,人们做错了很多错误;现在每个人最终都使用CSS,但也许这个只是坚持。

  • 或者你是否喜欢我,想知道为什么每个人都这样做“错误”?

为了说明这个问题,我想首先给出反面例子的截图:

  • StackOverflow(我甚至无法看到会让它任何很难解决的问题)
  • Filmstarts(德国网站,如果我不随身携带阅读玻璃,会让自己变得难以理解)

这是一个积极的例子。它看起来像一个典型的固定站点(即使有透明的边框),但它不是:

Website on Wiki software - associated Forums

您怎么看?

更新相关问题:this onethat one

27 个答案:

答案 0 :(得分:15)

在这里,正如预期的那样,通常的鸭子会出现:“长线难以阅读”。

[引证需要] ,伙计们。

有关该领域实际研究的摘要,请参阅http://webusability.com/article_line_length_12_2002.htm。其中一些,加上http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.asp,发现尽管用户表达了对中等线长度的偏好,但阅读速度不会随着“长”线而急剧下降;事实上,许多人通过较长的设置显示速度提升。

只要它不是可笑的长,并且注意使用相当数量的前导,长线通常不是今天典型的浏览器宽度和默认字体大小的真正问题。 (如果你是那些喜欢使用极小类型的设计师之一,它可能是一个问题,但是你已经无法用flyspeck文本阅读了。停止它!)

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

如果你想保护我们自己,你可以通过以'em'单位指定最小宽度和最大宽度来妥协,这样页面就能响应液体布局,但不会被拉伸到极端。 / p>

但除此之外,设计固定宽度的最佳理由确实更容易,特别是对于具有固定2D网格视图的人和像Photoshop这样的静态视觉设计工具。

答案 1 :(得分:13)

制作一个能够在所有流行浏览器中正确呈现的网站已经很痛苦;如果你还希望它能在所有文本大小上正确呈现,那么这是相当多的工作。许多Web开发人员将他们的站点设计为默认字体大小,并尝试支持更大或更小的字体。 (您可能对Jakob Nielsen的this dated but relevant piece感兴趣。)

对于固定宽度的网站,很难说。就我个人而言,我怀疑很多网页设计师都觉得他们对自己的外观和感觉有很大的控制感,并认为当你将它拉得太远时,网站看起来很“丑陋”,所以他们不让你做它。可能不明智,但你去了。

答案 2 :(得分:10)

  

现在我想问一下真正的专家   关于这个话题 - 我不是网络   设计师 - 为什么固定宽度布局   仍然那么受欢迎,如果有的话   非常好的理由。

啊,无论是主观还是争论。我相信我的论点不会说服你,但这是一个非常好的理由,恕我直言:

演示。

就像电影一样,导演为观众提供了体验。他们就是这样制作电影的。他们以给定的速度移动动作,以寻找他们试图在观众中调用的情感。虽然DVD从一开始就具有“角度”特征,但很少有电影能够让观众有机会从不同的角度观看电影,如果他们有这种观点仍然在导演的控制之下。

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

但真正的设计师完全明白,设计必须被理解为一个整体。与多列或薄布局相比,宽布局对人的影响截然不同。读者眼睛以某种模式移动,文本旨在将读者拉向路径。

声称每个布局都应具有某些功能的人都是短视的。没有普遍真实的“规则”,并且试图扩大布局规则充其量只是短视,最坏的是傲慢。

- 亚当

答案 3 :(得分:7)

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

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

  1. 可访问性 - 正如几个人所指出的那样,让网站在没有任何控制的情况下使用浏览器的全宽可能会导致相当长的行,这使得难以阅读[1]。使文本自动布局在多列中是这个问题的一个潜在答案,但是用CSS实现起来真的很难(这是制作布局人性化最糟糕的工具,但这是一个单独的主题)并且充满了其他问题同样。
  2. 我应该注意到你确实有一点 - 大多数固定宽度的网站都会对高DPI感到厌烦,因为它们没有考虑到改变的字体大小。然而,这不是固定宽度设计的固有问题;我也看过流体设计。

    [1]不,我没有引用。然而,我已经尝试在我的24英寸1920x1200 96dpi [2]上全屏阅读,并且要告诉你 - 15分钟后,我的脖子因不断转过头而痉挛。

    [2]典型的用户仍然运行1024x768或1280x1024(基于我工作的产品的仪器,最新版本的安装量略少于10mln)。所以,是的,我不是典型的用户。

    1. 设计 - 大多数现代设计都非常丰富的图形和视频元素。大多数图形元素在文档重排时都不能很好地扩展,视频根本无法扩展。 (我会再次把它归咎于CSS - 它支持动态调整大小的图像缺乏一些基本操作,并且对于构建和控制可视树没有任何支持。但我再次离题:-))因此,提供者选择加入为了更容易的方法。

    2. 功能 - 流畅的布局非常适合处理像文档这样的大文本块。然而,相当多的现代网站实际上是应用程序,而不是文档。它们具有多个元素和控件,并且增加了这些元素被占用的区域,使得用户更难以将所有元素保持在焦点上。

    3. 夫妻例子:

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

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

答案 4 :(得分:4)

我怀疑大多数网络开发人员都采用固定宽度,因为开发这样一个网站要容易得多(此外,许多内容管理系统只提供固定宽度的布局)。 让动态布局更好地运作正确地在不同的浏览器中是更棘手的 - 但它是可靠的(我刚刚在这个问题上工作;-)。

我同意你的观点 - 我希望网页能够动态调整其内容的浏览器大小我作为'客户'喜欢使用(无论是小还是大)。我不喜欢光顾“不在全屏模式下使用我的浏览器”或类似的东西......

答案 5 :(得分:3)

您可以尝试放大。大多数现代浏览器默认会缩放整个页面,而不仅仅是文本。这样可以保留页面布局并使用更多屏幕。通常快捷键是ctrl + +和ctrl + - 。它在我的笔记本电脑上运行良好,至少

答案 6 :(得分:3)

可读性和可预测性

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

然而固定宽度设计将成为过去的事情,如果浏览器可以正确支持 2 CSS属性:

  

最小宽度

     

最大宽度

这将使设计师能够设计出灵活且可预测的网站。没有更多的惊喜,用户可以使用他们想要的任何分辨率。

答案 7 :(得分:3)

[忘掉我提到的窗口管理,它不是主题]

我目前运行一个大型互联网社区,我们将尽快切换到固定宽度(1024px)设计,因为我们目前只使用动态宽度布局遇到问题:你不能依赖任何东西,(最大的)问题imho)文本变得很长,所以只有几行但是它们本身的长度很难概述

答案 8 :(得分:2)

标签式浏览器

由于我使用标签式浏览器进行日常使用,每次切换标签时调整窗口大小实际上都有点麻烦。为了我的目的,我将窗口设置为最大可用宽度,并容纳打开的“最大”选项卡。对于剩余的标签,具有流体布局实际上是令人烦恼和分散注意力的。项目和文本跳转并根据我为另一个选项卡调整窗口大小的方式更改位置。此外,流体布局会导致不舒服的宽块短(垂直)文本。

对我而言,作为一名读者,要让我的眼睛能够在具有大量垂直滚动的较窄文本块上正确跟踪,并且当我熟悉的网站保持不变时,很多更容易相同的大小,以便布局和定位是可预测的,无论我对窗口做了什么,以容纳其他选项卡。我实际上曾经是流畅布局的忠实粉丝,但我现在发现越来越多我更喜欢使用标签式浏览器的固定布局。

答案 9 :(得分:2)

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

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

答案 10 :(得分:2)

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

首先,您需要迎合最低共同点。许多开发人员将在1680x1050,1920x1200和1280x1024等分辨率的屏幕上运行。有些用户会使用1024x768,我个人认为这是你需要满足的最低分辨率(感谢上帝不再是800x600)。如果您将宽度固定为960-1000像素,那么您不会遇到开发人员无意中制作无法在不超过1600像素(宽)的显示器上滚动而无法查看的页面的问题。相信我,它发生了。

任何非平凡网页上的布局都很难。抛弃跨浏览器支持,使您的页面不仅有效,而且看起来相当一致,这是一个巨大的问题。现在尝试抛出可变宽度,如果不是不可能的话,它会变得更糟。看看收益:谁会受益?少数用户具有高分辨率并且实际上希望在整个屏幕上扩展该内容。我有一个宽屏显示器,我不会最大化我的浏览器。在这方面很多人都像我一样。

考虑另一个问题:CSS。 CSS对许多事情有好处,但在许多其他事情上是一种皇室般的痛苦。一方面。现在除了浏览器盒子模型的差异之外,还有很多关于不同浏览器如何处理CSS的怪癖,即使不存在CSS也无法做到的许多微不足道的事情,唯一的解决方法就是按像素做事。

作为一个具体的例子,我正在做一些表格,这些表格在接缝处爆裂。我正在使用Ajax调用重新加载内容并替换内容。现在我首先尝试用百分比来修复列的宽度。这样做是没有固定宽度的先决条件。 Firefox将这些视为一种建议,无论如何都会调整它们的大小,即使它可能没有必要。在我以像素为单位修正宽度之前,我没有得到满意的结果。

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

答案 11 :(得分:2)

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

1)速度 - 编写一个固定的网页通常会更快,而不是尝试编写一个在超过少量分辨率下正确调整大小的网页。

2)该网站的设计者并不是投入生产的最终批准者 - 如果您尝试使用流程而不是固定布局,您会对Sallys的PC与Big的不同之处产生疑问老板,为什么你不能把它移到这里等,通过移动到固定的布局更容易修复。

答案 12 :(得分:1)

能够调整浏览器窗口大小的重点是更好地以适合您情况的方式查看网页内容。如果页面无法调整,为什么不将浏览器窗口设置为固定大小?

如果我有一台大显示器,我希望能够伸出窗户并正确填充内容。如果我需要空间用于另一个窗口,我希望能够缩小我的浏览器窗口并通过更改布局来正确调整内容(直到某个最小点,然后切换到滚动条,当然。)< / p>

答案 13 :(得分:1)

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

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

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

许多浏览器在将网站扩展到比以往更大的方面做得更好; Firefox 3,至少是grows the entire page when you zoom in,没有打破布局。

答案 14 :(得分:1)

如果您希望它占用更多的屏幕空间,请使用较低的分辨率。如果您要在墙上的大型显示器上显示网站以供公众查看,这将非常有用。否则,请参考@ theomega的建议,并将其余的屏幕用于其他窗口。

关于网页设计和固定宽度网站的一点点(很少)我知道:

  • 他们倾向于充分利用空白区域并将注意力集中在页面上。设计师称之为“视觉恐吓”,将每一个角落都塞进内容,使页面混乱。很难弄清楚什么是重要而不是什么。
  • 他们感觉更“完美”,就像一张画框中的照片,而不是像在软木板上用拇指钉上的照片打印一样。

答案 15 :(得分:1)

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

流体布局很好,但实现起来比较困难,特别是如果有两列以上且源div顺序很重要。

行长度是关于可读性的问题,但这与字体大小相互作用。因此,您必须在屏幕上平衡宽度与可能的字体大小。

如今,假设1024 x 768及以上是桌面用户市场的绝大部分是合理的,因此您可以安全地设计960像素的固定宽度 - 用于屏幕媒体类型。

一些重要的限制因素:

  • 确保是水平滚动 是从不
  • 用户
  • 如果转化是个问题,请确保 可点击的东西 - 特别是 “号召行动”或其他任何行动 让你的收银机去 “ka-ching”不应该落到 右边第770个像素左右 - 以防万一。

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

在各种浏览器,设备,显示宽度和视口大小上提供看起来不错且功能强大的网站是一个不断变化的目标和持续的挑战。

关于filmstarts.de网站,它绝对是一团糟,但问题不在于它是固定宽度的布局,而是布局的设计和实现方式。固定宽度布局有好的和坏的实现,就像流体布局的好的和坏的实现,或具有固定宽度元素的半流体布局等一样。

答案 16 :(得分:1)

我把它归结为懒惰。固定宽度布局更容易设计,使外观更好,因为您不必担心尺寸变化。例如,这使得添加图像变得非常容易,因为您知道布局的大小。

就个人而言,固定宽度的网站真的让我感到恼火。我喜欢使用大型显示器。我为他们付了很多钱,所以我想利用它们,而不是把大部分都留空。如果我增加字体大小,拒绝变大的网站会更糟糕。我没有最好的视力,经常使用更大的字体来阅读网站上的文字,没有什么比固定宽度的布局更糟糕了,每行留下三个字,大部分是空白屏幕...

答案 17 :(得分:1)

据我所知,虽然引用的所有理由都是有效的,但主要原因是像银行和政府机构这样的单一机构中的很多机器仍处于固定且有些过时的低分辨率。遗憾的是,这只是最低的共同点。

答案 18 :(得分:1)

我个人更喜欢固定宽度的网站。我没有被迫乱用我的浏览器窗口来获得我可以处理的行大小。我个人觉得很长很难读。我也认为它看起来更好,尽管这是100%完全主观的。

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

我的最终答案 - 两者都很好,每个人都有自己的位置

答案 19 :(得分:1)

“它的分辨率为1920x1200,因此所有固定宽度的网站都会浪费空间 外形尺寸只有15英寸。所以我必须使用更大的字体,文字将不再适合这些填充的布局,有时甚至会受到其他元素的阻碍。“

这是有充分理由的。如果段落拉得太宽,则阅读起来会更加困难。人类在大约15到20个单词之后需要“休息”,这正是为什么我们没有非常宽的书籍。

分辨率越高,您就可以获得更多细节,但这取决于您如何使用空间。我从来没有最大化浏览器和PC是为窗口多任务而建,而不是一次只有一个窗口。

答案 20 :(得分:1)

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

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

答案 21 :(得分:0)

使用固定宽度的一个要点是,设计人员实际上可以控制网页的外观,无论浏览器环境如何。我认为使用FW有两个原因:

  1. 设计师希望网页看起来都一样。
  2. 设计师缺乏时间/愿望/ ......以不同的模式和不同的浏览器测试他们的页面,只是避免了网页开始飞来飞去的风险。

答案 22 :(得分:0)

在切换到32英寸显示器之前,我没有进行固定尺寸的布局。如果线条超过32英寸,则很难阅读文本。我已经学会了不超过1000像素的欣赏文字,而且我已经切换到固定布局了。

但我同意将内容宽度减少到&lt;当你有一台大显示器时,800px是一种痛苦。

答案 23 :(得分:0)

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

答案 24 :(得分:0)

大多数用户都不了解如何正确使用浏览器。当用户真正知道如何使用计算机的那一天,您就会明白流体宽度是网站的明显选择。

答案 25 :(得分:0)

我经常被迫。这里的3位开发人员都没有强大的设计背景,我们努力的规则和实施反映了这一点。这是我想要改进的领域。

答案 26 :(得分:0)

使用%作为单位的液体布局可以适应任何屏幕。

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

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