关于RWD响应式网站设计的资料收集

响应式网站

移动端出现后,移动网站的建站问题,需要随时根据技术发展趋势进行调整和完善,响应式设计RWD无疑将成为未来主流的网站建设方式。

百度百科上对响应式Web设计(Responsive Web design)的定义是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局。 下面这张图有更加清晰的解释:同一组URL、同一组的内容(同一数据库)、同一组代码(同一模版页)、通过CSS3判断和实现页面,最终呈现在各类多媒体设备——PC、笔记本、平板电脑、手机、以及未来更多的智能设备的屏幕上。 

而“独立PC站+独立wap站”的方式呈现,除了适配环境有缺失以外,运营上和seo方面也有着先天的不足:

(1)wap站只能适配普通尺寸的手机,对于pad等大屏设备没有适配能力

(2)因两套不同模版的缘故,前端和技术工作都是双倍的

(3)站在SEO角度来说,独立的wap二级域名相当于一个新站,移动端的自然流量需要从0开始培养

(4)未来对于更多尺寸的设备来说,还需要做更多的wap站

(5)没有HTML5化,未来移动站将很难与微信等移动端接口做出高质量的互动页面

……

 

 目前做响应式移动站有两种方法:

1、整站响应式,自动适配。适用于目前还没有开发移动站的网站。

2、PC站不变,移动wap站采用响应式来自动适配全尺寸手机、pad等终端。适用于目前已经有独立wap站的网站。

 

如果做成响应式网站,针对搜索引擎,开发方面有几件事情务必需要做:

1、所有页面头部加声明代码(百度和google各有一组)

百度的声明 <meta name="applicable-device" content="pc,mobile">  (参考文献:百度移动搜索优化指南2.0 )

Google的声明 <meta name="viewport" content="width=device-width, initial-scale=1.0"> (参考文献:google移动网站指南)

 2、禁止百度对PC页自动转码!每个页面都要加上<meta http-equiv=”Cache-Control” content=”no-transform ” />(参考文献:禁止百度移动搜索对网页进行转码的方法

 3、提交xml网站地图,比普通的xml地图文件需额外增加代码<mobile:mobile type="autoadapt"/>(参考文献:Sitemap工具帮助) 

地图代码参考:

<url> 

<loc>http://www.example.com/autoadapt.html</loc> 

<mobile:mobile type="autoadapt"/>

<lastmod>2015-1-7</lastmod>

<changefreq>daily</changefreq>

<priority>0.8</priority>

</url> 

4、在百度站长平台工具内“开放适配”工具内提交页面适配数据

 

关于响应式设计,有很多已经很成熟的第三方框架、开发工具和屏幕测试工具: 

CSS的Media Queries(控制响应页面的前端核心) http://webdesignerwall.com/tutorials/css3-media-queries 

14个超棒的响应式Web设计工具  http://www.oschina.net/translate/free-responsive-web-design-testing-tools 

响应式设计实例 http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 

百度开放适配服务说明  http://zhanzhang.baidu.com/wiki/39 

百度移动搜索优化指南2.0 http://wenku.baidu.com/link?url=Ah3xbLwxezjwZGM81E0V-pTmZsG9QY1a4UnqhxFphcs5WL9hkVqARvEXTA7KHT6JidObSJTrCCS5HTjQPtB-MyFHKi2IW97ioF311oe5hC3

google官方的响应式站点开发工具 https://developers.google.com/web/starter-kit/

google移动网站指南 https://developers.google.com/webmasters/mobile-sites/ 

google移动设备适合性测试  https://www.google.com/webmasters/tools/mobile-friendly/

 

优酷www.youku.com和亚马逊www.amazon.cn是目前国内响应式设计做的较为成熟的网站,大家可以使用手机浏览器去对比PC浏览器的页面效果。 

发表评论