“一个网络” 两种口味:网站的响应性对适应性

  

  编者的话:这是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 极客社区

  来源:GBin1.com

  来源:“一个网络”,两种口味:响应性对适应性

时间: 2024-10-29 13:14:02

“一个网络” 两种口味:网站的响应性对适应性的相关文章

“一个网络”,两种口味:响应性对适应性

来源:GBin1.com 编者的话:这是Mobify的CEO,Igor Faletski发表的一篇博文,Mobify,电子商务优化平台,为智能手机和平板电脑提供了适应网站的工具. 你可能听人说过,"我们生活在后电脑时代".这对网络开发者而言意味什么?它意味着你的网站,有30%到50%的流量来自于移动电子设备.它同时意味着,不久之后,桌面用户或者笔记本电脑用户将会成为网络的少数派. 面对这样用户模式构建的转变,我们又要如何应对呢?我们已经跨越了m-dot或是t-dot时代,步入了一个由响

探讨目前两种主流网站流量引入方法

网站流量是一个网站生存的基础,没有流量,网站肯定活不下去,现在网站流量的主要来源可以简单分为两种: 第一种:以各种平台软文来引入流量.这些平台有:百度知道,百度贴吧,各平台博客,微博,大型论坛等.这类引入网站流量的方法,如果做的好,一天引入上万IP不成问题,一般具体操作方法都是搜索当前最热门的事件或电影.电视剧.比如前阵子热播的电视剧<轩辕剑>,每天的搜索量在数十万计(见下图),很多站长就把握住了这个时机,在这部剧开播前,就做好了对这个词的优化,从而把握住了先机.当轩辕剑在播完第一集的时候,你

Dreamweaver MX 2004实现一个页面两种连接风格

dreamweaver|页面 很多人也许学会了怎样使链接文字随鼠标点击状态改变而改变的效果,这是css的使用效果,也许你只懂得设置一种状态,比如鼠标放在文字上方,文字变为红色.但这样是整个页面都是如此的统一效果,但有没办法在一个页面中有多种效果呢?比如页面中有两个文字链接,我们想其中一个当鼠标放上去的时候是红色,另一个则是黄色.答案是肯定的.如果手写代码,也只是几行而已.考虑到现在大多数人都在使用Dreamweaver,下面我们以在Dreamweaver MX 2004中谈谈如何做这种效果. 1

一个网络工作者的成熟网站运营模式探寻之路

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 07年第一份工作是网站推广,当时是一个网络公司,大概部门分为:技术.推广.编辑.销售.行政.经理.很简单很清晰的一个运营模式.因为当时没有策划,没有SEO.编辑工作基本上与搬运工相似,ctr+v,ctr+v.而我们网站推广的工作呢非常有局限性,大概就是博客.管理自己的论坛.友情链接.固定模式的展会合作.非常简单.那时,我们每个星期也都要查网站

目前两种主流网站流量引入方法

第一种:以各种平台软文来引入流量.这些平台有:百度知道,百度贴吧,各平台博客,微博,大型论坛等.这类引入网站流量的方法,如果做的好,一天引入上万IP不成问题,一般具体操作方法都是搜索当前最热门的事件或电影.电视剧.比如前阵子热播的电视剧<轩辕剑>,每天的搜索量在数十万计(见下图),很多站长就把握住了这个时机,在这部剧开播前,就做好了对这个词的优化,从而把握住了先机.当轩辕剑在播完第一集的时候,你可以把优化做到第三集,因为大部分人看完前面总会想提前看到后面剧集,所以,现在大部分站长都是使用的这种

网站流量的两种主要来源

摘要: 网站流量是一个网站生存的基础,没有流量,网站肯定活不下去,现在网站流量的主要来源可以简单分为两种: 第一种:以各种平台软文来引入流量.这些平台有:百度知道,百度贴吧 网站流量是一个网站生存的基础,没有流量,网站肯定活不下去,现在网站流量的主要来源可以简单分为两种: 第一种:以各种平台软文来引入流量.这些平台有:百度知道,百度贴吧,各平台博客,微博,大型论坛等.这类引入网站流量的方法,如果做的好,一天引入上万IP不成问题,一般具体操作方法都是搜索当前最热门的事件或电影.电视剧.比如前阵子热

FTP文件传输协议两种方式的工作原理

FTP是一种文件传输协议,它支持两种模式,一种方式叫做Standard (也就是 Active,主动方式),一种是 Passive (也就是PASV,被动方式). Standard模式 FTP的客户端发送 PORT 命令到FTP server.Passive模式FTP的客户端发送 PASV命令到 FTP Server. 下面介绍一个这两种方式的工作原理: Standard模式 FTP 客户端首先和FTP Server的TCP 21端口建立连接,通过这个通道发送命令,客户端需要接收数据的时候在这个

深圳出现的一个新兴的SNS交友网站:在线酒吧

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 SNS国内的竞争越来越激烈了 ,不过今天偶尔在51.la论坛发现一个新兴的sns网站.我正想着谁还想削尖脑袋想挤进已经打成一锅粥的SNS交友市场 ,结果看了一下这个网站--"今夜吧",发现他的思路和其他的SNS已经有很大的区别. 国内的SNS网站基本上分为固有关系型的sns(比如校内,5G这种) ,另外一种是泛化关系型的s

Jsp的两种跳转方法

对于<jsp:forward>和response.sendRedirect()这两种跳转,信心大家一定不会陌生了,<jsp:forward>属于跳转的一个指令,response.sendRedirect()是response对象里的一个跳转方法,更确切说应该一个转向.但不管怎么说,两者都能实现由一个页面跳转到另一个页面的跳转功能. 那么两者有什么区别呢?还是随便用哪一个都行呢? 我们来共同看一下: 了解区别,举个例子是最直观的,看以下的例子: 我们要做两个页面: 一个跳转页面[tu