目前,网站设计的“最常见”宽度和高度是多少?


9

我正在一个小组项目中,试图让我的同事提交有关他们对在线申请的愿景的图纸;该应用程序将通过PC查看。尽管我怀疑没有行业标准,但我保证对于固定宽度布局的网站必须有通用的方法。我需要了解行业中最常见的比例感。

我们将使该原型保持简单,因此将不会检测浏览器,屏幕宽度等。因此,我想以一种简单的方式提出这个问题,希望得到一个简单的答案:

网页最近设计的“最常见”宽度和高度是多少?如果我告诉同事为什么我为他们选择一种特定的比例感作为他们的图纸基础时,如果可以找到一个来源,这将非常有帮助。

请注意我如何问这个问题:

  • 我并不需要最常见的屏幕分辨率。
  • 我并不需要最常见的浏览器。

我想知道大多数网站在固定尺寸的布局上选择哪种尺寸。我知道人们通常会滚动,因此身高可能不是〜'standard'的一部分;在这种情况下,我将选择最常见的宽度。

Answers:


9

就像您说的那样,没有标准高度,因为它非常流畅,所以只要使用能帮助您最佳地可视化设计的东西即可。

对于960像素的宽度,宽度似乎是固定宽度设计的当前“标准”。一个网站致力于浏览该宽度的布局是很常见的。

(我假设您不希望有人抱怨使用流畅的设计吗?)


3

确实没有应该设置的标准宽度。在过去几年中,使用1024x768显示器的人数急剧下降,因此宽度960的重要性降低。随着如此多的新设备(智能手机,平板电脑以及笔记本电脑和台式机)的出现,您应该为每种情况创建许多样式表。

CSS媒体查询使您可以根据用户的屏幕分辨率来更改样式。我倾向于使用具有处理所有视觉样式的通用样式表的网站,然后将它们分别用于移动设备,平板电脑,标准台式机/笔记本电脑和构成页面的超宽屏幕。

在W3.org上查看此页面的一些示例-http: //www.w3.org/TR/css3-mediaqueries/

这是一项更多的工作,但是无论用户使用什么浏览器浏览网站,都将使用户获得最佳体验。


1

@约翰·康德说了什么。除此之外,您还必须考虑目标受众是谁。例如,如果我的网站是技术博客或小工具博客,则目标受众可能比普通受众更精通技术,因此我可以以1200像素以上的像素布局进行拍摄。或者,如果我将重点放在网站管理员的网站/博客/论坛上,我的范围会更广一些。

在一天结束时,找出您的大众人口统计资料,并按照最终适合他们的方式进行统计。

请记住两个非常重要的事情...

1)如果您的设计可以使用900+像素以上的像素,那么即使您的人口统计学可以承受,也没有理由将其扩展到1200+像素。

2)确保您具有适当的结构,以容纳可能没有目标分辨率的用户。


我不同意第二点。1366像素宽的显示屏(可以说是过去几年中售出的大多数笔记本电脑中最常见的宽度),您无法将两个900像素的窗口彼此相邻放置,并且无法同时看到两个窗口。如果您只有一个900px的布局,那么您会浪费34%的水平空间。在这种情况下,理想的宽度是1200px 。所以,是的,有有原因的伸展它。
nhinkle 2011年

@nhinkle:我不认为您实际阅读了第2点。您的回答与两个相邻的900px窗口彼此相邻有什么关系?此外,请正确阅读问题以了解John R的要求。这不是关于极端用例的讨论,例如想要彼此相邻的2 900px窗口,或者在我的情况下要使用1600px的显示器(其中2个)进行设计。而是与不是您或我的绝大多数用户有关
。– Adil

抱歉,我要回答的是第一点,而不是第二点。如果造成任何混乱,我感到抱歉。不过,我的观点仍然是:绝大多数用户的显示器足够宽,以至于900px的布局浪费了很多空间。我同意您在回答中所说的大部分内容,但是您的第一点“记住的事情”并不是真的成立。如果您的受众特征可以承受1200像素,则应使用1200像素,否则将浪费300像素。
nhinkle 2011年

@nhinkle:您误解了我的第一点。如果我的设计可以在900像素之内轻松显示该网站,为什么要拉伸使其使其达到1200像素?同样,13%的用户仍然具有1024x768的屏幕分辨率。虽然这是一个很小的数字,但它的大小足以使他们感到不适并失去销售,广告点击,潜在客户或您的任何商业模式...。(数据引自:w3schools .com / browsers / browsers_display.asp
Adil

我明白你的意思。我的观点是,如果您的用户总体上具有足够宽的屏幕以使用1200px宽的布局,则应该这样做。例如,堆栈交换站点已针对约1000像素宽进行了优化,但是许多用户要求并排查看帖子源和降价预览的选项,这将占用更多的水平空间。w3schools不是Web用户的代表性样本,但除此之外,此讨论是针对1200符合设计要求的网站的。
nhinkle 2011年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.