这两年来，已经有不少互联网产品开始应用响应式设计，以跨越不同设备和浏览器的限制。而自从IE10发布之日起，各种声音就围绕在开发者们的周围。作为响应式设计的攻城利器，IE10增加了对十几种HTML5 API的支持，例如Web Sockets、Web Workers、历史API、拖曳API和文件API，访问微软IE10开发者指南可以看到完整的支持列表。而如何通过HTML5技术为一个传统布局的站点快速开发出基于瀑布流风格的响应式版，也是开发者们关注的热点话题。
IE10优化版的cnBeta
日前，CSDN记者专访了逻辑适点商业传播设计公司项目总监邹颂兵(以下简称Saber)，他们和cnBeta合作，在IE10下，完全运用HTML5技术开发出了支持触控、瀑布流式布局的新版本。给国内用户带来一种全新的新闻浏览体验，同时也希望能够给业界HTML5的运用提供一些参考。
CSDN记者：这个项目如何分工，开发周期多长，如何划分开发周期?开发环节中遇到了哪些问题，其中哪部份最耗时?如何解决的?
邹颂兵：项目开发团队共三人，一个主开发，一人主设计，一个统筹整个项目，敏捷开发，快速迭代。分工上主要有项目管理、交互设计、UI设计和开发四个部分。开发方面从最初的原型搭建到网站上线总共是一个半月的时间。开发周期是这样划分的：原型搭建和页面元素效果实现1周;后台数据处理3天;前后台数据联调(处理后台数据并显示在前端)3天;十大文章实现1周;调试2周。
开发中最费时的是针对不同的平台的调试，我们遇到的问题可分为三类：
1). 不同分辨率的碎片化问题
不同的屏幕分辨率需要设计不同的信息呈现方式，在页面布局和功能上都要进行相应调整，这过程中会有很多繁杂的问题，比如当浏览器宽度小于560px的时候，文章操作栏占据太多屏幕空间，因此在应该针对这种情况重新设计它的功能和交互方式(如图1-1, 1-2所示)：
图1-1： 浏览器宽度 > 560px 的操作栏样式
图1-2： 浏览器宽度 < 560px 的操作栏样式
开发中最费时的是针对不同的平台的调试，我们遇到的问题可分为三类：
我们在原型设计的时候没有考虑到这种情况，因此在开发中代码结构也要在后期进行调整，这也提醒我们细致的原型设计的重要性。
2). 浏览器兼容性调试
对于某个技术，某个浏览器可能有自己的实现版本，或者根本无法实现。比如移动版safari上文章页的位置总是有问题，原因是我们用CSS的calc计算文章位置来显示文章页，而该浏览器对calc的支持不好，最后我们换成jquery来实现。
3). CSS的维护与扩展
随着web app的结构越来越复杂，CSS文件的规模也会越来越庞大，因此如何在程序设计时规划好样式文件，从而降低CSS的开发、维护成本，提高可扩展性是非常重要的。我们使用SASS和Compass解决这个问题。SASS是CSS3的扩展语言，不仅拥有CSS3的语法和功能，同时增强了CSS的可编程性;Compass则是基于SASS的框架，帮助人们解决浏览器兼容、样式重置等问题，提高开发速度。SASS和Compass使得我们的样式文件变得更加结构化——首先是样式定义的结构化，SASS允许元素样式的嵌套定义，因此可以将子元素的样式定义在父元素中，这样，样式的结构就变得一目了然，便于今后的维护扩展，同时保证了深层级的元素样式能够被正确定义，避免写大量重复代码;其次是文件的结构化，比如我们定义了基本样式文件，将样式重置等基本设置代码都放到这里，同时SASS还支持变量定义，因此可以将ui的颜色定义成变量放进来，在其他文件中通过“@import”引用这个文件，就能使用该变量。这样的话，我们就相当于有了一个全局的“配置文件”，在这里做一处修改能够作用与全部文件。同时，还可以为那些重要的HTML元素的样式定义单独建立SASS文件，方便查找和修改，在部署前，使用Compass将文件合并就可以了。
CSDN记者：IE10对HTML5的支持体现在哪些地方?在该项目中如何体现?
邹颂兵：相比IE9，IE10支持更多HTML5标签，使开发者能够写出语义更加清晰的HTML文件，这对于开发和维护一个web app来说帮助很大。更具语义化的HTML文件能让你对元素的结构一目了然：<nav>中定义的是UI控件，<summary>里面一定是下面这段文章的摘要，这样就缩短了理解时间。以我们的项目为例，单独一篇文章由三部分组成：文章内容，评论和操作控件组成。文章内容用<article>标签表示，其中的标题、发表时间等信息被包含在<header>标签中，具体内容放到一个<section>标签里。评论部分可以看做是一个“侧边栏”，因此使用<aside>标签表示，每条评论都是一个<li>。操作控件起到导航的作用，你可以关闭文章，查看上一篇和下一篇文章以及分享，因此我们用<nav>来标记这个导航。我们使用jQuery template将各个部分做成不同的模板，这样就可以使用对应的API从服务器获取数据渲染这些模板并插入到DOM中，语义化的文档结构帮助我们将文章页的各个部分轻松拆分，从而设计成不同的模板。另外，IE10还支持拖放操作、web sockets以及web worker等HTML5功能，很值得大家尝试。CSDN记者：IE10优化版的cnBeta如何采用响应式设计的?遇到了哪些问题、如何解决的?
邹颂兵：我们使用media query，针对不同浏览器宽度，实现文章页的响应式布局。浏览器宽度大于1230px，文章的评论放到内容的右侧，文章的操作栏置于评论的右侧;宽度在1230px到560px之间，评论放到文章内容的下方，操作栏贴靠在它们的右侧，我们将文章整体宽度设定在浏览器宽度的80%，居中，这样的话，竖排排布时的内容就不会显得很满，影响阅读效果;宽度小于560px，可用面积已经很小，因此我们将文章和评论内容的宽度设为100%，隐藏文章操作栏，需要的时候调出即可。
在开发中遇到了两个小问题：
计算相对宽度
浏览器宽度在1230px和560px之间时，我们开始将文章整体宽度设定在浏览器宽度的80%，文章内容的宽度为该宽度的90%。为了保证紧贴在文章右侧的操作栏不会随着浏览器宽度变化而变形，我们给它一个定宽60px，这就有问题了，文章内容宽度会以文章整体宽度的90%进行变化，但是操作栏宽度并不是10%，因此随着浏览器宽度缩小，文章和操作栏之间就会出现一条越来越窄的缝隙。我们使用CSS calc()解决的这个问题，它是用于计算相对长度的CSS函数，只要将文章内容的宽度变成calc(100% - 60px)就可以了(webkit和moz浏览器需要加相应前缀)。而对于不支持calc的浏览器，仍设置其宽度为90%。
在js中使用media query
当页面样式根据media query定义的宽度范围发生改变时，我们希望js在这个时候能做点事情，但是用js检测到的宽度和media query定义的宽度不匹配，解决方法是使用Modernizr提供的mq函数来匹配CSS中定义的media query，也可可以使用Enquire.js之类的js库。
CSDN记者：在设计方面，尤其是瀑布流和ui的设计上，你们有哪些考虑，有什么注意事项?
邹颂兵：在设计上，之所以采用瀑布流的形式，是因为cnBeta内容量非常大，每天更新很频繁，而且文章没有明确的分类，这种聚合式的内容很适合瀑布流排版，这个排版尽可能多的利用不同分别率展现内容，并且通过无限下拉的滚动加载方式，也很好地让用户方便查看更多文章。
UI方面，我们一是要与cnBeta本身的品牌风格统一，不能让用户觉得“哇，这还是CB吗”。另一个就是我们是从一款Web App的角度去定义这个体验的，那么当在IE10全屏浏览时，界面上的按钮是否足够满足用户的操作需求、按钮的大小是否适合触摸等，都是需要考虑的问题。
CSDN记者：该项目中用到了哪些开发工具或框架或开源产品?
邹颂兵：用到的开源js库包括
1). modernizr: 低版本浏览器的功能检测和优雅降级;
2). turn.js: 十大人气文章的翻书效果;
3). jquery masonry + infinitescroll: 实现新闻的瀑布流布局和无限加载功能;
4). jquery nicescroll: 改变浏览器滚动条的样式、滚动速率等;
5). jquery templates: 基于HTML的模板，允许在HTML中定义变量，使用js对象或数组定义的数据给变量赋值后，模板就变成普通的HTML片段，可通过jquery插入到DOM中。我们根据cnBeta提供的后台接口定义了不同的模板，使用从服务器获得的数据渲染对应的模板，插入到DOM中;
6). jquery tipsy: 生成类似Facebook 消息提醒框的控件;
7). trunk8: 根据文本框的尺寸裁剪文字，用于新闻摘要;
开源CSS框架：
1). SASS
SASS是CSS3的扩展语言，它不仅拥有CSS3的语法和功能，同时增强了CSS的可编程性。你可以在SASS中定义变量和函数(mixins)，还可以将子元素的样式直接定义在父元素的样式当中;SASS还允许样式继承，比如你可以在元素A的样式定义中继承B的样式，连同B的所有子元素的样式也都被继承过来。样式定义的结构变得更加清晰，开发和维护都更加方便。测试时将SASS文件编译成CSS文件即可。
2). Compass
Compass是基于SASS的开源框架，将常用的SASS功能以函数形式提供调用接口，比如修复float元素的样式问题，你可以直接在样式中引入”@include clearfix;”,Compass会将这段clearfix函数实时编译成CSS代码;如果想为一个元素加入一像素的圆角，使用“@include border-radius(1px);”，Compass会在border-radius前自动加入各个浏览器的前缀，编译到CSS文件中。不仅如此，Compass还支持插件功能，如果想使用bootstrap，下载对应插件，在SASS文件中”@import”这个插件就可以了。
开发工具
1). Vim: 神器…
2). Diffmerge: 项目的文件合并
3). IE10的F12开发工具
CSDN记者：您对有计划做跨平台web app的团队有什么建议?
邹颂兵：我们认为，跨平台web app最大的特点——同样也是它最大的优势就是，你很容易就能够将桌面端的业务逻辑应用于移动平台，从而让你的服务接触到最广大的受众。因此这里最重要的工作就是如何针对移动端进行优化：在功能上，是否要缩减不必要的功能，是否要针对某个设备加入多点触控功能;你的UI是否适合触摸等等。在这些问题都考虑清楚之后，接下来就是如何实现跨平台，我们采取的方式是响应式布局，这种方式易于开发、保证各平台体验的一致性，但是很费流量。还有其他一些实现跨平台的方式，比如开发一个针对手机端的简易版网站，速度快、节省流量，代价是牺牲一些界面的美感;同样还有移动端混合模式的web app，你可以使用本地的UI控件，内容来自网站，这种方式极大提升了用户体验，但还是增加了一些跨平台开发的成本。你可以看到这些跨平台的方式各有利弊，因此应当从功能性、响应率、开发成本以及流量等方面做一个权衡。
无论使用那种方式，将CSS规划好是一项必要的工作。你可以使用SASS 和Compass来规划CSS，比如可以定义一个_base.scss文件来包含一些基本工作：样式重置、设置变量等;为不同元素的样式定义不同的SASS文件，便于查找和修改，在编译时再决定合并哪些文件。
最后是业务逻辑的分层。web app 的结构越清晰、功能之间的耦合性越低，就会使跨平台的工作变得更加容易，这是毋庸置疑的。目前，像Backbone.js这样的前端MVC框架受到广泛关注，我们也在考虑使用Backbone来重构代码，并且我们相信，随着web app的功能越来越复杂，MVC将会成为人们架构前端代码的普遍方式。
后话：关注响应式设计的公司很多，对它的争论也没有停下来过。但事实是越来越多的公司开始尝试这种设计模式，新版的cnBeta是一个很好的展示。IE10加紧了对Web标准的拥抱，除了对HTML5新特性的支持，同样，IE10提供了足够丰富的CSS支持，在许多新的CSS工具中都提供了动画、过渡和转换。IE10还对下一代布局工具提供了实验性支持，例如CSS网格布局、CSS多列布局和CSS区域。开发者们不妨多关注一下。
