1、理论解释
概念:伊桑·马科特在2010年首先提出了响应式网页设计(RWD,Responsive Web Design)这个术语。 简而言之是指网页能自动识别屏幕宽度、并做出相应调整的网页设计。
原理:主要是css根据屏幕宽度,自动调整网页div显示和布局,以适应不同尺寸屏幕优化浏览体验。
价值:随着越来越多的智能移动设备加入到互联网中来,移动互联网不再是独立的小网络,而是成为了 Internet 的重要组成部分。响应式网页设计( RWD / AWD)的出现,目的是为移动设备提供更好的体验,并且整合从PC端到手机的各种屏幕尺寸和分辨率,用技术来使网页适应不同分辨率的屏幕。
响应式设计可以为电脑、手机、平板等不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,已成为大势所趋。
2、为什么响应式网站重要
因为当下屏幕分辨率不同的设备数量正在增加,从电脑、平板到智能手机,响应式设计让你的网站在任何设备上都有超赞的体验!48%的移动用户在流量一个没有对移动端优化的网站时感到出挫败和心烦。52%的用户说,如果一个公司的网站在移动设备上的体验很糟糕,就不太想和它打交道了。因为用户、访客在乎,可见响应式网站设计的重要程度!
3、搭建响应式网站的9个理由
作为一种能够缩放适应不同大小的屏幕的网页设计做法,响应式设计(Responsive Design)正日益成为最受推崇的移动网页优化方式。在谷歌公司于2012年中期指出,响应式设计是优化移动网站的最佳方式之后,这种设计做法的地位得到了进一步巩固。
随着iPhone、iPad和Android手机的普及,网站主办方发现,网站在移动端应当带来与桌面端类似的体验。否则,网站在移动设备上看起来就只有细小的文字和链接,网页布局也会一团糟。这就意味着损失流量和销售额的风险。如果你还对网站是否需要实现响应式设计存在质疑的话,看看下面的网络调查数据,相信你会更加认可网站实现响应式布局的重要性。
· 85%的用户认为企业的移动站点必须做的能够媲美PC端网页。
· 移动设备用户的数量将在2014年末超过PC端的用户数量。
· 72%的用户会同时使用多种设备。(数据整理自互联网,为平均值)
· 48%的用户称:如果企业的移动网站做的不够好,往往会给人不注重用户的“错觉”。
· 73%的互联网用户使用手机作为和互联网互动的主要的或是唯一的设备。
· 48%的智能机及平板用户表示很少企业会在移动站点的优化工作上下功夫。
· 据统计目前有16%的网络流量都来自于移动端。
· 67%的网民表示,更喜欢用手机在那些用户友好度高的电商网站平台上进行购物。
· 66%的移动设备用户反应移动网站的加载速度有待提高,响应式设计的普及迫在眉睫。
4、与搜索引擎优化的关系
在搜索引擎(尤其是百度、谷歌)中排名靠前是每个网站的终极目标,具有响应式设计布局的网站有助于达成这个目标,Google已经表明对响应式设计的青睐。在不同的设备上,网站的 URL 和 HTML 都可以保持一致。这些都能简化搜索引擎对网站的爬行、收录和整理,从而改善网站的搜索引擎可见度,有助于搜索引擎的排名,带来更高的曝光度和客户流量。毫无疑问,SEO 营销活动既昂贵又耗时,但响应式网页开发让你集中精力维护管理一个兼容所有设备的网站,从而节省大量时间和资金的投入。
5、响应式网站的制作难点
既然响应式设计已成为大势所趋,为什么国内99.9999%的网站都还不是响应式的?
1)设计原型多、兼容测试多
制作前期,需要对用户调研,确定制作多个尺寸线框原型界面,还需要设计师和前端开发人员保持密切的沟通。
2)视觉设计要求高、细节多
移动设备的屏幕像素密度与传统电脑屏幕不一样,在设计的时候需要保证内容文字的可读性、控件可点击区域的面积等,都将对设计师有高要求。
3)前端实现难、跨技术合作
与传统的web开发相比,响应式设计的页面由于页面布局、内容尺寸发生了变化,所以最终的产出更有可能与设计稿出入较大,需要前端开发人员和设计师多沟通。
4)参与人员多、耗费精力大
因为响应式设计需要对多个界面兼容、功能调试,导致整个制作过程需要UI设计师和前端工程师不断磨合制作。
6、如何搭建响应式网站?
1)自行组建团队开发
优点:方便沟通和管理,修改容易
缺点:响应式设计人才稀缺,团队建设难,耗费高,周期长
2)外包给第三方专业团队
优点:现成团队,建设时间较快
缺点:目前能做好响应式网站的团队还非常少,要价高,修改升级麻烦
3)使用自助建设平台创建
优点:模板创建,个性化设置,时间快,费用低
缺点:不能百分百实现自己的功能要求