设置密码

验证码错误,请重新填写

免费建站旅程马上开始

开始建站
建站中

已有帐号?直接登录

首页>森动学院>网站建设教程 > SEO优化技术:响应式网页设计与SEO
SEO优化技术:响应式网页设计与SEO
发布时间: 2014-05-22
  一、什么是响应式网页设计?为什么要做响应式网页设计?

      1、响应式网页设计的起因:在网速受限的互联网时代,因为电脑终端和移动终端在网速、屏幕尺寸、操作系统的不同,网页设计必须制作成两个不同的网页格式,使得用户方便使用同一个网站。用户访问网站时,使用不同的移动终端、电脑终端时,要访问不同的专门网站,即使先进的手机,也会因为视觉问题受到一定的阅读视觉不足的影响。

      2、响应式网页设计的定义:响应式网页设计就是网页页面的设计要设计做到,根据用户的行为及使用设备的不同(系统平台、屏幕定向、屏幕尺寸等)而进行相应的影响和自动调整。

      3、响应式网页设计的组成:它包括了网站文字内容、网页弹性的网格和布局、网页图片、样式CSS、视频媒体、音频媒体、脚本Javascript/Jquery的使用等。

      4、响应式网页设计的作用:无论用户是在使用哪种屏幕代销不同的笔记本、iPad、手机、移动终端等,网站的页面都能够自动切换分辨率,包括自动切换图片尺寸、视频尺寸、网页尺寸、文字显示格式等内容,以适应不同设备,从而保证用户的最佳阅读体验。
      
      5、响应式网页设计的意义:响应式网页设计就是一个网站能够兼容多个不同的终端,而不需要为每个用户终端做一个特定的网页版本。以前的Wap设计与Web设计就是一直分开的,而在响应式网页设计之后,将会大大改变。这样,网页设计的时候,就不在需要为适应不同的用户终端,而去做专门定制的网页甚至网站了。 


二、“响应式网页设计(Responsive Web Design)”也就是自适应,就是可以自动识别屏幕宽度、并做出相应调整的网页设计。目前这种设计已经出现在越来越多的国内网站上,目前Google已经明确表明鼓励响应式网页设计。



(图一,响应式网页设计)

通常在浏览网页时,手机上和电脑上无法显示同一个网页,这也导致许多网页设计会自动转到特定的链接上,如上图所示,无论在PC端还是移动端,网页的显示其实都是一个版本,会随着屏幕的大小网页而改变。

下面是一些例子:



(图二:响应式网页设计例子)



(图三:迪士尼公司的网页)

使用自适应网页设计有5个好处:

1, 随着移动设备越来越多,可以提升用户体验。

2, 该设计没有网页版本区分,所以SEO的策略保持一致。

3, 可以避免重复内容,专心维护这一个网页。

4, 保持网页的原有链接。

5, Google也建议优先采用响应式设计,因为无论是什么网页版本都是相同的HTML、相同的内容,Google最容易处理。

响应式网页设计对SEO是友好的,这些相关技术还在不断演化中,还有许多尚待客服的地方。下面来说说它的缺陷:

1, 对老版本IE支持不好,这是一个致命的问题,尤其是IE6,如果你的网站用户大多还采用老版本的IE的话(建议在统计工具里看一下),就不适合做响应式网页设计了。

其实我一直想采用响应式网页设计,从新设计卢松松博客的网页,但看到统计里的老版本IE用户依然很多,只好放弃。

2, 例如一些小游戏站、视频站,如果仅仅是网页采用了响应式设计,但里面的内容依然是只能在PC端打开的话,这时候就要认真考虑了。

国外copyblogger的博客提到了一个很特别的案例,就是迪士尼公司的网页。他说在迪士尼网页中有许多给小朋友玩的网页游戏,有些游戏可以在桌上型电脑玩,但是如果使用移动设备就可以无法使用。因此这个情况下,就必须做出抉择,放弃使用Responsive Web Design,或是修改游戏。