“现实世界” 的网页设计仍然需要考虑 800×600

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。从 免费的 200 美元信用额度 开始!

查看所有阅读 CSS-Tricks 的潮人屏幕分辨率统计数据

csstricksresolutions.gif

在这个网站上,800×600 甚至排不进前十。知道这一点后,我设计了这个网站,以便利用额外的像素空间。现在它是 980 像素。一开始我设置了 1024 像素的宽度,但那会导致水平滚动问题,因为它没有考虑到垂直滚动条占用 13-15 像素。哎呀!

不过,CSS-Tricks 并不是一个完全“现实世界” 的网站。它的目标受众是技术更精通的人群。很有可能,技术精通的人拥有更大的显示器。幸运的是,我不需要猜测。我的 Google Analytics 可以准确地告诉我您使用的屏幕分辨率。CSS-Tricks 也不是我追踪的唯一网站。我追踪了大约 25 个网站,从 Creative Suite Help 网络的其他网站到我从客户那里追踪的一些电子商务网站。

其中一个电子商务网站出售棒球场设备。目标受众是来自城市公园、学校和体育场的维护人员。对他们没有任何冒犯,但这些人不精通技术。他们使用的是 90 年代早期放置在桌上的 CRT 显示器。我对此表示支持。我在这里是为了适应。猜猜这些旧显示器的分辨率是多少?800×600 宝贝。看看该网站的统计数据

ecommerse-resolutions.gif

在这个网站上,800×600 排名第三。如果我为该网站设计一个 980 像素宽度的设计,将导致访问者不得不水平滚动以及垂直滚动,体验非常令人沮丧。特别是在这个网站上,“购物车” 在右侧!那确实会让人恼火。这个网站需要尽可能地方便用户导航。毕竟,我试图让他们在这里花钱。人们不会在令人沮丧的网站上花钱,他们会找到一个更容易使用的网站。互联网是一个很大的地方,因为一些愚蠢的小原因失去客户非常容易。

最重要的是:了解您的受众。

我认为只有三种选择

  • 针对 800×600 优化
  • 针对 1024×768 优化
  • 使用流体宽度(或使用像 Flash 这样的可调整大小的内容)

CSS 就是为了可访问性。如果费尽心思制作一个非常漂亮且易于访问的网站,结果却大到无法在访问者的显示器上显示,那岂不是太可惜了?