月光博客

青青子衿, 悠悠我心, 但为君故, 沉吟至今

« 微软停止Windows XP和Office 2003主流支持服务Google App Engine支持Java »

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

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

  根据我的博客上月统计,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而已。



原创文章如转载,请注明:转载自月光博客 [ http://www.williamlong.info/ ]

本文链接地址:http://www.williamlong.info/archives/1757.html
  • 文章排行:
  • 3.黑白之间
  • 我在百度搜月光博客,下面还有一个日光博客.
    不知道是不是你徒弟,唉.
  • ip: 219.131.242.*  2009-4-7 13:01:43   回复该留言
  • 4.Hoyou
  • 因人而异,我喜欢一行显示更多的文字,最好是800-900像素那么宽
  • ip: 125.77.96.*  2009-4-7 13:03:04   回复该留言
  • 6.艾美
  • 你饿博客怎么有加载项呢》?是什么东东啊!呵呵!
    个人认为宽屏看电影,玩游戏很爽!
  • ip: 60.212.47.*  2009-4-7 13:14:16   回复该留言
  • 7.姬良
  • 喜欢17啊·······
    哎··
    买宽屏是不是跟风呢?··
    以后考虑买个15的液晶··
    嘿嘿
  • ip: 60.7.88.*  2009-4-7 13:16:52   回复该留言
  • 8.小本商人
  • 白鸦有一篇文章也是谈得相关的问题,建议大家搜索来看看。
  • ip: 117.9.147.*  2009-4-7 13:25:30   回复该留言
  • 9.园子
  • 我的网站而已是基于1024*768来做的

    看来得改改了~
  • ip: 125.40.51.*  2009-4-7 14:09:30   回复该留言
  • 10.我想想
  • 现在的开发者真难!
    既要考虑浏览器的兼容,又要考虑宽屏下的网页宽度!
  • ip: 117.44.49.*  2009-4-7 15:12:52   回复该留言
  • 12.QinYu
  • williamlong也用Chrome啊~~
    话说我经常用手机Opera浏览网页的- -
  • ip: 61.164.36.*  2009-4-7 15:29:44   回复该留言
  • 13.王小东
  • 其实这不是多大的事情,按照我非专业的理解
    照顾好眼睛,兼顾内容展现
    完了
  • ip: 222.79.80.*  2009-4-7 15:48:09   回复该留言
  • 14.ruirui
  • 哎,高分屏总是被忽略呀。还好Chrome的缩放功能不错,比IE的缩放太烂了。
  • ip: 122.224.217.*  2009-4-7 15:52:01   回复该留言
  • 24.护肤每日谈
  • 什么都不是固定不变的,应该与时俱进,现在主要是考虑19寸宽屏了。
  • ip: 125.73.201.*  2009-4-7 20:10:42   回复该留言
  • 25.charlesyu
  • 我觉得我更喜欢在17普屏中看订阅,而不是笔记本的14宽屏和台式机的22宽屏。觉得很别扭,呵呵。
  • ip: 122.139.164.*  2009-4-7 21:29:23   回复该留言
  • 26.pig
  • 这年头还全屏化啊,我喜欢窗口化的,可以同时打开好几个。游戏也窗口化了,后台开着聊天软件。
  • ip: 116.1.83.*  2009-4-7 21:43:49   回复该留言
  • 38.球球快跑
  • 我的是1440,看来我的站也得考虑改版了,宽频用户确实在逐步增多。
  • ip: 125.121.160.*  2009-4-8 4:07:38   回复该留言
  • 40.王法昊
  • 现在的开发者真难!
    既要考虑浏览器的兼容,又要考虑宽屏下的网页宽度!
  • ip: 222.132.174.*  2009-4-8 9:16:39   回复该留言
  • 46.wjhhh
  • 为了保护视力,还是用小液晶屏把,呵呵
  • ip: 60.217.218.*  2009-4-8 12:54:23   回复该留言
  • 47.Zack
  • "现在的网页设计的行业标准应该就是950/960像素宽度,这个宽度应该是人眼在不转动的情况下能看到的极限了,实际阅读区域正文的宽度是650像素."

    學習...
  • ip: 219.93.178.*  2009-4-8 12:55:23   回复该留言
  • 49.Mojo
  • 千鸟前几天也有一篇写宽屏的文章~不提倡自适应,观点也是说宽屏是用来看电影的。
  • ip: 123.121.250.*  2009-4-8 13:49:32   回复该留言
  • 50.williamlong
  • 那篇文章我也看了,比较赞同,宽屏不仅仅是用来看电影的,还可以用来打游戏。
  •   2009-4-8 13:52:01   回复该留言
  • 52.lovoer
  • 这样分辨率很合理,现在大多数都是显示器都是液晶显示器了
  • ip: 123.147.86.*  2009-4-8 15:23:35   回复该留言
  • 54.Mojo
  • 于是这几天很多人都争论这个宽度问题……
  • ip: 123.121.250.*  2009-4-8 16:55:18   回复该留言
  • 57.linker
  • 月光在这方面的精细是相当值得研摩推敲的,佩服下!
  • ip: 123.10.56.*  2009-4-8 21:33:05   回复该留言
  • 61.key
  • 宽屏不一定要利用全部空间,阅读过宽很不习惯。
  • ip: 58.62.224.*  2009-4-9 13:42:47   回复该留言
  • 62.todouba
  • 我的网站而已是基于1024*768来做的

    看来也得改改了~
  • ip: 59.57.79.*  2009-4-9 14:28:43   回复该留言
  • 63.blog110
  • 的确是的,但是貌似满屏更好看一些,虽然需要摇头看。
  • ip: 59.57.79.*  2009-4-9 14:29:23   回复该留言
  • 66.WordPress啦
  • 设计网站时,考虑的因素也比较多了,不仅仅是浏览器的兼容性问题,页面在屏幕上的尺寸也要多多考虑了
  • ip: 61.191.20.*  2009-4-10 11:45:55   回复该留言
  • 68.12530
  • 还是习惯普通的17寸标准屏,现在的宽屏显示效果很别扭!
  • ip: 59.49.19.*  2009-4-10 20:29:58   回复该留言
  • 69.哼哈哈坛子
  • 我现在很难过,我的论坛设定是1024*768的,可是很多朋友都高于这个分辨率,甚至有1920*1200的...
  • ip: 125.119.232.*  2009-4-10 21:54:14   回复该留言
  • 72.ganlanshu
  • 最近发现我的论坛在宽屏电脑上就有点显示不正常了!郁闷
  • ip: 61.186.154.*  2009-4-14 14:12:59   回复该留言
  • 73.zikay
  • 我目前的显示器分辨率:1920×1028
    缘起于我最近买的24寸的三星液晶宽频
  • ip: 59.40.57.*  2009-4-16 13:06:47   回复该留言
  • 75.hsq80
  • 我一直用900宽,看来现在是要修改加宽啦,要不然在宽屏下不好看.
  • ip: 117.68.16.*  2009-7-29 1:31:29   回复该留言
  • 76.yukon
  • 其实在国外这根本不算问题,用div+css流式布局再加文字设置em,有的再来点js,不管是什么分辨率的都能应付自如。但中文网站显示最大的缺点就是字体和大小的问题,大了小了都挺难看。所以很多网站还是喜欢用px来定死文字大小。这就是困扰很多前台美工的问题- -
  • ip: 218.64.134.*  2010-2-28 18:27:29   回复该留言

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客

  • 订阅我的博客:订阅我的博客
  • 跟随我的推特:跟随我的推特
  • 跟随新浪微博:跟随新浪微博
  • 通过Google订阅本站
  • 通过鲜果订阅本站
  • 通过电子邮件订阅本站

站内搜索

热文排行

最新评论及回复

最近发表

网站收藏

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载本站内容必须也遵循“署名-非商业用途-保持一致”的创作共用协议.

This site is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.