网页宽度设计的选择

网页宽度选择的一些依据
服务器君一共花费了139.043 ms进行了4次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

最近首页考虑改版,不想再使用960宽,于是调查了下关于网页宽度的一些细节。关于实现的细节,可以参看这里 CSS网页宽度怎么定比较合适

先看一下国内国外的几个知名网站的网页宽度设置:

编号网站名网页宽度备注
1网易960px均指首页,下同
2新浪950px 
3腾讯910px 
4TOM960px 
5凤凰网950px 
6MICROSOFT935px国外网站
7BBC995px 
8AOL978px 
9CNN980px 
10Reuters960px 

从上表可以看出,几乎所有的大型网站都是采用比较保守的网页宽度设计,目前且都已不再考虑800*600分辨率的用户的全屏浏览问题,目前网页宽度设置的主流标准仍然是950/960/980像素宽度,最大980像素也大都是国外网站。

网页的宽度设计需要注意以下几点:

  1. 固定宽度只适合功能型网站,不适合希望用户认真阅读的浏览型网站。浏览型网站,它的定位是“知识库”,希望你停留在这里认真浏览和阅读。
  2. 大屏幕不是用来显示更宽文字内容的,大屏幕下必然会面临鼠标长途奔袭的问题。建议用大屏幕的人:为自己的身体健康着想,在大屏幕下阅读的时候,养成缩小窗口的习惯。
  3. 希望用户认真阅读的网站,主要内容区域的宽度必须固定,不能过长,否则会伤害到阅读者的眼睛,而且不适合阅读的流畅性。固定宽度在650左右最合适。有兴趣的人可以去搜索相关报告,为什么是650左右。(严格来说这个宽度不能用像素描述。应该是拿着尺子到显示器上量的毫米宽度才基本够严谨。当然,只说宽度也不行,还有眼睛离显示器的距离、文字大小、字体等因素作为前提)
  4. 一个页面只有一个主要内容区域,其他所有都是辅助内容,能隐藏就隐藏,能忽视就忽视。在用户浏览的时候,辅助内容不要紧挨着主要内容。那样会干扰阅读,侧面影响内容摄取的质量。特别是当辅助内容不能很少的时候。
  5. 浏览型网站尽量别用三栏,三栏太难设计,一个合理的页面不需要一下子摆出来那么多内容。
  6. 对于浏览型网站,在大屏幕下,浏览区域和辅助区域需要有分隔。 即使因为不用固定宽度会带来视觉上的不协调。
  7. 虽然屏幕越来越大,对于一些网站来说1024的宽度不一定会是主流,但至少需要向下兼容这个宽度,把他们作为一个很重要的人群考虑。
  8. 宽度问题其实是一个蛮值得讨论的问题。在屏幕越来越大,尺寸越来越多样的时候,这个问题会越来越凸显。但如果纠结于“不要有空白”、“功能和内容不能分开”,没有任何意义。有些可用性原则,没有挑战余地。就好像公共场所的门必须向外打开一样。
  9. 对于这个问题,设计者应该为用户考虑更有益的方式。而不是听用户说他们想要什么样的方式。因为:大多数嗓门大的用户,并不知道什么样的方式对自己最有益。

下面是一个浏览统计表:

编号分辨率百分比备注
11024×76822.1%17#普屏居多
21280×80021.9%14#/15#宽屏居多
31440×90014.6%宽屏居多
41280×10248.5%普屏居多
51366×7688.2%宽屏居多
61680×10506.3%宽屏居多
71920×10802.9%宽屏居多
81600×9001.5%宽屏居多
91280×7681.4%宽屏居多
101152×8641.4%普屏居多

从上表可以看出:800*600分辨率用户的确已经很少,并且1024*768分辨率用户占有率也在呈现快速衰退趋 势(需结合早前数据,表中未列出),1280×800和1440×900很快将成为主流,不过,虽然屏幕的分辨率已呈上升趋势,但是网页宽度设置确没有大的改变,估计以后再宽也宽不到哪里去,应该不可能跟进着屏幕宽度设计,让用户左右摆头阅读的。

本文地址:http://www.nowamagic.net/librarys/veda/detail/1877,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/1877

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《高性能网站建设指南》 桑德斯 (Steve Sounders) (作者), 刘彦博 (译者)

《高性能网站建设指南》结合Web2.0以来Web开发领域的最新形势和特点,介绍了网站性能问题的现状、产生的原因,以及改善或解决性能问题的原则、技术技巧和最佳实践。重点关注网页的行为特征,阐释优化Ajax、CSS、JavaScript、Flash和图片处理等要素的技术,全面涵盖浏览器端性能问题的方方面面。在《高性能网站建设指南》中,作者给出了14条具体的优化原则,每一条原则都配以范例佐证,并提供了在线支持。全书内容丰富,主要包括减少HTTP请求、ExpiresHeader技术、Gzip组件、CSS和JavaScript最佳实践、关闭ETags的技巧、Ajax缓存技术和最小化技术等。

更多计算机宝库...