【转】HTML5设计原理

关于本博客UI方面的一些思考

bachue posted @ 2010年12月26日 17:33 in HTML5/CSS3 with tags blog cleartype css font html javascript Mobile Opera truetype ubuntu UI windows float dopod dreamweaver , 2163 阅读

首先,很高兴Ubuntu新字体进入Google Font Directory(详细),Ubuntu这字体真的很漂亮,可以说是Ubuntu 10.10的最大亮点了。而这个字体进入Google Font Directory意味着我可以用云字体的方法使每一个进入本博客的观众都看到这个字体(还意味着可以从本博客中下载该字体),不管客户端本身是否真的装有这个字体。额..这字体在XP下好像有点糟糕,特别是没开ClearType的XP,全是锯齿。唉,这只能说XP本身的字体渲染太烂,我以前一度以为XP字体全是点阵字体呢,怎么看都感觉不像是TrueType!

我自认为本博客在非XP的PC上看起来还是不错的,符合我自己的审美观吧,但是在手机上却不是这么回事,我的手机是多普达S900,Windows Mobile 6.1操作系统,安装浏览器Opera Mini 5.1。

手机浏览本博客时存在两个严重的问题,第一,打开博客率先看到的是搜索框,分类等一点不重要的内容,而真正的主体部分却被挤到了下面(代码功能也有同样的问题,代码被行号挤到了下面)。这个问题不仅仅存在于手机,把PC的浏览器的宽度缩小到一定尺寸,也一样如此,有时候看上去右边一大块空白,还以为没有正常显示呢。事实上,很多博客都是这样,本博客并非特例,究其原因,是在写HTML的时候,边栏的DOM安排在前面并使用了float:left;导致。解决的方法很简单,把文章的DOM安排在前面,使用float:right;即可,或是干脆把边栏安排到右边去,这样浏览器宽度缩小时被挤下去的就是边栏了。很可惜,虽然知道解决方法却不能做这种修改,因为博客系统的HTML是定死的,不能改。当然,也可以考虑换个主题,有些主题的边栏是在右边的,不过我蛮喜欢现在这个主题,不想改。也可以考虑用Javascript来更换DOM的位置,但是我的Opera Mini几乎不支持Javascript,改了也没用。所以我干脆做了些小动作,上传了一个smallscreen.css的文件,记下他的路径,在博客的header里增加一个标签,这个标签能使得博客宽度在小于900px的时候使用smallscreen.css,反之则不使用(具体实现可见本博客HTML源码)。这个技巧是在看今年的Google IO大会时一个人在讲Dreamweaver对HTML5支持的时候学的,很有用,而且大部分浏览器支持,要想让网页对非PC平台做特别支持,用这招会非常imba。至于smallscreen.css的内容,其实就是把边栏隐藏了。额,我认为不太会有人在用手机浏览本博客的时候对搜索框和分类感兴趣吧。

另外一个严重的问题是,本博客的部分文章实在是太长了,比方说《HTML5设计原理》,用鼠标滚轮滚也可以滚好长时间,《从jQuery中剥离出$.ajax函数》,整整700行代码啊。在手机上,特别是在Opera Mini(没有滚动条)上看本博客的主页,简直是受罪,就为了瞥一眼下一篇文章的标题,不断的滚啊滚,茫茫多的字,根本看不到个尽头,嗯,用户确实可以考虑下是否该取消今天的晚餐了。把整篇文章不加限制的放在主页上,有方便之处,无需用户点击就能看完全文,但是如果文章实在太长,还是来点部分摘要吧。不过我看遍了博客系统的设置,也没能找到类似的设置。想通过smallscreen.css来解决吧,也想不到个好些的策略,没有CSS3,没有Javascript,没有滚动条,怎么才能缩减文章的长度呢,我也想不到了。

Avatar_small
Garfileo 说:
2010年12月29日 02:42

blog 的编辑器有个 <!--more--> 按钮,在一部分你认为可以当摘要的文字后面点一下那个按钮,那么那部分文字就会成为摘要了。

Avatar_small
bachue 说:
2010年12月29日 15:17

@Garfileo: 哦,原来是这样啊。

YOU ARE (NOT) ALONE 说:
2010年12月30日 05:52

我的首页只放5篇文章,这样可以让摘要内容稍微多一些,而不至于页面过长...

Avatar_small
bachue 说:
2010年12月30日 05:57

@YOU ARE (NOT) ALONE: 页面过长倒不是重点,关键是要让用户能一直翻得到下一篇文章。


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter