月光博客 » 网站建设 » 宽屏显示下的网站网页宽度

宽屏显示下的网站网页宽度

  当前的前端设计师有一个苦恼,就是用户屏幕显示分辨率的各不相同,并不能只按照一个模式设置网站的宽度,特别对于宽屏用户来说更为烦恼。

  根据我的博客上月统计,1024×768分辨率的用户只占到50%,并且在逐月下降,而1280-1440这三个分辨率的用户则达到了35%,如果按照这个速度发展下去,明年就会超过1024分辨率,这说明,使用17寸普屏的用户正在加速减少,而17、19寸宽屏用户正在稳步逐步增加,这给前端设计师的一个考验是,不能只考虑1024×768分辨率的用户了,要想想大屏幕宽屏用户的浏览体验了。

数据统计

  Google Reader是一个典型的内容阅读性质的网站,用户在上面阅读时间非常之长,那么,Google的前端设计师是怎么考虑这个问题的呢?

  大家可以做一个实验,在19寸宽屏下,如果网站页面全文显示,铺满整屏,那么阅读的时候,眼睛需要从左转到右,才能阅读完一行,屏幕越大,这种效果越明显,因此,一个让用户大量阅读的网站,为了照顾好读者的眼睛,在大屏幕宽屏下,也不应该全屏铺开的显示文字内容。

  在1024×768分辨率下,使用Google Reader时,会发现内容是全屏显示的,但是,使用19寸宽屏在1440×900分辨率下打开Google Reader,会发现这时并没有宽屏显示内容,右边留出了一大块空白,如下图显示。

宽屏显示下的网站网页宽度

  使用工具测量宽屏下Google Reader的内容显示像素,结果是955个像素,很有趣的数字。

  我在《更改博客页面宽度到960像素》一文中已经提到了,现在的网页设计的行业标准应该就是950/960像素宽度,这个宽度应该是人眼在不转动的情况下能看到的极限了,实际阅读区域正文的宽度是650像素,Google Reader的这个设计很有意思。

  在Google搜索引擎中,搜索结果的显示宽度确是另外一个数字580像素,这是又一种内容宽度设计,Google这么做的原因估计是为了更好的显示右侧广告。

  我的博客最初使用的是778像素这个宽度,在2008年的那次改版后,修改为878像素宽度,主要是为了修改方便,直接加了100像素,正文区域的阅读宽度是668像素,左侧侧栏宽度是200像素。不过,今年的改变,我的博客的整体宽度修改为960,正文区域的宽度是728像素,728的宽度仅仅为了好放Google AdSense而已。

顶一下 ▲()   踩一下 ▼()

相关文章

  1. 1
    来啦   说道:
    难啊,标准难啊
    支持(22反对(8回复
  1. 2
    护肤每日谈   说道:
    什么都不是固定不变的,应该与时俱进,现在主要是考虑19寸宽屏了。
    支持(20反对(6回复
  1. 3
    球球快跑   说道:
    我的是1440,看来我的站也得考虑改版了,宽频用户确实在逐步增多。
    支持(23反对(10回复
  1. 4
    歪歪屋啊   说道:
    其实一般用户都感觉不大
    支持(21反对(11回复
  1. 5
    戴伟   说道:
    呵呵那是必然的 时代的发展。。。
    支持(15反对(5回复
  1. 6
    小本商人   说道:
    白鸦有一篇文章也是谈得相关的问题,建议大家搜索来看看。
    支持(16反对(8回复
  1. 7
    流放灵魂   说道:
    呵呵,学习,我的是满屏的
    支持(13反对(5回复
  1. 8
    linker   说道:
    月光在这方面的精细是相当值得研摩推敲的,佩服下!
    支持(13反对(7回复
  1. 9
    米花博客   说道:
    据说宽度在650左右最合适阅读
    支持(11反对(7回复
  1. 10
    bwskyer   说道:
    我的是1280*1024...
    支持(13反对(9回复
  1. 11
    都市稻草人   说道:
    我喜欢宽屏的,大气。
    支持(13反对(10回复
  1. 12
    园子   说道:
    我的网站而已是基于1024*768来做的

    看来得改改了~
    支持(17反对(14回复
  1. 13
    响石潭   说道:
    月光真是三句话不离Google
    支持(9反对(6回复
  1. 14
    听书博客   说道:
    不错,我正准备该宽度呢
    支持(11反对(8回复
  1. 15
    王法昊   说道:
    现在的开发者真难!
    既要考虑浏览器的兼容,又要考虑宽屏下的网页宽度!
    支持(13反对(10回复
  1. 16
    mptang   说道:
    这个应该学习下的
    支持(9反对(6回复
  1. 17
    wjhhh   说道:
    为了保护视力,还是用小液晶屏把,呵呵
    支持(14反对(11回复
  1. 18
    key   说道:
    宽屏不一定要利用全部空间,阅读过宽很不习惯。
    支持(9反对(6回复
  1. 19
    我想想   说道:
    现在的开发者真难!
    既要考虑浏览器的兼容,又要考虑宽屏下的网页宽度!
    支持(11反对(9回复
  1. 20
    Mojo   说道:
    千鸟前几天也有一篇写宽屏的文章~不提倡自适应,观点也是说宽屏是用来看电影的。
    支持(8反对(6回复
  1. 21
    yukon   说道:
    其实在国外这根本不算问题,用div+css流式布局再加文字设置em,有的再来点js,不管是什么分辨率的都能应付自如。但中文网站显示最大的缺点就是字体和大小的问题,大了小了都挺难看。所以很多网站还是喜欢用px来定死文字大小。这就是困扰很多前台美工的问题- -
    支持(9反对(7回复
  1. 22
    姬良   说道:
    喜欢17啊·······
    哎··
    买宽屏是不是跟风呢?··
    以后考虑买个15的液晶··
    嘿嘿
    支持(14反对(13回复
  1. 23
    fencze   说道:
    恩,觉得现在宽屏越来越多了
    支持(16反对(15回复
  1. 24
    118yes   说道:
    分辨率刚好,宽屏合适
    支持(11反对(10回复
  1. 25
    RayXin   说道:
    看来该琢磨一下这个像素的问题了
    支持(7反对(6回复
  1. 26
    沥水倾杉   说道:
    个人感觉网页宽度还是不要太窄的好!
    支持(13反对(12回复
  1. 27
    todouba   说道:
    我的网站而已是基于1024*768来做的

    看来也得改改了~
    支持(11反对(10回复
  1. 28
    DDL   说道:
    宽屏是趋势,慢慢改变吧!
    支持(8反对(8回复
  1. 29
    你觉得嫩   说道:
    宽屏看视频电影,分辨率要高清
    支持(6反对(6回复
  1. 30
    木头   说道:
    细节 专业。。。
    支持(9反对(9回复
  1. 31
    lovoer   说道:
    这样分辨率很合理,现在大多数都是显示器都是液晶显示器了
    支持(10反对(10回复
  1. 32
    小龙   说道:
    看文字,15寸液晶才是王道。
    支持(14反对(14回复
  1. 33
    ganlanshu   说道:
    最近发现我的论坛在宽屏电脑上就有点显示不正常了!郁闷
    支持(9反对(9回复
  1. 34
    kansing   说道:
    前台设计是一个很高深的问题
    支持(11反对(11回复
  1. 35
    黑白之间   说道:
    我在百度搜月光博客,下面还有一个日光博客.
    不知道是不是你徒弟,唉.
    支持(11反对(12回复
  1. 36
    对啊博客   说道:
    我的博客在不同显示器上的显示效果就不一样。
    支持(10反对(11回复
  1. 37
    北风那个吹   说道:
    呵呵,这个用户体验挺讲究的
    支持(6反对(7回复
  1. 38
    嘟嘟   说道:
    一直在用950到1004的宽度
    支持(11反对(12回复
  1. 39
    Yimi   说道:
    我更关注自己的体验啊,哈哈。
    支持(9反对(10回复
  1. 40
    WordPress啦   说道:
    设计网站时,考虑的因素也比较多了,不仅仅是浏览器的兼容性问题,页面在屏幕上的尺寸也要多多考虑了
    支持(10反对(11回复
  1. 41
    哼哈哈坛子   说道:
    我现在很难过,我的论坛设定是1024*768的,可是很多朋友都高于这个分辨率,甚至有1920*1200的...
    支持(8反对(9回复
  1. 42
    心情之紫   说道:
    一般960PX就可以了,再大的话,就要动脖子了。
    支持(11反对(12回复
  1. 43
    zikay   说道:
    我目前的显示器分辨率:1920×1028
    缘起于我最近买的24寸的三星液晶宽频
    支持(8反对(9回复
  1. 44
    艾美   说道:
    你饿博客怎么有加载项呢》?是什么东东啊!呵呵!
    个人认为宽屏看电影,玩游戏很爽!
    支持(9反对(11回复
  1. 45
    QinYu   说道:
    williamlong也用Chrome啊~~
    话说我经常用手机Opera浏览网页的- -
    支持(11反对(13回复
  1. 46
    王小东   说道:
    其实这不是多大的事情,按照我非专业的理解
    照顾好眼睛,兼顾内容展现
    完了
    支持(7反对(9回复
  1. 47
    嘟嘟   说道:
    文字部分680 650 580 都合适呢吧
    支持(7反对(9回复
  1. 48
    bokee   说道:
    我晕,我一直用的是800*600的分辨率。
    支持(10反对(12回复
  1. 49
    千寻IT   说道:
    宽屏是必然的 趋势
    支持(10反对(12回复
  1. 50
    blog110   说道:
    的确是的,但是貌似满屏更好看一些,虽然需要摇头看。
    支持(20反对(22回复
  1. 51
    banny   说道:
    我每次来到你的网站都很少去看左边栏,因为太小了,看了也不舒服,而正文则是太宽了,字体也小,眼睛要左右移动,这种不舒服的状态下,也很少去关注上面的广告了- -
    支持(9反对(11回复
  1. 52
    ruirui   说道:
    哎,高分屏总是被忽略呀。还好Chrome的缩放功能不错,比IE的缩放太烂了。
    支持(9反对(12回复
  1. 53
    响石潭   说道:
    显示器大小不同 IE的缩放常常变形
    支持(7反对(10回复
  1. 54
    超级熊猫   说道:
    标准的950/960像素
    支持(9反对(12回复
  1. 55
    pig   说道:
    这年头还全屏化啊,我喜欢窗口化的,可以同时打开好几个。游戏也窗口化了,后台开着聊天软件。
    支持(11反对(14回复
  1. 56
    漢文溪   说道:
    注重用户体验是关键
    支持(11反对(14回复
  1. 57
    卢松松   说道:
    学习了!呵呵
    支持(11反对(14回复
  1. 58
    wotch   说道:
    看起来舒服我就喜欢
    支持(7反对(10回复
  1. 59
    williamlong   说道:
    那篇文章我也看了,比较赞同,宽屏不仅仅是用来看电影的,还可以用来打游戏。
    支持(7反对(10回复
  1. 60
    Mojo   说道:
    于是这几天很多人都争论这个宽度问题……
    支持(14反对(17回复
  1. 61
    lubylee   说道:
    专业成就非凡
    支持(10反对(14回复
  1. 62
    FXYeah   说道:
    习惯1024×768了
    支持(11反对(15回复
  1. 63
    狂晕狂吐   说道:
    狂晕,谁说人的眼睛就应该死钉在一个地方,你是不是天生眼睛就直勾勾盯着一个地方看啊?还TM的照顾我们的眼睛,人的眼睛需要懒惰到一动不动吗
    支持(5反对(9回复
  1. 64
    黑白之间   说道:
    我在百度搜网站排名也能进到这里?
    支持(6反对(11回复
  1. 65
    fantizi   说道:
    网站网页宽度 950 效果可以不错!
    支持(15反对(20回复
  1. 66
    乐者为王   说道:
    得不停向下翻页,翻页
    支持(9反对(14回复
  1. 67
    charlesyu   说道:
    我觉得我更喜欢在17普屏中看订阅,而不是笔记本的14宽屏和台式机的22宽屏。觉得很别扭,呵呵。
    支持(6反对(12回复
  1. 68
    Zack   说道:
    "现在的网页设计的行业标准应该就是950/960像素宽度,这个宽度应该是人眼在不转动的情况下能看到的极限了,实际阅读区域正文的宽度是650像素."

    學習...
    支持(12反对(18回复
  1. 69
    12530   说道:
    还是习惯普通的17寸标准屏,现在的宽屏显示效果很别扭!
    支持(11反对(17回复
  1. 70
    civilianshop   说道:
    眼睛多转转好啊,免得近视眼.哈
    支持(8反对(15回复
  1. 71
    Hoyou   说道:
    因人而异,我喜欢一行显示更多的文字,最好是800-900像素那么宽
    支持(10反对(18回复
  1. 72
    hsq80   说道:
    我一直用900宽,看来现在是要修改加宽啦,要不然在宽屏下不好看.
    支持(5反对(13回复
  1. 73
    乐者为王   说道:
    不喜欢宽屏,除了看电影方便,看网页太累
    支持(4反对(16回复
  1. 74
    grnnet   说道:
    请问月光是用的什么统计啊
    支持(6反对(19回复

发表留言