译者注:在HTML5真正变革各平台的开发模式前,定需要取得某些根本性的突破。今年的的一大突破就是“响应式设计”的发展。从根本来说,响应式设计需让内容适应任何屏幕尺寸。今年响应式设计最引人注目的案例要数Boston Globe推出BostonGlobeocom。这篇文章转述了ReadWriteWeb与BostonGlobe的开发团队Fliament之间谈话内容,其中详细介绍了开发中遇到的一些问题。希望这篇文章能够给开发者们带来一些心得和体会。
周一,波士顿环球报发布了面向手机的付费网站—BosonGlobeocom。不要把它和官方免费旗舰站点Bostonocom混淆在一起。这本身并没有那么有趣。然而,HTML5开发社区对BostonGlobeocom大加赞赏,称赞网站的内容根据屏幕的大小进行调整是种创新,这种创新叫做响应式设计。
响应式设计允许Globe的内容根据屏幕的可用尺寸进行重新调整,在与移动设备、屏幕尺寸和移动设备上的内容显示的这场较量中,这是个胜利。下面是和Globe响应式设计的创始人进行的一次深度讨论。
Filament团队向HTML5跨出了一大步
波士顿环球报得到了Fliament团队的服务支持,Fliament团队隶属于波士顿的一家设计发展公司,这家公司致力于开发辅助功能。下面是ReadWriteMobile和三个Fliament团队的设计师和合伙人之间的谈话全文,这三个人在开发响应式设计中做出了巨大贡献。Mat Marquis在Globe的开发中是主力,ToddParker和ScottJehl是他的搭档。EthanMarcotte,响应式设计之父,这个时候不便发表评论。
通过下面的视频来看看BostonGlobeocom的响应式设计师如何实现的吧。(注:视频播放不了,猜想是网站进行了IP限制。)
这个项目是如何启动的
ToddParker:我想我们应该是在11月正式开始实施这个项目的。界面模板的准备,和设计师打交道一直持续到4月底,然后我们做了一些整体的准备工作一直到夏末,之后项目就进入正式实施的阶段。
技术挑战
我认为,这项技术目前只在博客、文件夹等类似的应用中出现过。都是一些零散的碎片,没有一个完整的体系。我想会有一个用户大胆地说,这个功能对他们来说很重要。因为这项技术比一般的web开发要花费更多的时间和测试,而一般的web开发只需要把几部分拼在一起就OK了。
因此,说到技术难点,我认为应该是媒体查询。很多东西都要涉及到媒体的查询,但是目前下载到的IE版本对此不提供支持。因此,我们首先要做的就是写一段代码实现媒体查询。虽然还有其他的方式能够实现同样的功能,但是对于我们的需求来说实在是太慢了,因此我们创建了响应JS,这是我们实施这个项目必须要解决的第一步,我们在这上面花费了很多时间。
另外一个大的挑战就是,我们正在解决的响应图片问题。到目前为止,我们做的所有工作都采取移动优先的方式。如果你访问Globe的站点,就会发现文章的配图都有1000像素宽,他们非常大并且色彩丰富,像大片一样。而我们在HTML中需要引用较小的图片,这里我们用到一个小技巧,如果你使用平板或者桌面机,并且支持下载响应模式的话,就可以访问高分辨率的图片;如果你使用手机,访问到的就是低分辨率的图片,如果你使用浏览器或者平板,访问到的就是高分辨率的图片。因此,给对应的设备发送相应的图片是我们需要解决的另一个技术难点,在CMS环境中实现这个功能确实花了我们不少功夫。
广告带来的挑战
Marquis:我认为真正的挑战之一就是不知道会遇到什么样的挑战,这些挑战可能是过去没有遇到过的问题。因此,这需要新的解决方案,但是现在没有答案。这会是一项艰巨的任务。
Parker:我认为,在权威地解决这些问题上我们做得还不错。目前仍比较棘手的问题是广告。使用JavaScript实现广告功能,会给页面增加非常多的问题。把这些内容放到沙盒中,并且不把整个页面弄得一团糟的确是一个非常棘手的问题。
Marquis:现在我们有了更好的解决方案。一般原则是,从用户的角度来看越突出,我们就越成功。我们没有留太多空白,也没有占据整个页面的广告,我们只有两个框式广告和两个悬框广告,这些处理起来都非常简单。我们可以把这些放到沙盒中,以免这些广告破坏网页上的其他内容。
Parker:广告带来的挑战除了广告的技术方面的问题,还需要保证广告按照我们的方案能够运行得很好,这的确非常棘手。而另外一个问题就是广告出售的方式并没有按照我们的方案来实施。他们把空白部分出售给广告商。我们覆盖了如此大的范围,根本没有办法区分他们。对于一个7英寸的Android平板来说,这样合适么?对于Kindle来说合适么?因此,我们只添加一个广告,在页面中使用CSS,使它看上去显得别具一格。你看,这就是单一广告的模式。