豌豆荚Web 重构小结

年底了很多人都在做年终总结,可惜我今年值得总结的东西周期没有到一年那么多,这次就对最近的一个重构项目做个笔记,总结一下完成思路和不足之处。

我需要完成的是对豌豆荚应用导航页面(也就是大家在豌豆荚客户端里看到的页面)进行重构,因为这些页面最终展示在webkit内核的终端上,所以实现技术上有很多可能,挑几个自己觉得需要投入思考的介绍如下:

Responsive Web Design

Responsive Design我理解为可以根据环境响应变化的设计(一个示例网站,缩放浏览器查看效果),所谓的环境的不同是说我们设计出来的产品会被显示在各种不同的终端上,包括最常见的桌面浏览器(常见尺寸到超大尺寸显示器),还有越来越多的移动终端上的浏览器(手机和平板),似乎很多产品会选择为不同的终端(设备和分辨率)做不同的设计,但是单纯的web page/app 缺需要有一定程度的自适应性。

关于Responsive Web Design的讨论可以看一下这里

在做豌豆荚网页改版的时候,考虑到作为网页的展示终端的豌豆荚客户端是可以缩放的,我们的设计也需要满足这样的适应性,但是最终成型的产品仅仅是在内容密度(单位网页空间上显示的app信息)上需要体现灵活性,所以在考虑自适应的时候仅仅需要考虑布局上的自适应,不用考虑大图片的缩放,内容模块的移动,而更为复杂的自适应布局设计通常要考虑很多方面,比如背景图片的大小、位置,菜单的排布,内容块的分布,文字的大小等等,你可以看看这里

在旧版的自适应实现上是用JavaScript来动态计算内容的空间和布局,这样的方式效率不佳、也不好扩展其他布局方案,比较不妥,所以需要用新的方式来实现自适应。

最终的方案里我们考虑了:

1. Fluid Grid

把常见的固定宽度的网格方案变成可以自适应的流式网格,它不同于固定宽度布局的特点就是网格都是使用百分比宽度的,所以在定网格的格数是需要精心计算的,同时还要考虑的问题是小数为位的像素的宽度在不同浏览器中的不同表现(参见:Sub-Pixel Problems in CSS),所以网格设计应该在尽量能满足设计的前提下,使大部分的“格子“宽度成为一个整数(如果你需要考虑低级浏览器的情况下)。

2. CSS3 Media Query

Media Query就是可以使用CSS来对不同的screen来写相应的样式规则,不过IE8及以下的浏览器不并支持,我们可以在这里浏览器中使用一个脚本来支持:css3-mediaquries.js

然后就可以使用这样的规则来使你的网页的内容可以随终端变化:

@media screen and (max-width: 650px) {
    header:width:40%;
}

如果想让网页显示在移动浏览器上,最好是别让网页可以缩放,而是使用适合这些终端宽度的设计。

Media Query提供了最佳解决方案,但是网页适应终端的灵敏度上还是需要精心设计,需要考虑想要满足哪些分辨率和设备,然后设计好相应的方案,听起来不会比重新做一个设计更耗费精力,更重要的是这种方案让你的设计看起来是一个体系的,而不是到了移动终端就变了另一个网站。

Static Server Compress & Combo

静态文件的压缩其实很多人都在做了,但是细节上会有不一样,有的方式会把压缩和组合的方案放到跟web框架耦合(或者做成支持web展示层框架的库),这种方式可以用一些特殊的方法让后端输入HTML的模块跟这儿模块对应的脚本模块关联一起来,这种方式比较适合一直使用一种后端语言的公司,在你同时要提供给Smarty或者Django这些web框架做插件的适合就比较难受。

我们的方案里只在Static Server上做Combo和压缩,选用的是PHP Minify,但是它默认提供个的组合功能比较弱,改进之后的方式是,用一个group.json文件提供静态文件的组合配置,比如在首页的一个JavaScript会这样来引用:

http://s.domaincdn.com/g=jquery|home|20120110.js

这里的home会对应到group.json里配置好的所有文件,所以永远也看不到一段非常长的路径,然后用一个 | 来分割每个配置,后面的数字是版本号,如果这么写也是没问题的:

http://s.domaincdn.com/g=home|does-not-exists|20120110.js

combo会自动去除不存在的配置或者文件,并且会自动判断contentType,也就是:

  • http://s.domaincdn.com/g=jquery 的响应头里有Content-Type : text/javascript。
  • http://s.domaincdn.com/g=reset 的响应头里有Content-Type : text/css。

实际上使用PHP读取一个json文件,并且从中配置到请求的文件,然后把文件压缩组合然后影响给浏览器是很快的(实际处理的毫秒数占网络传输的时间很小),并且有CDN的支持下,第一个访问这个地址的人慢是完全可以接受的,我试用用Nodejs来做同样的事情,发现效率更高,但是你如果需要进行代码混淆压缩、语法优化等(使用uglify.js)来做实时服务端压缩就有点低效,本来这些都是给手工压缩使用,没有针对实时压缩做优化。测试过压缩一个jquery 1.7.3需要2s以上(虽然有CDN同样是可以接受的,最简单的方法是每次上线自己先访问一下)。

这个压缩和组合的方案其实还很基础,未来要做的还有:

  • 抛弃使用group.json这种明文约定的模式,使用commonjs的规范来做模块化,使用一个模块管理和加载器来让Static Server知道模块依赖来组合压缩。
  • 自动化更多步骤,比如版本号(尽量不用query来刷新)。
  • 迁移到更高效的Nodejs实现。

 

CSS3

这次提到的也不纯粹是CSS3,也有旧的样式规则,使用的原则其实很简单,就是尽量用CSS替换图片达到(甚至超过)视觉稿给出的效果。这种思路其实不新鲜,但是为了做到极致,我们尽量每个图标或者效果用最简单的结构来实现,大部分的效果只有一个标签,可以参考的文章挺多的,请看这里

总体思路是用:after :before 这样两个伪元素来生成额外需求的内容,用CSS3圆角、渐变来做效果,箭头类的还可以利用border 的特性来完成。

 

这次没有到HTML5 的 api做点什么,实际上是产品上也没有需求,所以只是在短短时间内做了这点事情。

Published by

Z.J.T

Product Designer from Wandou Labs

  • http://www.sieuh.com 笑笑博客

    CSS3和HTML5都同来几年了,都没怎么等到应用啊

  • http://www.shuyiyuan.cn/ 蘑菇街

    HTML5应该会很快普及

  • http://www.supermalyhlj.com supermalyhlj

    不错的 支持一下吧

  • http://stylefanr.org stylefanr

    其实我觉得豌豆荚也应该有一个编辑推荐的功能,推荐一些新的应用

    • http://orzpoint.com Z.J.T

      现在有一块是装机必备,都是编辑选的;还有一块是设计奖,也是比较精选的,你可以去看看