响应式设计对于留守客户的影响

本站    发布时间:2016-06-15
2015年响应式设计趋势的延续,也将带来更多的争议和思考,此文所引论据较为客观,青岛网络公司新思维网络是一家集青岛网站建设、青岛微信营销和青岛微博营销于一体的青岛全网营销公司,在此点出了响应式概念的初衷和近年来跨屏设计的状况,并提供了解决思路和可参考的具体方法。

在探讨之前我要提前推论:如果你只是把响应式网页设计定为终极目标并且是唯一的移动端方案,是在流失用户,也许还有金钱。幸运的是我们能够修正这些错误。这篇文章的内容将涉及移动网页与响应式设计的关系,始于如何提供灵巧的响应式设计,及移动端的性能为何如此重要、响应式设计何以不能视为网站的目标,并止于技术本身的性能争议,以便辅助理解问题的真正所在。2向所有移动设备传送一个快速可用并全兼容的体验是一个挑战,在实施响应式技术时也是如此。而在一开始便关注性能将协助我们更易达成目标。
 
响应式网页设计非常优秀,但它不是银弹。如果把它当作移动端的唯一法宝,那么也许会有性能问题将对转化率造成阻碍。现约有11%的网站是响应式的并且这个数字每个月都在上升,讨论它的时机到了。根据的调查,72%的响应式网站统一传送相同数量的字节,而不依据屏幕尺寸区分处理,甚至在使用速度较慢的移动网络连接也是如此。但并非所有的用户都会耐心等待网站的加载。

响应、移动、快速
 
移动端的性能保证与响应式设计可以同时实现,只要用上一些其他技术。响应式网页设计从不意味着去制造性能问题,而许多人相信它能解决一切问题才是错误的根源,让设计响应式化的重要性在于,我们需要处理从台式机到手机的大区间viewport尺寸。但是只考虑屏幕尺寸低估了移动设备,台式机与手机的分界线正在变得模糊,不同类型的设备也趋于提供多样化功能。显然我们已无法再只依赖于使用媒体查询这一功能。

 

按需加载
 
CSS媒体查询无法让设备区分加载和解析,这意味着移动端的手机会下载和解析为更大屏幕提供的CSS。iPhone不会动态转换为iPad的尺寸,采用JavaScript 的matchMedia查询方法替代CSS媒体查询,则能够保证不同设备显示内容的统一性并且只加载它们各自所需要的CSS。使用特征检测工具可以做到更好,如Modernizr可以构建更智能的UI和功能定义,而不是只依赖于屏幕。青岛网络公司新思维网络是一家集青岛网站建设、青岛微信营销和青岛微博营销于一体的青岛全网营销公司。

响应式设计、性能和技术数据
 
对这篇文章你可能抱有一些置疑,接下来我们将对技术细节进行重新审视以减轻你的疑虑。响应式设计通常会为所有设备传送相同的HTML文件,再采取媒体查询的方式加载不同的CSS和image文件,这一点有的人可能不太同意,但很多情况下都是如此实施的。
 
蜂窝连接
 
4G网络还没有广泛覆盖,而即便是全世界范围内都能够使用4G网络,可能也会有一些超出预期的状况。只论US地区的4G用户数量约为22%,而其中的40%并非随时处于4G连接状态,除外地区则只有不到3%的手机使用4G连接。移动网络速度受限于带宽,但移动网页体验通常面临的最重要的现状是:消耗于接收大文件(如YouTube视频)的带宽越多,大批量小文件的并行下载越不顺畅,并会伴有确定性的高发延迟。延迟是设备对每个数据包的首字节发起请求接收的往返时间。蜂窝网络比其他连接方式延迟更多,这也就意味着蜂窝连接的延迟比家庭网络要高出5~10倍。
尚有其他延迟方面的问题如无线电广播引起的变动:当手机进入休眠状态后打开收音机频率需要获取更多数据而导致滞时;设备平均可用内存越低也就意味着电池和CPU消耗越多。
 
蜂窝网络下的响应式设计
 
一个实例:Keynote是一家提供性能解决方案的公司,发布了2014超级碗顶尖广告的网页性能数据。实在难以想象超级碗上投放的广告是需要加载整整一分钟的网页。

青岛网络公司新思维网络是一家集青岛网站建设、青岛微信营销和青岛微博营销于一体的青岛全网营销公司。