“一个网络”，两种口味：响应性对适应性

淩亂°似流年 2022-04-24 04:34 129阅读 0赞

日期：2013-5-16  来源：[GBin1.com][]

[![“一个网络”，两种口味：响应性对适应性][title.jpg]][title.jpg 1]

***编者的话：这是Mobify的CEO，Igor Faletski发表的一篇博文，[Mobify][]，电子商务优化平台，为智能手机和平板电脑提供了适应网站的工具。***

你可能听人说过，“我们生活在后电脑时代”。这对网络开发者而言意味什么？它意味着你的网站，有30%到50%的流量来自于移动电子设备。它同时意味着，不久之后，桌面用户或者笔记本电脑用户将会成为网络的少数派。

面对这样用户模式构建的转变，我们又要如何应对呢？我们已经跨越了m-dot或是t-dot时代，步入了一个由响应和自适应设计技术统治的时期 - W3C将它称为“一个网络途径”。W3C最主要的建议是：“所谓的‘[一个网络][Link 1]’是指，就合理性而言，网络应该为用户提供同样的信息以及服务，无论这个用户使用的是什么终端设备。”

对于开发者而言，使用“一个网络”不仅是让网站今时今日在智能手机或者平板电脑上畅行工作，更可以在今时今日，我们不能想象的，面向未来的终端上工作无误。

当前我们有三种最为普遍的，开发“一个网络”网站的方式：使用响应式设计；客户端适应性设计和服务器端适应性设计。

这三种开发设计模式，并没有谁最好或者谁最差之分，每一个都各有千秋，有优点，也有缺点，而聪明的开发者会在开发前，考虑到这三种方法的优缺点，从而选择一个最为合适的途径。

## [响应式设计][Link 2] ##

响应式网络设计是最为大众的“一个网络”的设计方式。这种方式使用了[CSS][]媒体查询，用于根据不同终端显示器的大小而改变网站的显示。从波士顿环球报，到迪斯尼，再到Indochino，响应式网站的数量正在迅速增加。

这种方式一个最为主要的优点是，对于所有的终端设备，设计者只需要使用一个模板，在CSS中定义不同屏幕大小如何显示内容就可以了。而且，这些设计者可以继续使用他们所熟悉的技术，例如[CSS][]，[HTML][]。另外，现在有更多的，友好响应的开源工具，例如[Bootstrap][]或是[Foundation][]，这些开源工具简化了搭建响应网站的过程。

另一方面，完整的[响应式设计][Link 2]很少有快捷便利的方式。要做到响应，组织者往往需要承担一个完整的网站重建。

设 计和测试会非常的繁琐，因为要针对每一种可能设备的用户体验做出设计是非常困难的。我们看到响应式网站的布局看起来像是一块块拼图，并不是契合的一体。响 应式网站设计最好是应用在移动设备优先的开发上，即移动设备用例在开发中作为最优先考虑。渐进增强处理，在将设计延伸至平板电脑和桌面用例上。

性能也是响应式网站的一大棘手难题。在Mobify，我们最近完成的对于15个流行的电子商务网站的分析指出，在这些网站中，主页加载平均是87个资源和1.9MB的数据，一些响应网页竟然有15MB大小。

加 载的数据之所以这么大，是因为响应式网站需要覆盖所有的设备。你的用户只用一种设备，他却需要等待所有的界面元素和资源全部加载完全，才可以浏览使用。简 单地说，性能问题已经触及了你的底线。在智能手机上，用户等待一秒钟的时间，转换率会下降3.5%。只需要3秒，用户就会选择完全离开你的页面了。

当响应网站很快的成为约定俗成的标准，它同时为在线商务带来了新的挑战，其中包括如何处理图片，如何优化移动设备的性能，以及当网站转变为移动设备优先时，不得不面临着重头构建的问题。

## 客户端适应网站 ##

适应性设计是在特定的设备和环境的基础上，依据响应式设计的本质，提供具有针对性的用户体验。它使用[JavaScript][]提供的先进功能和强大的可定制性来 丰富网站。例如，自适应网站可以只对Retina显示屏（如新[iPad][]，iPad mini）提供Retina素质的图片，而标准的显示器只能接收低像素的图片。

适应性设计有两种，一种是在客户端的，即在用户的浏览器上应 用适应性，另一种是服务器端的，需要繁重的检测大量的设备然后加载适当的模板。客户端适应性网站的用例如Threadless和ideeli。适应模板方 式最给力的一点是，在不同的设备之间，重复使用一套[HTML][]和[JavaScript][]，如此大大简化了管理和测试的工作。

客户端适应网站意味 着你不需要重新构建你的网站。取而代之的是，你可以在传输移动响应布局的同时，构建现有的内容。对于一个专家级的开发者而言，这个方法还可以专门针对特定 的设备或屏幕分辨率。例如，对许多Mobify的在线时装零售客户，他们的移动流量95%来自于iPhones。客户端适应意味着他们可以专门对 Apple智能手机进行优化。

不同于相应设计，适应模板确保了在用户的终端上，只有必须的资源被加载。因为设备检测被移到了移动终端自行检测，CDN网络，例如Akamai和Edgecast，就可以使用大部分的缓存功能而不破坏用户体验。

客户端适应方法比起响应设计，在使用上有着更高的门槛。开发人员需要扎实的JavaScript基础才能使用这项技术。同时它还需要依靠网站已存在的模板作为基础。最后，因为客户端适应性是在你已有的底层代码上添加一层代码，你必须保持你的网站作为一个整体而发展。

## 服务器适应网站 ##

我们可以用多种方法，通过服务器端插件和用户代理检测来完成服务器端适应性网站的开发。用服务器端适应性开发的网站包括Etsy，One Lings Lane和OnlineShoes.com。

我们为什么要选择服务器端适应来开发网站呢？通常它为每一个设备提供一个独有的模板，使得网站具有更强的定制性，并且它在服务器端保留着设备检测逻辑，使较小的移动页面加载的更快。另外，现在还有许多服务器端插件提供给大部分CMS系统和电子商务系统。

这 种方式并不适合胆小者 - 它通常要求你的后台系统做出重大变化，这可能会需要一个漫长的（以及昂贵的）实现过程。管理多个模板的要求增加了日常维护的成本。最终，这种方式还会在服 务器重负载的情况下，遇到性能问题。当移动用户代理检测工作在服务器端，像Akamai这样的CDN部署的共用缓存机制则需要关闭。否则它将导致桌面用户 和移动用户的体验变慢。

当然，多数公司仍旧在与响应方式做搏斗，他们还没有准备好面对更复杂的口味-适应性。然而，越来越多的竞争和移动通信，将会推动越来越多的组织在三种方式中不断试验，最终找到一个最为适合他们用户的方法。

via [ 极客社区][Link 3]

来源：[“一个网络”，两种口味：响应性对适应性][GBin1.com]

[GBin1.com]: http://www.gbin1.com/tools/design/20130516-responsive-vs-adaptive/
[title.jpg]: http://www.gbin1.com/tools/design/20130516-responsive-vs-adaptive/title.jpg
[title.jpg 1]: http://www.gbin1.com/tools/design/20130516-responsive-vs-adaptive/index.html
[Mobify]: http://www.mobify.com/
[Link 1]: http://www.w3.org/TR/mobile-bp/#OneWeb
[Link 2]: http://www.gbin1.com/bloghome.html?tag=responsive
[CSS]: http://www.gbin1.com/bloghome.html?tag=css
[HTML]: http://www.gbin1.com/bloghome.html?tag=html
[Bootstrap]: http://twitter.github.io/bootstrap/
[Foundation]: http://foundation.zurb.com/
[JavaScript]: http://www.gbin1.com/bloghome.html?tag=javascript
[iPad]: http://www.gbin1.com/bloghome.html?tag=ipad
[Link 3]: http://www.gbtags.com/gb/share/1025.htm