资讯频道 → Web前端
阅读更多

3顶
0踩

Web前端

原创新闻 一个网络，两种口味：响应性 vs. 适应性

2013-05-20 09:56 by 见习编辑 tyygming 评论(1) 有6424人浏览
responsive 响应式 设计 css javascript

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

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


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

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

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

当前我们有三种最为普遍的开发“一个网络”网站的方式：

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

响应式设计

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

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

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

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

性能也是响应式网站的一大棘手难题。在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 极客社区

来源：“一个网络”，两种口味：响应性对适应性
来自: www.gbin1.com
3
顶
0
踩
评论 共 1 条 请登录后发表评论
1 楼 q364035622 2013-05-20 13:00
[color=olive][color=brown][color=red][/color][/color][/color]...........

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 数字图像处理第8章课后作业答案

    这是数字图像处理，冈萨雷斯版的课后答案，第八章的，希望对有用的起到帮助

  • jsp向引用的js文件传参

    0,明确<script>标签有了src属性之后,标签内不能再写js脚本1,jsp页面写法<% String rootPath = request.getContextPath(); %><script>var rootPath='<%=rootPath%>';</script>或者:<script> var rootP...

  • javascript给jsp传值

    工作中遇到的几个问题，这里面都有说明，转载过来方便查看。对于WEB程序来说，前端（JavaScript）和后端（JSP/Servlet）是没法共用数据的，只能是后端程序（JSP）把数据输出，生成页面到前端，这时候生成的页面中的JavaScript代码才有可能得到所谓jsp的数据。同样的，只有把JavaScript里的数据提交给后端JSP代码，JSP程序中才能得到JavaScript的数

  • js中变量和jsp中java代码中变量互相访问解决方案

    1。js变量获取jsp页面中java代码的变量值。  方法：var JS变量名 =     我们常常会将js文件和jsp文件分开写，在js文件中，上面的方法似乎不管用了。 也可以通过变通的方法来解决： a.jsp " aa.js  var n = document.getElementById('a').value; 使用jquery这样做也更方便

  • js和java变量互传

     在jsp中经常会遇到把js变量赋给java变量，或者将java变量赋给js变量的情况，在此将通用的处理方法小结如下：java变量传给js好办，var a ="";注意要将引号""加上；js变量给java稍微复杂点，一般是在表单中用一个的隐藏表单元素，然后在脚本中将js变量值赋给它:var jsParamValue='aaaa'; form1.jsParam.value=jsParamValue...

  • jsp中把js变量赋给java变量，或者将java变量赋给js变量怎么做？

    在jsp中经常会遇到把js变量赋给java变量，或者将java变量赋给js变量的情况，在此将通用的处理方法小结如下： java变量传给js好办，var a=”<%=javaParam%>“;注意要将引号”"加上； js变量给java稍微复杂点，一般是在表单中用一个的隐藏表单元素，然后在脚本中将js变量值赋给它: var jsParamValue=’aaaa’;form1...

  • jsp中把js变量赋给java变量，或者将java变量赋给js变量怎么做

    在jsp中经常会遇到把js变量赋给java变量，或者将java变量赋给js变量的情况，值得一提的是：两者确实有办法可以相互赋值，但有局限性：【原因如下】jsp脚本是服务器端脚本——页面一加载就会随请求被服务器端立即执行返回javascript是前端脚本——按页面逻辑和事件需求执行出现的情况是：如果javascript脚本中绑定了一个点击事件，事件中需要插入一段jsp脚本，那么...

  • 【ZOJ 1067】Color Me Less 题解（向量+开方）

    问题颜色缩减是从一组离散颜色到较小颜色的映射。这个问题的解决方案需要在标准的24位RGB颜色空间中执行这样的映射。输入由十六个RGB颜色值的目标集合和要映射到目标集合中最接近的颜色的任意RGB颜色集合组成。为了我们的目的，RGB颜色被定义为有序三元组（R，G，B），其中三元组的每个值都是从0到255的整数。两种颜色之间的距离被定义为两个三维点之间的欧几里得距离。也就是说，给定两种颜色（R1，G1，B1）和（R2，G2，B2），它们的距离D由下式给出输入。

  • 试一下,能不发表博客

    试一下,能不发表博客闷了一星期啦,TMD发表不了! 

  • 颜色映射

        GDI进行绘图的时候，需要根据用户的设置更改客户区位图的颜色。这时候可有几种选择。选择：用ExFloodFill或FloodFill函数填充对应一个颜色或者指定边界颜色，在边界内填充。这种做法有一个缺点，就是必须指定填充的坐标点。就像资源编辑器绘制位图的Fill工具。如果你需要填充的区域不是连续的，那么需要调用两次ExFloodFill,而且ExFloodFill的效率比较低。如果在客户区

  • 刚刚开通自己的blog

    测试一下

  • 格式化一下代码的颜色，呵呵

     @ Control Language="c#" AutoEventWireup="false" Codebehind="Shopping.ascx.cs" Inherits="DreamerShop.UserControl.Shopping" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>@ Register 

  • js和jsp互相传值的问题解决办法

    1 jsp传值到js： 1.1 js函数和jsp在同一个页面的时候可以使用<%=变量%>，如： String test="测试"； <script type="text/javascript"> function test(){ var p=<%=test%> alert(p); } </script> 1.2 js函数和js...

Global site tag (gtag.js) - Google Analytics