【五个非常重要的移动Web内容适应设计理念】

英文原文：Mobile web content adaptation techniques

　　译者：赵建光

　　如果你要构建移动网站，那末本文可以帮你选择适合的技术方案。本文并没有具体描写如何去开发，只是介绍应当如何选择正确的方法。在开始之前我们有必要明确1下这次实践的目标。1般来讲，想要构建网站的人可分为两大类：

• 改造现有的网站，使其可以通过移动装备访问；
• 从头开始构建全新的移动网站。
  

　　这两种目标是截然不同的，所以相应的技术方法也不同。前者的目标可以归结为：构建1个无缝缩放的网站。这样的网站可以在不同尺寸的屏幕上正常显示，而网站原本的结构、导航等则保持不变；后者的目标是构建1个全新的移动网站，以满足移动用户的需求（不管用户是不是处于运动状态），这需要不同的视图设置和交互设计。

　　为了辨别现有的不同技术，本文使用了术语：“无缝缩放”和“内容自适应”。前者的意思是当现有的网站面向不同分辨率的屏幕时具有更大的灵活性和适应性；后者的意思是为移动用户量身定做。

　　内容自适应技术的演化

　　21世纪的头 10 年里，移动 Web 和桌面 Web 之间的区分还是很明显的。当时只有1种技术可以实现不同装备之间的内容适应――即在服务器端进行内容适应。这就意味着服务器要对装备进行辨认以切换内容保证其正确显示。

　　实际上，服务器真个内容适应技术很重要。如果没有此技术，Web 上的内容将没法在装备上正确显示。但是，在近 5 年情况变得更加复杂了。各种手机、平板电脑的出现使得移动阅读器与桌面阅读器之间的功能差异愈来愈小了。即便是最普通的功能手机也内嵌了功能丰富的阅读器。这就致使了3种结果：

• 移动装备和桌面装备之间将不再有明显区分。
• 既然这么多的装备都具有了功能强大且支持 JavaScript 的阅读器，也就有愈来愈多的新技术为这些新装备提供内容适应服务。
• 有些人质疑内容适应技术的必要性，理由是智能手机几近可以显示所有网站的内容。
  

　　本文旨在介绍诸多内容自适应技术，说明各技术的优缺点，以供参考。

　　下表列出了现今的主流技术：

此表可能存在争议，由于，为了简洁起见，1些复杂的及细微的特点在表中没有表现出来。

　　1、响应式设计

　　响应式设计这个术语之所以如此流行是由于 Ethan Marcotte 于 2010 年 5 月份在超具影响力的网站A List Apart 上发表的1篇文章及其 2011 年发表的书籍《Responsive Web Design》中都极力推行该术语。Ethan 介绍了1系列的设计原则和技术，能够保证网站在任何情况下都可以在移动装备上运行。实际上，流畅的设计1直是资深 Web 开发人员的寻求目标，但是 Ethan 所介绍的是1套具体的技术，大多数 Web 开发者都可以在不使用其它新工具的情况下轻松实现这些技术，这就是该解决方案的诱人的地方。

　　上述的响应式设计是基于以下3种技术的：

• 流体网格――确保底层页面的网格可以很好地适应于各种尺寸的屏幕。
• 响应式图象――图象在可变网格中可以正确显示。
• CSS media queries――所使用的 CSS 样式可适用于不同分辨率、不同类型的装备。
  

　　这些技术使得1个 HTML 页面可以运行于不同装备，到达我们所期望的结果：采取这类技术所构建的网站可以很好地支持旧版本的阅读器，可以在所有桌面阅读器及大多数智能手机上运行。Media Queries 上有很多这样的例子。(注：Ethan 那本书的发行者 Jeffrey Zeldman 后来指出，响应式设计不应仅仅局限于 Ethan 所介绍的技术，而应当包括所有可以实现这1目标的方法。)

　　响应式设计这1术语只是该技术的标签。该技术包括了1整套的设计原则，以实现无缝缩放功能。可是，响应式设计容易与移动 Web 相混淆，致使开发者产生错觉，他们会以为只要使用了响应式设计的网站就是对移动用户友好的网站，就完成了移动网站的开发。固然了，做1个反应速度快的网站是好事，但缺少1个充分发挥移动装备本身功能的解决方案。

　　说实话，Ethan 其实不提倡用这类方法来构建移动网站，他有1个很明智的建议：要根据具体项目来选择适合的方法。他在书中指出：“最重要的是，Web 响应式设计不是用来代替移动网站的。响应式设计只是1个设计理念，1个前真个开发策略。既然是开发策略，这就意味着要根据具体项目来做出正确的评估。

　　作为1种实现移动网站的方法，响应式设计存在以下3个问题：

• 只可以做到无缝缩放，而没有实现内容自适应。从移动领域的角度来看，这类技术效力低下。（即便图片在某移动装备上不能全屏查看或根本没法显示，也需要将全部图片下载下来。）
• 由于响应式设计理念中，HMTL 代码是要传递到所有装备中的（不管大小），这就使得它不能很好地支持低端装备。波士顿环球报网站上大肆宣扬：“所谓的响应式设计杰作，在主流手机（如：Motorola RAZR、Nokia 6100）上却不能很好地运行，乃至根本没法运行。”
• 不能很好地处理实时数据，所以用户体验不够好。
  

　　响应式设计虽然可以实现无缝缩放，但是所支持的用例很有限，其实不是1个很好的移动 Web 解决方案。

　　2、Mobile-First 响应式设计

　　自从 Ethan 的文章及著作发表以来，许多人指出，如果将响应式设计反过来用可能会更公道：如果你设计的网页风格默许就是对移动用户友好的，那末1些响应式设计问题也就不存在了。特别地，避免下载没必要要的大图片问题就能够由该方法来解决。目前，这类技术的最好实践是：首先为所有装备提供适合的图片，然后用这些图片来代替大图片。来自The Filament Group 的 Scott Jehl 已做到了这点。

　　Mobile-First 设计理念的另外一个优点是：该设计理念可以作为1个楔子，使得设计人员找到了1个充分的理由来清除多年来在桌面网站上积累下来的没必要要的混乱。由于依照 Mobile-First 的设计理念，这些混乱是必须要被剔除的。

　　Mobile-First 响应式设计是对原有技术的重大革新，但也存在以下问题：

• 只实现了无缝缩放，而没有实现内容自适应。
• 桌面网站需要从头开始重新设计。或许你认为这反倒是件好事。
  

　　总之，如果你的目标是构建移动网站，Mobile-First 响应式设计是唯1实用的响应式设计理念，由于从低端装备到桌面阅读器都可使用该方案。

　　3、渐进增强（PE）

　　渐进增强（PE）是1个新近流行的有关内容适应方面的术语。最初是在约 10 年前由 Steven Champeon 和 Nick Finck 在他们的文章《Inclusive Web Design Future》中提出来的，该文章发表于SXSW。渐进增强的核心思想是：在单1的网页上实现 JavaScript 增强逻辑，使其能够服务于所有类型的装备。如果装备过于简陋，则 JavaScript 可能得不到运行或报错，因此用户体验会很差；如果是智能装备或桌面阅读器，则 JavaScript 会逐步向页面增加新的功能，充分发挥装备的硬件功能。理论上讲，分层是没有上限的，可以逐步从功能手机阅读器渐渐过度到台式电脑阅读器。

　　PE 的诱人的地方是很明显的：它可以满足所有类型的装备（包括低端装备），由于它是故障安全的解决方案；高端装备的功能又不会由于这个“最低限度共同点”而遭到限制。刚刚发布的 jQuery Mobile 库就用到了 PE 解决方案，实际上，PE 将内容适应逻辑从服务器端移到了客户端。这类方案存在两个问题：

• 该技术的核心“渐进增强”的履行是需要1定时间的，所需时间的长短主要取决于装备的硬件性能，固然也可能与网速有关。举个例子，某些型号的黑莓手机理论上是支持 JavaScript 的，但实际上运行速度太慢以致于没有甚么实际用处。
• 和以往的技术1样，该技术中多个用例共用同1个基本的 HTML 文件，这在功能上似乎很受限。
  

　　实际上，PE 技术的最好利用是消除移动装备之间的差异，而不是作为1个综合的内容适应解决方案。

　　4、服务器端内容适应技术

　　服务器端内容适应技术早在 12 年前移动 Web 刚刚出现时就开始使用了。该技术依赖于装备检测库或依赖于安装在 Web 服务器（或远程 Web 服务）上的数据库，检测访问网站的装备并返回装备的性能信息。服务器端可以根据这些信息对页面进行微调，使之很好的适应装备的性能。由于服务端内容适应技术中包括了装备检测技术，所以有时也被称为“阅读器嗅探”。虽然也有很多反对者，但阅读器嗅探确切很稳定很精准，据统计，该解决方案检测装备的精准度到达了 99.5% 以上。

　　该技术的有效性不言自明：它依然是迄今为止最经常使用的内容适应技术，几近所有重视移动用户体验的知名互联网公司都在使用该技术，包括 Google、Facebook、Amazon、Youtube、Ebay 和 Yahoo。你很难找到1个没使用服务器端内容适应技术而又获得成功的移动网站。

　　但是，服务器端内容适应技术也不是没有缺点。其缺点主要有以下两点：

• 所用到的装备检测技术需要 Web 开发者不断进行更新，并且大多数装备检测技术都是商业化的。
• 不能很好地使用阅读器的实时数据（例如，GPS 定位或装备当前的方向）以帮助 Web 开发者更好地服务于用户。
  

　　目前，WURFL 和 DeviceAtlas 是装备检测方面的领军产品，这两款产品都是商业化的。

　　5、混合方法

　　最后要介绍的技术是混合方法，该方法把服务器端内容适应技术与渐进增强技术结合在了1起。这类技术的工作原理是，当服务器收到客户真个页面要求时，服务器端首先向客户端提交1个基于服务器端内容适应原则的初始页面，然后由客户真个 JavaScript 来捕获装备的性能信息并返回给服务器端，服务器端根据所捕获的信息对发向该装备的后续页面进行微调，使页面更好地适应当装备。

　　该技术首先是由 Bryan Rieger 和 Stephanie Rieger 发布的，他们在 yiibu.com 上很详细地记录了他们探索各种内容适应技术的曲折而漫长的道路。有趣的是，他们在尝试该技术之前几近已尝试过了所有上文已介绍过的技术。

　　他们使用了装备检测技术和阅读器属性“隐性数据库”，还使用了 modernizr-like JavaScript 脚本。在此不详述细节，建议大家看看他们的介绍：“适应：为何响应式设计始于服务器端？”

　　这类混合方法对用户端和服务器端来讲都是最适合的方式――既可以利用高速的服务器端内容适应，又可以利用来源于装备本身的属性来调剂页面。用户可以得到1个初始的合适当前装备的页面，又不会有甚么性能开消，并且后续页面会根据此页面自动进行调剂。但是，这类方法也存在两个缺点：

• 实现起来相对复杂，这点 Riegers 两位也怅然承认。复杂性源于以下两个因素：复杂性源于以下两个因素：1）需要建立1个数据库以保存阅读器的属性；2）需要写 JavaScript 代码，以实现从阅读器中提取属性并存入数据库。
• 首次访问服务器时，在用户得到有用信息之前，需要1个从阅读器到服务器之间的来回时间的延迟开消。在后续要求中可使用 cookies 来消除该延迟。
  

　　总结：

　　所有可用的技术都介绍过了，接下来你会如何选择呢？固然，要视具体情况而定。笔者认为，任何以“单个 HTML 文档来满足所有装备”为条件的技术，本是就是有缺点的，就犹如：大多数的电视内容不是屡次播放的电影，大多数的网站也不是纸质报纸的完善复制品。用户对某些类型的网站（例如博客）的交互需求是有限的，这样单1的1套交互方案是可以同时满足桌面与移动用户的。但是，在更1般的情况下，如果也让桌面与移动用户共用同1套方案，最好的结果是：功能严重受限； 最坏的结果是：根本没法运行。

　　正如1位 CTO 所说：“客户端功能检测如何将1个航空公司的介绍性网站转变成为移动电子登机服务呢？渐进增强理念是以‘所有用户的需求都相同，只是界面布局不同’的假定为条件的。”

　　如果航空公司所构建的移动网站和桌面网站采取相同的基本模板，这样真的可行吗？如果你真的想提供1流的移动用户体验，那末响应式设计和渐进增强将得不到很好的体现。你在 Alexa 网站上快速看1眼就会知道，想要提供优良的移动用户体验需要对 HTML 进行量身定做，而不是简单地调剂像素和 div 元素。

　　总之，如果你的网站只是运行在1些高端移动装备上，并且你不会特地去照顾某些移动 Web 用户，那末你可以采取响应式设计方案，或 Mobile-First 响应式设计方案。如果你的网站元素不太复杂，那末这两种方案会很见效。

　　如果你想提供1个全新的移动用户体验设计或你想满足所有的移动装备，那末你只能使用服务器端内容适应方案或混合方法。这也是所有知名互联网公司都采取这类方案的缘由。

　　上述观点都是基于对新媒体的信仰：移动 Web 是1种新媒体，绝不是旧媒体的缩略版本；是1种功能强大的媒体，而不是功能弱小的媒体；是1种全新的 Web，而不是合成的杂牌 Web。只有这样看待和使用该新媒体，它才能得到最公道、最成功的利用。

　　参考文章：

• Not a mobile web, merely a 320px-wide one
• There is no Mobile Web
• Responsive images part 1
• State of mobile web development, part 1/3: the problem
• State of mobile web development, part 2/3: progressive enhancement
• State of mobile web development, part 3/3: the mobile industry’s failings
• Benchmarking your device detection solutions

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠