响应式设计:BosonGlobe.com的HTML5响应式设计(2)

设备识别和适应屏幕的尺寸带来的问题

Marquis：到目前为止，我们根据屏幕的尺寸来确定显示什么样内容和提供怎样功能。所以，不存在这样的情况，“OK，如果用户使用的是安卓客户端，他们获取到的是XYZ，如果用户使用iPad，他们获取到其他的内容。”如果用户使用的是触控的设备，特定的功能和意愿需要额外添加Javascript来实现。因此，我们只给特定的用户提供特定的功能。我们不会说iPad用户使用的是这种布局，而是某个尺寸的设备会使用什么样的布局。

Parker：我们从没做过用户代理检测，这是个大忌。因此，网站完全是开放式的。我们专注于性能和兼容性，我们检测设备，以便按照其需求动态加载内容。这就是为什么每个设备下载的内容都会有非常简洁的体验。可能这个平板能够支持触摸事件，而另外的一个就不行。由于分辨率的不同，它们获取到的布局就会不同。

Marquis：显然，我们的计划并不包括在所有情况下，任何人都能够使用游戏机打开它，但是，最近有人这样做的时候，它的确表现地非常出色。

Parker：我认为最大的优势就是我们采取的是一个不可知的办法，而不是关注特定用户的需求。我们的方法完全关注兼容性，这样一来，我们使用jQuery的时候，拿到测试设备的时候（我们不间断地拿到这些设备），在这些我们从没见过的设备上进行测试的时候，Globe看上去非常棒，我们不需要担心兼容性的问题。随着设备源源不断地面世，这会是一个兼容的方法，并且能够在旧的设备上使用，因为我们在做渐进式增强。不久之后，在你的Newtons和旧版的Palms，或者类似的设备，都能够阅读Globe。

为什么这个功能现在才实现？

Parker：我想，也许一年半之前应该实现的，这只是把一些技术碎片拼在一起的问题。

Marquis：我认为，之前，某些方面是应该能够实现的。我是说，HTML5为目标功能提供更多可用接口，比如说，检查设备是否提供触屏支持，从技术上来说，这是通过HTML5来实现的，虽然并不是利用HTML5标记来实现的。然而，毫无疑问，HTML5为我们实现特定的下载提供了支持。说到标记本身，HTML5通过另外的语义，为我们提供了很多功能。利用HTML4，这些功能也能够实现，只不过标记并没有那么丰富的语义。

Parker：对于我们来说，我们一直关注通用访问的问题。我们大部分精力都花在这上面，算下来已经有10年了，尤其是我。我想，大多数人只是在把这些技术碎片拼起来的时候慢了一步，现在我们拥有了核心工具，我们需要让这些工具可用。比如说，一年前我们写了一本书，关于渐进式增强。那就是我们创建Globe的基础。以一种简洁、不显眼的方式在CSS和JavaScript上增加简洁语义的HTML语言。现在我们做了更多区分，不如说我们提供更多的兼容性以使用户得到更好的体验。说穿了，我们所做的这些全都取决于用户的屏幕尺寸，下一步，我们将把目标转向布局。

Marquis：我想，我最喜欢举的例子就是我们打算做的填字游戏，看上去就像是网站上的一个小部件一样，我们开始使用由服务器端产生的有丰富语义的标记。因此，不管你的设备的兼容性如何，你都能获取到这个字谜游戏，就像在一张平整的报纸上填答案一样，没有什么区别。今后，如果用户的浏览器支持本地存储，就是浏览器能够存储数据的问题，我们就能添加一个按钮，让用户保存未完成的游戏，下次打开的时候接着玩。

响应设计下一步是什么？

Paker：我们给企业做了很多应用设计，或者类似的内容。在我看来，做更实用的东西会是一个挑战。环球报证明，在内容布局上，可以做出一些很酷的东西来。但是，如果你有一个应用程序，它有丰富的可视化GUI，或者你正在使用类似商务应用的表格数据。我认为这是我们下一件要证明的事情。我有信心能做到的，这只是投入时间去做的问题。我们确实在为一些这个领域的客户，做一些类似的项目。所以，这是一个有趣的时刻。

其他挑战

Marquis：第三方服务是我们遇到的最大挑战之一。仅仅是在提供广告和其它功能上，我们不得不和他们周旋，找到他们默认提供的标记和脚本。

Paker：在设计过程中，需要考虑的一件事就是，目标设备的广泛程度。从智能手机到宽屏桌面电脑，从1200像素到更大的像素。所以，在设计这些网页时，我们思考把这些设计结合在一起会得到什么样的产品。

Globe和Upstatement之间有非常紧密的合作关系，关于屏幕尺寸的问题，还有很多需要完善的地方。我认为，它肯定会改变设计过程，因为这没有人会坚持一成不变的形式。

Marquis：这之间没有一个交接的过程，在你把它交给到下一个团队时，他们仅仅是运行它。他们需要经常性的对话。团队之间需要经常交流。

这时，Filament Group中负责UI的 Scott Jehl，加入了我们的对话，讨论他们在开发中用到的工具。

你们使用的是什么工具？

Scott Jehl：在整个网站中，我们大部分使用的是jQuery，我们在几个地方使用jQuery Mobile，比如，照片和触摸交互。我认为，在加载jQuery之前，我们为代码创建一个自定义框架，来处理JavaScript的动态加载。因此，我们只需要加载很少一部分内容，然后动态加载剩余部分。正是这样的内容使它变得非常迅速。它是一种很不错的行为。

当然，它使主要是jQuery，然后我们在它上面的插件，不仅使布局有视觉上的相应，还有行为上的。改变所有组件的行为、适应触摸、不同的交互和条件，这些都会使情感在确定的内容上而不会在别的方面。

在许多方面，我们使用和其它站点一样的方式来使用jQuery。jQuery本身什么都不做。作为一个框架，它会给你提供可以使用的工具，我们在此基础之上进行开发。我认为最主要的区别，对Globe来说这不是一个独特的功能，我们发现如果我们动态加载jQuery，在老版的设备上会有更好的表现。比如一款老版的Blackberry，4.5或5版，没有运行jQuery。由于网站创建的方式在游戏中会出现延迟，并且在这种设备只总提供基本功能能够有更好的表现。

本文编译自Lisober，原文地址。