网站列宽

时间:2010-03-25 10:25:30

标签: html css layout usability

我感兴趣的是您建议的双列和三列网站的列宽。

例如,如果我们考虑两列布局(总宽度为1000px),一些可能的宽度将是: 900-100, 800-200, 750-250, 700-300, 600-400。 哪种布局最适合可用性,可能的广告展示位置,小部件集成?

8 个答案:

答案 0 :(得分:2)

960px - http://960.gs

这是划分为任何可用列的最佳数字,该网站提供各种指南和网格,以帮助您进行布局。

它也像你想要的那样宽,仍然适合1024宽屏幕 - 1000px将导致水平滚动条。

我还建议不要使用基于百分比的宽度,因为它几乎不可能控制布局。

答案 1 :(得分:1)

使用黄金比例

http://goldenratiocalculator.com/

黄金比例对人眼来说非常自然

答案 2 :(得分:1)

这实际上取决于您要实施的每个col上的网站和特定功能。但要求可用性,我很可能不使用固定宽度cols。设置百分比宽度的cols(并且总产率为90%+)将主要使用阅读器的屏幕。您可以从20% - 60% - 20%开始3-col和30%-70%开始2-col

答案 3 :(得分:0)

382px和618px。

答案 4 :(得分:0)

我建议看这个pdf: http://www.subtraction.com/pics/0703/grids_are_good.pdf

如果给出一些网格系统的历史记录,然后完成基于广告单元构建网格的过程。值得一看。

答案 5 :(得分:0)

960像素 - 总宽度。我认为这是最好的标准。然后你可以尝试160 + 800或800 + 160

答案 6 :(得分:0)

使用960网格作为DCD如上所述。

轻松使用photoshop / fireworks中的模型,以及包含在html中。一旦熟悉了网格“框架”的简单概念,就可以快速获得布局。它会为你处理保证金/填充物。

许多顶级网站设计使用此网格。

至于你的具体问题:

960px宽度(使用960网格): container_12及其内部包括2列的9:3或10:2网格布局 要么 其中的container_16包括3列的3:9:4网格布局

但对此没有严格的规定。根据您的具体情况使其有效使用

如果您提供有关您打算做什么的更多信息,我可以给您更具体的建议:)

答案 7 :(得分:0)

  • 使用960px宽度。 800x600 1024x768 1280x960 显示器有960像素。

  • 如果您想支持移动设备(较小分辨率),请使用fluid layout并使用Media Queries以便更好地控制。

  • 避免考虑所有屏幕分辨率,因为它会浪费您的时间。

  • 使用跟踪器(例如 Google Analytics )来跟踪用户的浏览器窗口大小,以便您可以确定受众群体的屏幕分辨率。

就可用性而言,屏幕分辨率方面的三个最重要的因素,至少从我的经验来看:

  • 避免使用水平滚动条
  • 避免使用太小的字体(非常难以阅读)
  • 避免使用固定字体大小。