为什么响应式设计对SEO有好处？

响应式设计已成为网络营销上非常热门的话题，而且愈来愈火，这不禁引人思考，它是否真的就可以成为一个行业标准呢？

答案很简短：是的。

响应式Web设计意味着你无需把网站制作成多个版本，如移动版、桌面版或者PC版等，它会根据设备的分辨率和缩放自动重新布局，使网页能够适应不同的设备，并且用户看到的是相同的内容。

就单单2012年，移动手机订阅已增加55%，这也充分说明响应式Web设计已成为网络营销的未来。

它是如何工作的？

是不是感觉听起来太好了，以至于缺乏真实性了呢？这一切都来源于Ethan Marcotte在2010年发布的 “响应式网站设计”，这是一篇非常简短的理论。响应式网页会基于浏览器屏幕自动调整元素的大小、形状、位置等，而不像以往那种开发一个800px网页，而且还要设置它位于屏幕中心。而响应式网页里的元素会基于CSS媒体查询自动适应屏幕大小。

让我们举一个简单的例子，使用A-L这9个元素，在像笔记本或者旧的电脑屏幕（拥有较低像素），这些元素看起来会像3行3列的网格：

当屏幕宽度变宽后，就会变成如下图：

变窄了以后，他们可能会有新的排列：

现在，给大家看一个真实的例子，微软网站的各个部分：

当屏幕变小后，元素排列就会有所不同，移动版：

在他们的设计中，微软保持了桌面版上的所有元素，即使是从其他设备上来查看。但桌面版和移动版最大的区别是移动版仅仅没有足够的空间或者浏览器记忆来给一个单页提供如此丰富的内容。例如Samshing magazine网站，当屏幕变小后，它会自动去掉一些多余的东西：

桌面版：

在iPad上的显示：

下面是在Kindle Fire上的显示：

现在看看移动版：

正如你所看到的，响应式网站设计设计带给你一个非常震惊的屏幕控制。一个响应式网站几乎可以转换所有的东西，例如从PC优化到移动优化。

下面让我们来谈谈响应式设计给SEO带来了哪些影响？

为什么响应式设计对SEO有好处？

可用性

谷歌都会希望显示用户想要看的网站。当搜索者通过搜索结果页面导航到你的网站后，如果他立即关掉你所打开的网页并且返回搜索结果页面，这时，谷歌会做一个记录，根据搜索的关键字，你的网页可能不是用户的最佳选择。

如果你有一个移动网站，拥有较少的内容并且与正常网站相比是明显不一样的，这将会对访客产生阻碍，因为访客有可能会按照桌面版的方式来获取他想要的内容。如果你根本就没有移动版的网站，那么将会有61%的访客会返回谷歌页面，然后去重新找一个易读的网站。这样，你的跳出率就会提高，网站排名也会下降。而如果你的网站是采用响应式设计的，那么访客无论是在移动端浏览还是在桌面端浏览，都将获得相同的体验。

内容重复

移动版的内容会和桌面版的内容保持一样，但在网络中你仍然可以从两个地方获取相同内容，也就是说这将让你非常麻烦，而且还会为访问你的网站的用户带来错误的版本网站，一个响应式设计的网站意味着在Internet上内容只存在于一个地方。

移动搜索排名

谷歌曾表示，他们的网站排名优化会根据移动搜索来进行。谷歌建议采用响应式网站设计，这样你的移动版网站排名就不会受到太大影响，这对你们的网站是非常有好处的。

链接建设

对于响应式设计而言，在桌面版上的链接和移动版上的链接是相同的。移动网站仍然较新，所以你的竞争对手在移动搜索领域会大大减少反向链接。一个响应式网站对原始网站会有一个反向链接，即使是在争夺移动端访客。这将会给你带来一些临时优势，随着移动设备使用量的不断上升，网站管理员会在主页面上提供移动版链接，反向链接会从桌面版和移动版上结合一个非常强壮的反向链接配置文件。

早期实践案例

尽管响应式设计非常热，但也有大量的网站还未使用。如果你的网站还未采用响应式设计，那么下面提供几个例子，对你采用响应式设计将会有帮助。

• http://blogs.adobe.com/digitalmarketing/digital-marketing/mobile/responsive-web-design-and-web-analytics/

• http://inspirationfeed.com/inspiration/websites-inspiration/60-examples-of-responsive-website-design/

• http://www.clicknewz.com/5984/benefits-of-responsive-web-design-examples/

结果

你可能会猜测，如果你的网站未对桌面版或移动版进行优化，那么跳出率将会从这些设备上减少，我们也已经看到一些对主页面（桌面版）的积极影响。Distiller网站采用响应式设计以后，他们的网站在一个月内提升了400%：

这是一个比较极端的例子，而Distiller的博客却未达到同样的效果。然而，正如上图所示，在一个恰当的情形下，采用响应式设计可能会给你带来非常惊人的效果。

缺点

响应式设计并不是网络营销的圣杯，尽管它非常火，但在决定采用它之前，看看它不利的一面也会对你的决定起到非常大的影响。

时间

把网站换成响应式可能会需要大量的时间，无论是对你的设计团队还是开发团队。与以往重新设计网站相比，它都将会花费更长的时间，这两支队伍需要接受这个全新的概念然后才能实现它。但有利的一面是，当其他网站意识到对他们的网站进行响应式设计之前，你的网站就已经遥遥领先啦。

大页面

如果桌面版的网站拥有大量的内容，那么意味着你的移动版也需要加载这么多内容。你能想象一个较差的手机能加载这些吗？

这就是为什么NYTimes.com和CNN.com会有独立的移动版本，在移动版上仅仅显示桌面版的一小部分的文章内容和连接。如果你的网站也有大量的内容，那么建议你采用两个版本。

移动用户体验

由于响应式网站要求移动版和桌面版必须拥有相同的页面和内容，这对提高用户体验带来了许多限制。当用户在较小屏幕的移动设备上浏览网页时，肯定会与浏览桌面版的网页体验有所不同。如果你想有个移动版的网站，但是该网站交互性比较强且又复杂，比如像Facebook，那么建议你专门做一个的移动版本，这样比较好维护并且易控制。

那么，响应式网站设计到底适不适合你的网站？

如果你的网站太大或者过于复杂并且需要一个移动网站，你有可能已经意识到（或者已经有一个惊人的移动网站，该网站并没有多糟糕）。但是，倘若你不想要一个移动网站、或者是在考虑把网站切换为响应式网站是否值得，那么你可以做一个Google Analytics：

我真的需要一个移动网站吗？

看一份手机统计报告，这是一份基于移动用户得出的一份标准报告。如果移动/平板访问量低于总流量的5%，你可能就无需创建一个特定的移动网站（这个值一直在持续增长）。

如果高于5%，点击Goal Set或者Ecommerce metrics set——使用它来跟踪转换——在页面顶部，Explorer选项卡里：

桌面访问量是否大大超过了移动？如果移动转换率低于桌面转换率的一般，你的网站表现明显低于行业标准，并且需要对移动用户进行优化。

移动网站在用户屏幕上效果如何？

进入Standard Reports>Audience>Mobile>Devices然后改变屏幕分辨率的初始值。你可以点击其他下拉列表来选择你要使用的初始值。可以根据访客来尝试使用10大最常用的分辨率，然后在看看你的网站在上面的显示效果？使用Screenfly来查看网站在不同设备上的显示效果。你可能会非常吃惊地看到，一个非常简单的网站在许多平板电脑或者移动设备上都不太引人注目。即使你有一个移动网站，在50%的访客手机上看起来都非常棒，但也还有50%不好的。所以，你应该考虑采用响应式设计。

我的移动网站是否满足访客的需求？

下面在标准报告中看看移动跳出率，Standard Reports>Mobile>Overview。当访客进入你的移动网站后，跳出速度是不是比你的桌面版要快？移动跳出率应该与桌面跳出率有个大概的一致。

如果你有时间，可以做一个全面的移动SEO统计，来确定你的移动网站到底需要怎样的设计？Aleyda Solis已经在State of Search上写了一份非常好的移动统计向导。

最佳选择：慢慢转向响应式

如果你想慢慢地向响应式Web设计靠拢并且已经有了个相当不错的移动网站，考虑到网站采用响应式以便对desktop版和tablet版进行优化，但是移动不需要。这样设计将会变的容易些，但在技术上的体验会让你在以后的转化过程中更加顺畅。

意识到响应式设计的技术实现还是比较高级，这里提供一些注意事项供大家参考：

1. 使用压缩图像

2. 为所有的屏幕尺寸设计

3. 显示所有内容

4. 为触摸优化

5. 对所有的浏览器进行测试

值得采用

切换到响应式是一个非常大的挑战，但考虑到行业发展趋势，趁早转换只会让你领先于竞争对手。