广告:
什么是响应式网站?
响应式网站英文为:Responsive Website 或者Responsive Web design(响应式设计)。
响应式网站也叫HTML5响应式网站,也叫自适应网站。网站页面可根据用户不同的浏览设备(一般指智能手机、ipad或ipod、触屏、电脑、手机app内嵌入浏览和微信内浏览)和浏览尺寸,从而能够自适应,显示出不同的展现形式,响应式企业网站页面更加简洁、美观、大气,可以提升企业形象和产品视觉效果,提升用户体验,对搜索引擎收录也会更加友好。
互联网技术的快速发展,手机移动端用户在不断增加,仅仅依靠PC网站体验已经无法满足人们日常生活或工作的需要,人们对网站有着更高的要求。响应式网站应运而生,它能够很好的满足用户的需求,带给终端用户良好的访问体验。响应式网站已经成为当下较为主流的网站设计,越来越多的企业倾向于建设响应式网站。
响应式网站的特点:
1.快捷传播,统一管理,维护方便,跨系统,跨平台,跨终端等标杆级网站。
2.只需对站点后台和域名作的维护和推广,降低网站运营成本,提高传播效率。
3.用户可以使用浏览器、二维码扫描工具等获取网站信息。
4.响应式架构会根据各终端设备的分辨率自动调整页面布局和体验交互程序,让用户能够快速、舒适、直观地从浏览器或微信平台等获取信息。
响应式网站的分类:
1 HTML5响应式网站(客户端响应):
此类型网站适用于一般企业建站,一般提到的响应式网站就是指这一类的。技术员使用现在流行的html5技术标准来设计网站,依靠浏览器端css的媒体查询 Media Query,百分比流式布局。我们可以在定义设备不同的尺寸下选择需要加载的样式。该网站采用移动优先方式,实现了默认的线性布局。
常见代码:<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> @media screen and (min-width:600px){ /*css查询代码*/}
优点:
a 用一个网址,布署一个网站,设计元素易被反复利用,只需要维护一套CSS。设计人员一个页面网址只需要维护一个页面和对应的样式(CSS)。
b 用户体验好,用户只需记住一个网址,用不同设备浏览有不同的呈现效果。
c PC端和移动端十分接近,网站内容和布局令用户感到“熟悉”。
d 维护成本小,有时pc网站只需要更改几处css,就可以在手机端有很好的用户体验。
缺点:
a 只适用于企业型网站或者简单网站,如果网站属于偏重信息传达而轻交互的网站,那这个解决方案其实恰到好处,CSS解决就足够。但是,如果我想要做更多的「移动化设计」,比如减少信息层级、增强手势操作等等,或者移动端和pc网站界面功能大不一样,那么这种方案维护起来就非常困难。一套前端代码要适配各种桌面显示器、横竖屏平板、横竖屏手机,方案维护成本非常高,不易变更。开发方面的成本有所降低,但有限。
b 网站有时并非按需加载css、js,pc站和手机站在浏览时会同时加载pc端和手机端的css、js脚本。这样浪费服务器端和用户浏览器端流量,同时增加页面脚本和css的计算复杂度,可能导致用户浏览时性能下降,也会造成不流畅的用户体验。
案例:现在企业网站新建网站一般都是这一类别的。
2 浏览器端脚本跳转(客户端响应):
严格来说此类型不叫响应式网站。但是我们站在用户角度来说把它放在响应式网站类别里面去。这是中大型网站比较常用的方法,实际上pc站和手机站是两个不同的网站。每个页面功能较为复杂,pc端和手机端用户体验完全不一样。如果放在一个页面下维护,维护起来就相当复杂,而且容易出错。
优点:
a 两个域名,布署两个网站,分开维护,不同的技术人员维护不同的网站,网站可维护性好。
b 用户体验好,不同浏览器设备只需加载自己需要css和脚本,用户浏览起来快速流畅。
缺点:
a 开发成本大,两个域名,两个网站,企业开发成本和维护成本增加,跳转到不同网站相对应的详细页面时成本增加,增加程序难度。一般只有大站才会采用这种方案,不在乎开发成本。
b 用户端有两个网址,跳转时可能浪费带宽和用户浏览时暂停现象。
案例:
53bk数字报网站演示 pc端:http://demo.53bk.com/ 手机端:http://demo.53bk.com/m;
阿里巴巴网站:pc端:http://www.1688.com 手机端:http://m.1688.com;
京东网站: pc端:http://www.jd.com 手机端:http://m.jd.com;
腾讯网站 pc端:http://www.qq.com 手机端:http://xw.qq.com
3 服务器端响应式网站:中大型网站解决方案
英文RESS:响应式Web设计+服务器端组件 (RESS: Responsive Web Design + Server-Side Components)。RESS,在服务器后端就对用户进行一定的区分,对不同的设备返回不同的内容,以降低前端响应式的成本。这个方案相当于把上面两个方案揉到一起,取长补短。我们可能永远不会有一个易于开发且可以在所有设备上完美运行的解决方案,但是RESS提供了一个很好的折衷方案,可以解决响应式Web设计遇到的许多性能问题。
优点:
a 用一个网址,布署一个网站。一个网站成本比两个网站成本要小很多,这样我们只需要多维护一套风格模板即可,网站可维护性好。
b 用户体验好,不同浏览器设备只需加载自己需要css和脚本,用户浏览起来快速流畅。
缺点: 开发成本大,服务器端开发需要用到一些比较大的框架,同时需要使用两套不同的风格模板,不适合小型网站开发使用。
案例:
53bk数字报网站官网: http://www.53bk.com/
阅速公司网站官网: http://www.ysneo.com/
53BK数字报部分客户如:陵川新闻 http://dzb.lczf.cn/
国外著名网站:
google搜索 http://www.google.com/
亚马逊购物网站 http://www.amazon.com/ (中国站 www.amazon.cn)
ebay全球外贸网站 https://www.ebay.com/
下面是服务器端响应式网站几个网站的分析图:
手机上看到的Ebay网站样子
电脑上看到eBay网站的样子,切换到手机界面不清除缓存,网站并没有及时响应成手机界面
google网站电脑看和手机上看是不同的界面,但是并不是htmlt5浏览端响应,需要刷新清空缓存才有不同的界面
广告: