鼓励响应式网页设计。
(图一,响应式网页设计)
通常在浏览网页时,手机上和电脑上无法显示同一个网页,这也导致许多网页设计会自动转到特定的链接上,如上图所示,无论在PC端还是移动端,网页的显示其实都是一个版本,会随着屏幕的大小网页而改变。
下面是一些例子:
(图二:响应式网页设计例子)
(图三:迪士尼公司的网页)
使用自适应网页设计有5个好处:
1, 随着移动设备越来越多,可以提升用户体验。
2, 该设计没有网页版本区分,所以SEO的策略保持一致。
3, 可以避免重复内容,专心维护这一个网页。
4, 保持网页的原有链接。
5, Google也建议优先采用响应式设计,因为无论是什么网页版本都是相同的HTML、相同的内容,Google最容易处理。
响应式网页设计对SEO是友好的,这些相关技术还在不断演化中,还有许多尚待客服的地方。下面来说说它的缺陷:
1, 对老版本IE支持不好,这是一个致命的问题,尤其是IE6,如果你的网站用户大多还采用老版本的IE的话(建议在统计工具里看一下),就不适合做响应式网页设计了。
其实我一直想采用响应式网页设计,从新设计皇冠·体育(中国)官方网站-Crown Sports皇冠体育官网的网页,但看到统计里的老版本IE用户依然很多,只好放弃。
2, 例如一些小游戏站、视频站,如果仅仅是网页采用了响应式设计,但里面的内容依然是只能在PC端打开的话,这时候就要认真考虑了。
国外copyblogger的皇冠体育官网提到了一个很特别的案例,就是迪士尼公司的网页。他说在迪士尼网页中有许多给小朋友玩的网页游戏,有些游戏可以在桌上型电脑玩,但是如果使用移动设备就可以无法使用。因此这个情况下,就必须做出抉择,放弃使用Responsive Web Design,或是修改游戏。
写在最后:
从今年开始,响应式网页设计逐渐流行开来,虽然很热门,但是并没有太多网站采用这类的设计方式。
而关于响应式网页设计技术方面,也越来越简单,有兴趣的朋友可以阅读下《自适应网页设计(Responsive Web Design)》一文。
相关阅读:响应式网页设计的快速教程(适合个人站,皇冠·体育(中国)官方网站-Crown Sports皇冠体育官网已经应用)
顶: 1 踩: 1
1楼
重点是pc站怎么转响应式网站?
评论来自电脑端 时间:2017-11-06 10:22:32
2楼
说起来,最近发现做品牌网站用H5响应式做网站的还真的越来越多了
评论来自电脑端 时间:2017-06-27 08:52:10
3楼
响应式难道没有缺点?
评论来自电脑端 时间:2016-09-19 11:27:02
4楼
国内的大环境,已经决定了响应式不会太流行,硬生生要写一大堆代码去兼容老旧浏览器,那就已经背离的响应式设计的初衷。适合才是最好的,不要盲目的最求所谓的前沿和时尚。
评论来自电脑端 时间:2015-09-07 09:23:39
5楼
IE可以单独写一个样式表就行了,pc端IE只是一些兼容问题,对响应式没什么实质影响。还有弱弱提醒一下,楼主皇冠体育官网是技术贴,但还是IE用户多,说明了什么问题,难道你是希望那些用IE开发网站(但我想真正开发的人会这样吗)的人看你的皇冠体育官网?真的值得吗。。
评论来自电脑端 时间:2014-12-29 10:25:58
6楼
我用的wp自带的主题 是响应式的
评论来自电脑端 时间:2014-12-18 09:42:28
7楼
松哥的主题终于响应式了,期待松哥分享了。哈哈
评论来自电脑端 时间:2014-10-08 15:11:56
8楼
很好的文章,学习了。
评论来自电脑端 时间:2014-08-08 10:41:44
9楼
不错值得多看几遍
评论来自电脑端 时间:2014-05-13 10:20:49
10楼
我的WP也是能自动的适应手机版的。效果还是非常的不错
评论来自电脑端 时间:2013-10-16 15:20:43
11楼
各位可以注意下我修改的响应式主题!
评论来自电脑端 时间:2013-09-19 15:52:57
12楼
响应式设计基于媒体查询和流式布局,虽然ie低版本不支持媒体查询,导致ie下的网站不会随屏幕的改变而改变布局,不过这样设计者也不用考虑网页在窄屏ie下的状况了,ie只会显示默认的css而不管媒体查询的内容。所以响应式布局本身并不会引起兼容性问题。
评论来自电脑端 时间:2013-08-23 17:05:51
13楼
响应式网页设计与SEO、值得学习、值得深究
评论来自电脑端 时间:2013-07-29 01:06:44
14楼
看来响应式网页设计是个趋势啊,先了解下。。。
评论来自电脑端 时间:2013-06-29 22:17:05
15楼
自适应网页早就出现了吧
评论来自电脑端 时间:2013-06-27 15:18:21
16楼
优酷改版采用的就是这个。
评论来自电脑端 时间:2013-06-26 13:23:32
17楼
seo是个好东西,如果用的好就
评论来自电脑端 时间:2013-06-26 12:37:52
18楼
猛学习 响应式是个好东西
评论来自电脑端 时间:2013-06-26 08:58:32
19楼
还没有听说过呢,看来自己还得多了解了解了
评论来自电脑端 时间:2013-06-25 16:41:21
20楼
企业网站设计更应注重页面优化,否则还真没流量!
评论来自电脑端 时间:2013-06-23 21:51:00
21楼
这个要好好研究下,有用
评论来自电脑端 时间:2013-06-22 11:47:16
22楼
过来学习一下!!!
评论来自电脑端 时间:2013-06-22 01:47:15
23楼
是啊,采不采用用响应式网页设计,要看老版本IE用户多不多,因为其对老版本的IE支持不好。
评论来自电脑端 时间:2013-06-20 22:21:09
24楼
能不能做一个首页,当识别到用户使用老版IE,网页导向目前的风格。否则导向响应式网页。
评论来自电脑端 时间:2013-06-20 21:01:40
如果你的站有大量IE用户访问,而你强制用响应式网页设计,
这虽然对平板用户体验好,但其他IE用户呢?
跟帖来自电脑端 时间:2013-06-20 20:30:04
26楼
我的网站就是响应式网站哦。。。特别是内页,
评论来自电脑端 时间:2013-06-20 20:28:27
看来都需要插件帮忙啊,学习了……
跟帖来自电脑端 时间:2013-06-20 19:04:37
28楼
关键是用户体验
评论来自电脑端 时间:2013-06-20 18:10:51
ZBLOG官方应用中心有不少插件,你可选择一二罗。
跟帖来自电脑端 时间:2013-06-20 17:49:30
顶: 0 踩: 0 回复 看来都需要插件帮忙啊,学习了……
跟帖来自电脑端 时间:2013-06-20 19:04:37
30楼
ie不兼容跟响应式有关吗?在ipad平板中或者手机中,应该不会用ie浏览器吧。
在移动终端中不是都用高级浏览器吗?
评论来自电脑端 时间:2013-06-20 17:30:06
顶: 0 踩: 0 回复 如果你的站有大量IE用户访问,而你强制用响应式网页设计,
这虽然对平板用户体验好,但其他IE用户呢?
跟帖来自电脑端 时间:2013-06-20 20:30:04
31楼
那像是这样的话就不需要做手机站了吧。
评论来自电脑端 时间:2013-06-20 17:18:51
32楼
响应式网页这个还不错啊
评论来自电脑端 时间:2013-06-20 16:58:33
33楼
看这个皇冠体育官网竟然ie用户剧多。。。
评论来自电脑端 时间:2013-06-20 14:56:05
34楼
确实比老方法好,哈哈
评论来自电脑端 时间:2013-06-20 14:11:45
35楼
谢谢分享,我是小宝,欢迎博主有空来我皇冠体育官网看看。
评论来自电脑端 时间:2013-06-20 14:01:36
36楼
文章写得很好,通俗易懂,有深度但不难理解,顶起。亚奇姆
评论来自电脑端 时间:2013-06-20 13:49:45
文章最后有个技术方面的介绍,你点开看看
跟帖来自电脑端 时间:2013-06-20 11:09:10
38楼
恩,这个很不错啊,不过不要盲目跟风,要根据自己的实际情况和用户的情况酌情去改变!
评论来自电脑端 时间:2013-06-20 11:09:06
我也是这个原因,没敢换
跟帖来自电脑端 时间:2013-06-20 11:08:21
40楼
新技术 确实值得提倡,公司网站都需要这种技术。
评论来自电脑端 时间:2013-06-20 11:04:43
请参见此文zmthbjt/blog/post/466html
网站快照的更新频率与网站本身的“权重”、是否“被K”并无直接关联。站长不必过多关注网站的快照时间。
跟帖来自电脑端 时间:2013-06-20 11:02:59
如果是flash的勉强可以在安卓手机播放,但爱疯就不行了,本文已经提到了
跟帖来自电脑端 时间:2013-06-20 10:51:30
最新?呵呵,这个导航源码和本站的一摸一样,没更新过
跟帖来自电脑端 时间:2013-06-20 10:50:28
44楼
松哥,向你索取一下你的皇冠体育官网大全导航源码,谢谢!精神皇冠体育官网邮箱:jingshenboke@163
评论来自电脑端 时间:2013-06-20 10:43:39
顶: 0 踩: 0 回复 最新?呵呵,这个导航源码和本站的一摸一样,没更新过
跟帖来自电脑端 时间:2013-06-20 10:50:28
45楼
来学习一下~
评论来自电脑端 时间:2013-06-20 10:40:14
46楼
学习了。什么都是一门学问,什么都要学习。
评论来自电脑端 时间:2013-06-20 09:41:56
47楼
用户体验好
评论来自电脑端 时间:2013-06-20 09:32:31
48楼
有个问题,采用使用响应性网页设计的网站,对于页面中有包含视频的话,在移动设备中如何展示?毕竟有些移动设备不支持播放这些视频所需的软件或设备功能,也可能是因为许可限制所致
评论来自电脑端 时间:2013-06-20 09:22:37
顶: 0 踩: 0 回复 如果是flash的勉强可以在安卓手机播放,但爱疯就不行了,本文已经提到了
跟帖来自电脑端 时间:2013-06-20 10:51:30
49楼
所有的小创新其实都是不断在探索用户需求而变更的结果……呵呵
评论来自电脑端 时间:2013-06-20 08:57:03
50楼
围观
评论来自电脑端 时间:2013-06-20 08:15:29
51楼
前两个月我也毅然将皇冠体育官网换成了响应式的主题,因为发现现在移动端的用户越来越多
评论来自电脑端 时间:2013-06-20 00:05:42
52楼
我的站就是响应式的网站
评论来自电脑端 时间:2013-06-19 23:43:47
53楼
我用了你的皇冠体育官网模版 呵呵
评论来自电脑端 时间:2013-06-19 23:19:04
54楼
移动互联的时代来了,值得学习!
评论来自电脑端 时间:2013-06-19 22:54:03
55楼
有需求才会有发展,有发展才能有进步
评论来自电脑端 时间:2013-06-19 22:39:03
56楼
学习下,之前用joomla建站的时候也遇上这个问题,虽然joomla3还不成熟,不过响应式网页肯定会成为主流~~ 解决各种平台的最大程度兼容是问题的关键所在~
评论来自电脑端 时间:2013-06-19 21:48:31
57楼
51 移动端网页设计理念
栅格模式(4屏)
功能减去
修饰减去
流式布局
52 移动端网页响应式设计
响应式原理
禁用iPhone中的图片自动缩放
Media Queries
显示或隐藏小屏内容
注释码
评论来自电脑端 时间:2013-06-19 21:34:20
58楼
用什么技术实现的呢。原来的老网站可以转成自适应网页吗。
评论来自电脑端 时间:2013-06-19 21:08:29
59楼
不错值得多看几遍
评论来自电脑端 时间:2013-06-19 21:04:00
60楼
这可是个新东西啊!学习了。
评论来自电脑端 时间:2013-06-19 20:56:36
怎么个不难法,需要插入内链的时候,找找之前写过的文章吗?
跟帖来自电脑端 时间:2013-06-19 20:49:31
62楼
SEO真的没有路可行了,真的受不了了,哎 。我的站何时何日能够为我赚钱啊!
评论来自电脑端 时间:2013-06-19 20:48:18
63楼
未来发展的潮流
评论来自电脑端 时间:2013-06-19 20:21:49
这个不难啊,。。。。
跟帖来自电脑端 时间:2013-06-19 19:23:16
顶: 0 踩: 0 回复 怎么个不难法,需要插入内链的时候,找找之前写过的文章吗?
跟帖来自电脑端 时间:2013-06-19 20:49:31
65楼
来关注一下,可能未来的趋势会向这方面发展吧
评论来自电脑端 时间:2013-06-19 19:21:35
66楼
我一直很好奇,博主是怎么做到把那么老的帖子链接过来的?怎么管理的?有什么办法吗?
因为,皇冠体育官网文章太多的话,怎么能找到之前的那个相关文章的。
评论来自电脑端 时间:2013-06-19 19:03:20
顶: 0 踩: 0 回复 ZBLOG官方应用中心有不少插件,你可选择一二罗。
跟帖来自电脑端 时间:2013-06-20 17:49:30
顶: 0 踩: 0 回复 看来都需要插件帮忙啊,学习了……
跟帖来自电脑端 时间:2013-06-20 19:04:37
这个不难啊,。。。。
跟帖来自电脑端 时间:2013-06-19 19:23:16
顶: 0 踩: 0 回复 怎么个不难法,需要插入内链的时候,找找之前写过的文章吗?
跟帖来自电脑端 时间:2013-06-19 20:49:31
67楼
这响应式和IE6没什么冲突吧,移动设备上又没有IE6。。。cssIE6有专门的hack方式,也不用担心样式问题。
评论来自电脑端 时间:2013-06-19 18:04:52
68楼
本网站就是响应式自适应网站,欢迎大家围观
评论来自电脑端 时间:2013-06-19 17:00:17
69楼
有些大站可以做为参考
评论来自电脑端 时间:2013-06-19 16:57:28
70楼
现在很少看到SEO的字眼了。
评论来自电脑端 时间:2013-06-19 16:53:52
71楼
是利于用户体验的事情 值得推广
评论来自电脑端 时间:2013-06-19 16:53:13
72楼
百度持什么态度呢
评论来自电脑端 时间:2013-06-19 16:41:18
73楼
每件事情都有利与弊,看人怎么去选择!
评论来自电脑端 时间:2013-06-19 16:30:20
74楼
过来学习 学习 学习吧!
评论来自电脑端 时间:2013-06-19 16:12:01
75楼
现在上网的设备越来越多,这个还是挺需要的,也是个趋势吧。
评论来自电脑端 时间:2013-06-19 16:08:42
76楼
我们不需要用到,对我来说还没用
评论来自电脑端 时间:2013-06-19 15:41:00
77楼
以后这个问题越来越重视啦,结合不同设备显示是王道
评论来自电脑端 时间:2013-06-19 15:37:25
78楼
要不是看了这篇文章,我都不会注意这些问题,帮助太大了
评论来自电脑端 时间:2013-06-19 15:21:39
79楼
对移动端的支持越来越强了
评论来自电脑端 时间:2013-06-19 15:13:59
80楼
前段时间,分析到很多用户用移动设备访问网站,就把网站改版成Responsive Web Design,心想方便用户浏览。据改版后观察,结果是用移动设备访问的人数减少了很多。现在又改回来了。
评论来自电脑端 时间:2013-06-19 15:12:00
81楼
好像不止一次看到错别字了!
看来是原创的……
还有许多尚待客服的地方。
客服该为克服
评论来自电脑端 时间:2013-06-19 15:09:04
82楼
松哥帮我分析一下 我的网站快照都是隔一天快照的,已经正常快照了半年多的时间了;前天是6月17日,百度快照是6月16日的,我6月18日查询是突然变成6月5日的快照,直到今天还没有恢复正常快照,不知道问题是出在哪了!我网站我是每天都更新,每天都做一定数量的外链,网站也没有修改过哪里,收录没有下降,关键词也没有下降
网址
评论来自电脑端 时间:2013-06-19 15:08:41
顶: 0 踩: 0 回复 请参见此文zmthbjt/blog/post/466html
网站快照的更新频率与网站本身的“权重”、是否“被K”并无直接关联。站长不必过多关注网站的快照时间。
跟帖来自电脑端 时间:2013-06-20 11:02:59
83楼
旧版ie是最大的阻碍,特别是ie60,用的人太多了
评论来自电脑端 时间:2013-06-19 15:05:01
顶: 0 踩: 0 回复 我也是这个原因,没敢换
跟帖来自电脑端 时间:2013-06-20 11:08:21
84楼
移动互联的时代来了,响应式网页设计也有一定的好处
评论来自电脑端 时间:2013-06-19 14:55:48
85楼
我的站被降权重了,哎,也不知怎么回事!
评论来自电脑端 时间:2013-06-19 14:45:47
86楼
互联网的终极方向 个人觉得就是 用户体验度。
评论来自电脑端 时间:2013-06-19 14:31:23
87楼
这个必须要支持一下啊
评论来自电脑端 时间:2013-06-19 14:31:12
88楼
其实网页响应式设计已经有很多人在做了
评论来自电脑端 时间:2013-06-19 14:18:43
89楼
越来越先进了,亚马逊网站就是满屏的!感觉挺好的!
评论来自电脑端 时间:2013-06-19 14:11:30
90楼
我觉的对于经常用手机或者别的移动设备浏览网页的朋友来说很好,起码体验感觉就很不同,特别是图片和字体方面。
评论来自电脑端 时间:2013-06-19 14:05:47
91楼
响应式开放起来还是比较麻烦的!根据不同的屏幕尺寸写多个css样式!不过响应式 的确用户体验很好!以网站标题为例子,以前比如标题字体设定为18px 那么在 iMac 这种显示器下 看起来就会非常的小!那么我们采用3em 或者是25em 这样 就会根据你的机器进行缩放,看起来舒服好多!
评论来自电脑端 时间:2013-06-19 13:57:53
92楼
这需要怎么做呢?不懂啊
评论来自电脑端 时间:2013-06-19 13:57:03
顶: 0 踩: 0 回复 文章最后有个技术方面的介绍,你点开看看
跟帖来自电脑端 时间:2013-06-20 11:09:10
93楼
目前这种设计已经出现在越来越多的国内网站上
评论来自电脑端 时间:2013-06-19 13:49:02
94楼
值得学习的啊
评论来自电脑端 时间:2013-06-19 13:41:32
有什么好点评的?几乎全部一样。没有自己观点。。。
跟帖来自电脑端 时间:2013-06-19 13:31:08
96楼
相应式网页的确不错,提升各客户端的用户体验。
评论来自电脑端 时间:2013-06-19 13:25:19
97楼
越来越适应用户体验了,确实中国响应式网页设计,看着肯定更舒服。
评论来自电脑端 时间:2013-06-19 13:05:02
98楼
学习了响应式网页设计,提升用户体验非常有帮助,灵活在各端口显示不同的大小。
评论来自电脑端 时间:2013-06-19 12:44:31
99楼
新出来的东东一定会火,大家拭目以待吧
评论来自电脑端 时间:2013-06-19 11:55:44
100楼
这样确实是将用户体验列在第一位,三屏结合,不同用户都能有最佳体验效果!
评论来自电脑端 时间:2013-06-19 11:49:29