查看所有阅读 CSS-Tricks 的潮人屏幕分辨率统计数据
在这个网站上,800×600 甚至排不进前十。知道这一点后,我设计了这个网站,以便利用额外的像素空间。现在它是 980 像素。一开始我设置了 1024 像素的宽度,但那会导致水平滚动问题,因为它没有考虑到垂直滚动条占用 13-15 像素。哎呀!
不过,CSS-Tricks 并不是一个完全“现实世界” 的网站。它的目标受众是技术更精通的人群。很有可能,技术精通的人拥有更大的显示器。幸运的是,我不需要猜测。我的 Google Analytics 可以准确地告诉我您使用的屏幕分辨率。CSS-Tricks 也不是我追踪的唯一网站。我追踪了大约 25 个网站,从 Creative Suite Help 网络的其他网站到我从客户那里追踪的一些电子商务网站。
其中一个电子商务网站出售棒球场设备。目标受众是来自城市公园、学校和体育场的维护人员。对他们没有任何冒犯,但这些人不精通技术。他们使用的是 90 年代早期放置在桌上的 CRT 显示器。我对此表示支持。我在这里是为了适应。猜猜这些旧显示器的分辨率是多少?800×600 宝贝。看看该网站的统计数据
在这个网站上,800×600 排名第三。如果我为该网站设计一个 980 像素宽度的设计,将导致访问者不得不水平滚动以及垂直滚动,体验非常令人沮丧。特别是在这个网站上,“购物车” 在右侧!那确实会让人恼火。这个网站需要尽可能地方便用户导航。毕竟,我试图让他们在这里花钱。人们不会在令人沮丧的网站上花钱,他们会找到一个更容易使用的网站。互联网是一个很大的地方,因为一些愚蠢的小原因失去客户非常容易。
最重要的是:了解您的受众。
我认为只有三种选择
- 针对 800×600 优化
- 针对 1024×768 优化
- 使用流体宽度(或使用像 Flash 这样的可调整大小的内容)
CSS 就是为了可访问性。如果费尽心思制作一个非常漂亮且易于访问的网站,结果却大到无法在访问者的显示器上显示,那岂不是太可惜了?
所以,对于您 13.5%(并且还在减少)无法负担更好的显示器的客户,您要重新设计整个网站,让其他 86.5% 的客户屏幕上显示巨大边框?
我不同意。这 13% 的人现在已经习惯了滚动,他们会抱怨一点,但知道真正的错误是他们自己没有更大的/更好的屏幕。
设计电子商务网站,使其易于导航且赏心悦目,并充分利用空间。
完全可以设计一个在 800 像素宽的情况下没有屏幕外内容,但在各种尺寸的显示器上看起来都很棒的网站。举个简单的例子,看看 Coda 的网站。该网站在我的 1600 像素显示器上看起来很棒,并且所有内容都适合 800 像素。
您说的使用该分辨率的人的比例正在下降,这是一个很好的观点,但就目前而言,仍然需要考虑这一点。成为“易于导航”的一部分是没有屏幕外内容。
如果示例网站对于 800 像素来说太大了(还好没有,谢天谢地),如果我要失去一半拥有 800×600 显示器的客户,那将意味着 6.5% 的销售损失,这是不可接受的。特别是对于从一开始就很简单的考虑。
有趣的比较。
我对流体宽度解决方案真正不喜欢的一点是,它不遵循许多可用性规则,最重要的是段落宽度。例如,在 Google 邮件或大多数维基中,您(在 1024 像素及以上的显示器上)会看到这么长的文本行,以至于您无法再正确地扫描文本。这会极大地降低阅读速度。
在 800 和 1024 之间的空间中设计应该有其他选项,但不能是流体;)
@ Chris: 我不知道,把 Coda 作为例子有点困难,因为他们只销售一个产品,这意味着内容很少,并且重点放在一个主题上:销售 Coda…
好的,你说得对,可能不是最好的例子,但我的观点是使用重复的图形或纹理或其他东西来为具有更高分辨率的人们装饰页面的外观。这是一个我认为效果很好的纹理示例。
真正的圣杯将是一个具有大约 780 的最小宽度和大约 1000 的最大宽度的流体宽度网站。也许我会研究一下。
是的,页面不错。你说得对,要为高分辨率装饰页面的外观。重点是,我并没有看到很多真正需要那么大空间的网站/应用程序。意思是:我没有看到用户从 1600 像素宽度的显示器中获益的场景。
你对圣杯的看法绝对正确。我已经花了一些时间思考和实验,试图找到在 780 和 960 像素之间实现流畅性的解决方案,但我认为实现起来相当困难…
希望能看到一个解决方案;)
附言:真的很喜欢“评论订阅”。很好的功能。您是自己实现的吗?
没有,我自己没有实现它,它只是一个名为“评论订阅”的 WordPress 插件。我真的很喜欢它。我喜欢它的功能,并且喜欢它默认是“关闭”的,因为如果你在某个博客上评论,忘记关闭它,然后回到一个装满了其他人在你早就忘记的帖子上的评论的大收件箱,这真的很烦人。它甚至足够聪明,能够告诉访问者他们已经订阅了,如果确实如此,这是一个很好的功能。
Chris,你把所有内容都概括在一个帖子中!
为您的受众设计!
当您谈论 1000 位观众时,13.5% 是很多观众,这意味着如果设计为 1024×800,135 人在浏览网站时会体验不佳。
这太糟糕的设计了!
有关该主题的更多内容
http://germworks.net/blog/2007/06/04/what-screen-size-to-use-in-web-design/
顺便说一句,我完全同意您关于评论订阅的观点,我知道它可以帮助我跟踪我之前的评论,并且通常会再次评论,这正是我们所有人想要的结果。
http://germworks.net/blog/2007/04/23/comment-notify-on-blogs-are-a-must/
回复 WC 的评论,人们不使用更大显示器的原因有很多,人们坚持使用 800 x 600 的原因也有很多。可访问性就是一个因素。我不需要戴眼镜看我的 800 x 600 17 英寸显示器,但在使用 1024 x 768 显示器时却需要。我的 17 英寸显示器很棒,我并不需要用任何更大的显示器来替换它。
任何网站所有者都能够承受 13.5% 的人无法看到整个页面吗?就我个人而言,我倾向于阅读主要内容,就像在这个页面上一样,并且不会横向滚动以查看 RHS 上的内容。谁能承受这种情况?我倾向于在许多网站上这样做,在这些网站上,设计师假设过多,并没有为所有用户构建网站。
不要假设大多数用户都像您一样,也不要假设所有 800 x 600 用户都会滚动查看 RHS,要尽可能地为所有用户设计。
我的 2 分钱。
很高兴再次见到你,Fred!
很棒的文章和帖子。在我们公司,我们有很多旧显示器,我必须为所有用户提供流畅的体验。我刚刚发现您的网站,但我认为我会经常访问您的网站。
Chris
使用这种分辨率的访问者的比例因国家/地区和网站主题而异。似乎很难甚至几乎不可能预测是否值得花时间为这样的受众进行优化。我认为,在大多数情况下,针对 320×240 的优化比“牺牲”旧硬件的用户更有用。