网站是否应该在窗口调整大小?

时间:2008-08-26 03:52:07

标签: html css usability

我纯粹从可用性的角度来问这个问题:当您调整浏览器窗口大小时,网站是否应该展开/拉伸以填充查看区域?

我肯定知道有明显的缺点:

  • 广泛的文字列很难阅读
  • 使用百分比编写html / css可能会很痛苦
  • 如果图像太宽,或者添加的文本块太长,则会使您的设计超出限制范围。 (看到编写html / css很痛苦)

我唯一可以想到的Pro是,使用内置于浏览器中的字体大小调整的用户不必处理只有几个字长的列,两边都有一个空白体。但是,我认为这可能是一个浏览器问题比什么都重要(Firefox 3允许你缩放一切而不仅仅是文本,它总是派上用场)

编辑:我注意到堆栈溢出是固定宽度,但编码恐怖会调整大小。似乎杰夫没有任何强烈的偏好。

15 个答案:

答案 0 :(得分:10)

原始HTML就是这样。您是否在更改数据以使其在随机大小的窗口中无法呈现出来?

在过去,每个人都有VGA屏幕。现在,这种解决方案最为罕见。谁知道将来会有什么决议?为什么期望某个最小宽度或高度?

从可用性的角度来看,要求用户获得某种分辨率只会给不使用该分辨率的人带来降级体验。另外一件事是固定宽度?我见过很多固定大小的窗口(弹出窗口),因为我的字体与设计师的字体不同,所以不能正确渲染。

答案 1 :(得分:4)

在网站缩放方面,我喜欢固定大小的网站,使用浏览器“缩放”功能可以很好地扩展。我不希望在我的1920 res显示器上有一个非常宽的页面和小字体。我不知道网页设计师是否必须做任何事情才能让它在缩放时很好地缩放,但是FF3中的放大很棒,IE7中的那个是没用的......

答案 2 :(得分:3)

设计应该在合理范围内流畅。

使用CSS具有min-widthmax-width属性(适用于所有浏览器,包括IE7 +),以防止设计过度拉伸。

答案 3 :(得分:2)

重要的是永远不要让文本块拉得太宽。如果窗口被扩展,那么任何文本块都不应无限延伸以匹配,因为阅读会成为一个难点。

答案 4 :(得分:2)

就像人们所说,这实际上取决于网站显示的信息。两个很好的例子是StackOverflow和Google Images ..

如果stackoverflow拉伸到适合屏幕,更长的答案会令人讨厌,因为眼睛发现难以扫描长线 - 这是完全为什么报纸使用列来做所有事情,以及为什么书籍的宽度都是一样的。

使用谷歌图片,内容基本上是一堆200px宽的图像,它延伸到适合浏览器的宽度,仍然是完全可读。

基本上,请记住,眼睛不喜欢阅读长篇文字,并以此为基础设计。您可以设计您的网站,以便在增加字体大小时,所有布局都可以很好地扩展(我能想到的唯一网站是www.geektechnique.org - 按下ctrl and -/=或{{1} },并且布局用字体大小改变宽度)

答案 5 :(得分:1)

我想很多事情:这取决于。我通常都这样做。有些内容保持固定宽度看起来不错,或者如果它不能从更多空间中获益。其他东西设置为100%,如果它似乎是有用的。

答案 6 :(得分:1)

这应该取决于您网站的设计有多复杂。更复杂,图形或组件方式(内容div的数量)将决定您的网站的扩展程度。一般来说,你会发现大多数平面设计师网站都不会扩展,因为它们是图形密集的。但是,信息网站将进行扩展以充分利用屏幕上的可读空间,并且易于使用并不复杂。这是一个偏好的问题。

答案 7 :(得分:1)

我认为这取决于网站的内容。像SOFlow,论坛和其他网站这样的网站都强调阅读大量细节,所以拥有更多的房地产是我心中的一大好处。垂直滚动越少越好。

然而,对于对阅读水平要求稍低的网站,即使是您只是展示单个产品的博客或零售网站,拥有固定宽度也可以让您更加简洁。

答案 8 :(得分:1)

注意:如果您在浏览器中使用缩放功能,则固定布局会压缩文本,而流畅的布局则允许它占据整个屏幕。

也许这只是一个浏览器问题,但它绝对是支持流畅的论据

答案 9 :(得分:1)

我是全流体设计的忠实粉丝。至于关于文本行太长的可用性投诉...如果由于我的浏览器窗口的大小它们太长,那么我可以轻松地使窗口变窄,因为我可以使它更宽。

答案 10 :(得分:0)

这是造型偏好的问题。根据实施,两者都可以同样使用。如果屏幕足够宽,也可以使用列。就个人而言,当屏幕上有一个单一的窄栏文字时,我觉得很烦人。


2012年编辑:是的,您的网站应该响应其显示的窗口大小。

有很多地方可以阅读更多相关内容,包括:

答案 11 :(得分:0)

段落宽度大于显示,使网站完全无法使用。您必须为读取的每一行来回摆动水平滚动条。我正在大学做一个网页设计课程,教科书称这些设计适应你的屏幕宽度流体布局

我正在使用流体布局设计我的大班项目,它比固定宽度更麻烦。我怀疑没有其他学生会使用它,标记不会注意到,我们模仿的专业网站也没有流动。

答案 12 :(得分:0)

固定和流体设计之间可能存在折衷设计。您可以设计类似流体的站点,但将css属性max-width设置为1024(或其他)。这意味着当window width小于1024时会得到流畅的布局,而当fixed width更大时,会得到{{1}}。

然后窄屏幕用户(如我的800像素eee 701)不必旋转水平滚动条来读取每一行,而宽屏用户(不知道如何调整浏览器窗口的大小)不会得到500个字符宽,1个字符的高段落。

答案 13 :(得分:0)

我会说流畅的。 如果用户不喜欢放大它的结果,用户总是可以回到较小尺寸的窗口,但他对固定布局无能为力。

如果你真的非常讨厌你的网站看起来丑陋的想法,因为有大屏幕的用户会这么做,那么为了一切真实和美丽,至少从不使用基于像素的固定布局! CSS有这些整洁的文本相对大小单位,如“em”,允许您的页面部分与字体大小一致,而其他(如图像)保持其“自然”大小。

为什么不使用它们并使你的页面可以很好地扩展,而不依赖于FF3不太灵活的“扩展一切”,这对于使用基于像素的哑光固定布局的网站来说真的只是一种解决方法?

答案 14 :(得分:0)

很多人都在说“这是一个品味问题”或“我不喜欢高像素显示屏上的大字体”。像素数与它无关,这不是品味问题。这是DPI的问题,它与显示分辨率和字体大小直接相关。如果您的布局与字体的DPI一起缩放(例如通过在ems中指定,并使用SVG),那么您最终会得到非常漂亮,非常清晰的网站,可以在任何显示器上实现最佳效果。

http://www.boutell.com/newfaq/creating/anyresolution.html

相关问题