成都网站建设
扫描关注木子网络微信号

扫一扫微信二维码

响应式网页设计有哪些优缺点?

木子网络2017-10-19网站设计

  响应式网页设计(Responsive Web Design简称RWD)这个术语,由伊桑•马科特(Ethan Marcotte)在2010年5月份提出的一个概念。想必各位站长都不陌生,简而言之,就是一个网站能够在不同的终端都能够兼容,而不需要对应每一个终端做出不同的版本,那么响应式网页设计有哪些优缺点呢?

响应式网页设计有哪些优缺点?

  优点:

  1、跨平台

  随着电脑尺寸多元化,智能设备(pad/智能手机)普及化,在当下追求用户体验至上的时代,之前网站普遍使用固定的宽度(960px)逐渐满足不了现在不同设备与不同分辨率需求。在高分辨率电脑宽屏显示器上,两边留白过多。在手机上显示,内容显示过小,用户为了看清楚,首先需要放大界面,再左右拖拖界面。响应式网站可以根据不同终端、不同尺寸和不同应用环境,自动调整界面布局、展示内容、内容大小,提供非常好视觉展示效果,一致性友好体验。

  2、节省设计开发成本

  相对需要开发电脑网站、pad网站、手机网站来说,响应式网站式节省设计开发成本的。从设计角度说,一般来说,响应式网站界面只需要设计两套设计效果图就行了,电脑端与pad端基本可以共用一套设计效果图,手机端重新设计一套就可以了;从前端开发角度说,再不需要开发三套完成不一样的前端代码,只需要根据临界点(如果是基于Bootstrap前端框架进行开发,它上面有明确说明,这个问题下回再和大家分享)为不同终端开发三套不同的css样式;从后期维护角度来说,再不需要分别维护pc界面、pad界面、移动界面,专心维护一个网站即可。

  缺点:

  1、对老版IE兼容性不友好

  对于老版本IE(IE6、IE7、IE8)支持不好,这是一个致命的问题,如果你的网站用户大多还采用老版本IE的话,建议不做响应式网页设计。

  2、灵活性有所欠缺

  基于不同终端的设备属性不同,对产品用户体验要求就会截然不同。内容比较多带有功能性的网站不适合做响应式网站设计,如:电商类型网站,宽屏的pc端内容如果全部要在手机端进行展示,势必导致手机端的界面非常长,需要根据手机端属性进行重新信息框架设计,这样对响应网站要求非常高,实现难度与成本非常高。但是大型网站为了提高用户体验,通常做法,把高分辨率宽屏网站最小的响应尺寸响应到1024px,不再适配手机端,手机端重新设计开发一套手机网站,简单理解为2.5响应,如:电商网站亚马逊、Calvin Klein、Nike、视频网站Youtube,等。

  3、网页加载速度变慢

  响应式(自适应)设计的实现方式,往往是缩小或者隐藏电脑版网站的内容,使之适应移动端的窄屏。但隐藏的内容依然会加载,低分辨率设备会加载高质量的图片或者视频,不分屏幕尺寸都提供相同大小的网页。这样的话,响应式网站加载的内容相比非响应式网站会增加20-50%。加载内容多,速度慢,浪费流量。在国内高流量费面前,用户是想都不用想就会放弃使用你的网站的。

  响应式网站相对非响应式网站的加载耗时,一般都会延长1-2秒,在2G、3G网络情况下更严重。而Google统计的数据是加载时间每延长0.4秒就会有0.59%的用户流失,电商类代表亚马逊则表示每延长0.1秒就会有1%的用户流失,资讯门户类的雅虎则是每延长0.4秒就会流失5-9%的用户。所以你的响应式网站每天流失了多少用户,你可以对号入座算一算。

  4、对SEO不友好

  针对这次百度新出的“闪电算法”受波及的大多是一个响应式网站,因为上面第3点已经提到响应式网站会导致网站加载速度过慢,从而影响网站关键词排名,所以如果网站要做好移动优化最好的办法就是单独建一个移动端,这样才能更灵活,提供更专业、更优的移动体验和个性化、多样化的设计。

  根据响应式网站的优缺点,我们可以看出:企业官网、单页宣传网站适合做响应式网站设计,因为结构简单内容少,所以在内容加减、图片、文字、栅格响应上比较容易处理。内容较多和功能性的网站则不太适合做响应式网站设计,如:电商类型网站,大型资讯网站等等。事物都是利弊结合,响应式只适用某些网站,不可一概而论,适合自己网站的设计才是最好的。

转载请注明:木子网络 » http://www.muziwl.com

文章标签
响应式网页设计
响应式网站设计