响应式网页设计怎么seo优化

Critchlow将在11月份宣布Distilled的博客更新了新的响应式设计,但最近我发现我们从未详细说明为什么响应式网页设计如此之大。响应式设计在过去几个月一直是网络营销的热门话题,但它真的会成为行业标准吗?

简短的回答:是的。

响应式网页设计意味着您没有单独的移动设备,平板电脑和PC版本的网站:网站适应显示的任何大小的屏幕。无论访问者使用什么设备访问您的网站,他们都会看到您提供的所有内容(不再是部分内容的移动版网站),他们会以可读的方式看到它。

仅2012年智能手机用户增加 了55%,响应式网页设计就是在线营销的未来。

它是如何工作的?

听起来好得令人难以置信,不是吗?这一切都始于Ethan Marcotte在2010年题为“ 响应式网页设计”的文章中的一个相当简单的理论。而不是创建一个800px的单个网页并将其自身置于屏幕上,响应式网页由大小,形状和位置的元素组成,这些元素基于浏览器屏幕的宽度。元素使用CSS媒体查询确定屏幕大小。

让我们从网格上的一个简单示例开始,使用标记为A-I的9个矩形元素。在小屏幕上,如平板电脑或较旧像素的较旧计算机,元素将以3 x 3网格显示:

3x3网格中的Web元素

当屏幕更宽时,这些元素可以展开:

4x2网格上的Web元素

当它更窄时,它们可以叠加:

1x4网格中的Web内容

现在,这是一个真实的生活,复杂的,而且,我可以说,这是一个巧妙的例子。Microsoft的网站使用以下部分:

Microsoft桌面布局

当屏幕变小时,元素堆叠不同:

适用于移动设备的Microsoft网站

有关更具互动性的示例,请访问www.microsoft.com并更改浏览器屏幕。

在他们的设计中,Microsoft保留了桌面版本的所有元素,以便在其他设备上查看。但桌面网站和移动网站之间最大的区别之一是移动网站没有空间或浏览器内存在一个页面上拥有如此多的内容。例如, 随着屏幕尺寸变小,  Smashing杂志摆脱了额外的东西:

这是他们的桌面视图:

桌面宽度粉碎杂志

完整尺寸的页面左侧有两个导航级别,中间有主要内容,右侧有搜索和广告。它将主要内容集中在中间,您将在其中查看,但使用桌面屏幕的宽阔宽度。

转到iPad大小的平板电脑视图:

Smashing Magazine for iPads

当屏幕两侧没有足够的空间时,Smashing Magazine会保留广告并在右侧搜索,但它会以明显的方式将导航移动到顶部,但不会占用太多空间。

这是他们的Kindle Fire大小的平板电脑视图:

为Kindles粉碎杂志

由于屏幕空间变得太宝贵,广告被牺牲了。搜索被移到顶部,因此第二层导航被移到一边以确保主页内容在页面上的启动不太低。

而现在,移动到:

为移动电话粉碎Mag

在移动视图中,广告仍然与分享按钮一起消失。导航已从页面上的常量元素更改为顶部的小下拉列表。顶部导航消失后,搜索栏放在可用空间中。

如您所见,响应式网页设计为您提供了惊人的控制。凭借一些创造力,响应式网页设计几乎可以将从PC优化到移动优化的任何内容转换为介于两者之间的任何内容。

为什么响应式设计对SEO有益

所以现在你知道响应式设计是一个聪明的想法,通过正确的设置,将减少Web维护和内容创建。但这对SEO有何帮助?

可用性

Google希望将访问者发送到他们想要查看的网站。当搜索者导航到您的网站并立即返回搜索引擎结果页时,Google会记下您的网站可能不是该搜索字词的最佳选择。

如果您的移动网站内容较少或看起来与常规网站有很大不同,那么您将会在寻找他们在桌面版上找到的内容的回访者感到沮丧。如果你没有在所有的移动网站,访问者的61%将返回到谷歌找到一个网站,易于阅读。无论哪种方式,您的跳出率都会上升,您的排名会下降。通过响应式网页设计,访问者将以他们可以阅读的格式获得他们想要的所有内容。

内容重复

不用担心,与主站点内容相同的移动站点不会被Panda击中。但是你在网络上的两个地方仍然会有相同的内容,这对你来说很麻烦,并且可能会把访问者带到错误版本的网站上。响应式设计的网站意味着内容只在互联网上的一个地方。

移动搜索排名

谷歌表示,它将针对移动搜索优化的移动网站排名更高。Google 建议采用自适应网页设计,这意味着您的自适应设计网站在移动搜索方面的排名也与专为移动设备设计的网站相同。这对…特别有用

链接建设

通过响应式网页设计,指向主站点的链接也是指向您的移动网站的链接。移动网站仍然是新的,因此您在移动搜索领域的竞争将会显着减少反向链接。响应式设计的网站将拥有原始网站的反向链接,即使在竞争移动访问者时也是如此。它会让你在那边立即获得优势。而且,随着移动设备使用量的增加以及网站管理员开始链接到移动网站,来自移动和桌面网站的反向链接将结合起来,形成更强大的反向链接。

早期采用者认可

现在让您的网站响应,当主题很热但很大程度上未使用时,会让您注意到。以下是一些很好的例子:

  • 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/
  • 当然,微软和Smashing Magazine也来自这篇文章。

结果

正如您可能猜到的那样,如果您的网站之前未针对平板电脑和/或移动设备进行过优化,您会发现这些设备的跳出率会降低。我们已经看到了积极影响也传播到主站点。在Distiller的网站上,实施响应式网页设计在一个月内增加了超过400%的访问量:

响应式网页设计流量增加

这是一个极端的例子; 在Distilled的博客上切换到响应式网页设计并没有同样的效果。但是,这样的结果表明,在适当的情况下,响应式网页设计可以带来惊人的效果。

缺点

然而,响应式网页设计并不是在线营销的圣杯; 在你决定冒险之前,你会想要考虑一些缺点。

设置时间

转向响应式网页设计将花费大量时间来自您的设计团队和开发团队。它可能比你经历过的大多数重新设计花费的时间更长,因为两个团队在实施之前必须学习一个全新的概念。从好的方面来说,当其他网站开始升级到响应式网页设计时,你就会领先一步。

大页面

如果您的桌面页面上有大量内容,则响应式设计意味着必须在移动页面上加载所有内容。你能想象一部可怜的手机试图加载所有这些吗?

关于纽约时报的很多内容

这就是为什么像NYTimes.com和CNN.com这样的网站有单独的移动版本,只显示他们在桌面版本上的所有文章和链接的一小部分。如果你有一个类似的网站 – 并且意味着像那样巨大 – 坚持使用单独的移动和桌面版本。

移动用户体验

由于响应式网页设计将您限制在移动和桌面版本的相同页面和内容上,因此可能会限制您增强用户体验的选项。虽然我早些时候指出移动用户想要与桌面用户相同的内容,他们用手指在一个小屏幕上搜索,而不是用鼠标和键盘大屏幕搜索,所以他们到相同内容的旅程会感觉完全不同。如果您有一个真正的互动或复杂的网站,需要有不同的内容路径,如Facebook,您可能希望保留您的网站的移动版本,以便您可以拥有该控件。

那么,响应式网页设计适合您的网站吗?

如果您的网站太大或太复杂并且需要移动网站,您可能已经意识到它(并且可能已经有一个不应该被搞砸的令人惊叹的移动网站)。但是,如果您没有移动网站,或者拥有一个简单的移动网站并且不知道切换到响应式网页设计是否值得呢?您将进行一些Google Analytics研究:

我甚至需要一个移动网站吗?

首先转到移动概览报告,该报告是移动下拉菜单下“受众群体”部分中的标准报告。如果移动和平板电脑访问次数低于总流量的5%,您可能不必担心创建特定于移动设备的网站(但这个数字只会增长)。

如果不止于此,请点击页面顶部“资源管理器”标签下的目标集或电子商务指标集(无论您用于跟踪转化次数):

如何更改Google Analytics中标准报表的指标集

您的桌面访问转化次数远远超过移动访问次数吗?如果移动转化率低于桌面转化率的一半,则您的网站的效果低于行业标准,您需要针对移动访问者进行优化。

我的移动网站如何在他们的屏幕上显示?

转到标准报告>受众>移动>设备,然后将主要维度更改为“屏幕分辨率”。您可以通过单击可以使用的其他主要维度行右侧的“其他”下拉菜单,在表格正上方进行更改。尝试访问者使用的10种最常见的屏幕分辨率。您的移动网站如何看待它们?使用  Screenfly  在不同设备上查看您的网站。您可能会惊讶于有多少平板电脑或大型手机看到过于简化的网站并不是非常引人注目。即使您的移动网站在50%的移动访问中看起来很棒,如果在其他50%上看起来很糟糕,您应该考虑响应式网页设计。

我的移动网站能为访问者提供他们想要的内容

查看标准报告>移动>概述下的移动跳出率。当访问者登陆您的移动网站时,是什么让他们比在桌面上离开更快?移动访问者的跳出率应与桌面访问者大致相同。

如果您有时间,请进行完整的移动SEO审核,以确定您网站的移动版本需要的样子。Aleyda Solis撰写了一篇关于搜索状态的优秀移动审计指南。

您最好的选择:慢慢转向响应式网页设计

如果您想慢慢转向响应式网页设计或者已经拥有一个非常好的移动网站,请考虑让您的网站做出响应,以便针对台式机和平板电脑进行优化,但尚未针对移动设备进行优化。设计将更容易,但您将首先了解技术方面,并且您将获得更好的平板电脑用户转换(您可能尚未对其进行优化)。

Ethan Marcotte在原始文章中解释了编码的工作原理,开发人员一直在为流行的CMS(适用于WordPressDrupalJoomla)创建主题。

请注意,技术实施相当先进,您应注意避免以下一些小错误:

1.使用压缩图像

您可能会在桌面版本的网站上加载一些华丽的照片,但这些照片也必须在移动版本上加载。74%的移动用户将在等待页面加载5秒后离开,因此请确保尽可能地压缩图像,并稍微谨慎使用它们。Smush.it  是压缩图像的绝佳工具。

2.适用于所有屏幕尺寸

很多设计师都希望设计一个移动尺寸,一个平板电脑尺寸和一个桌面尺寸,并且只需制作一个“响应式”设计,将网站划分为不同的标准尺寸布局。但我们有大小型手机,平板电脑大小与Kindle Fires一样大到10英寸三星Galaxy Tabs,桌面显示器大到30英寸。响应式设计更多的是调整页面上元素的大小,因为您拥有的像素数多于将一个设计捕捉到另一个设计中的像素数。正如设计师斯蒂芬海伊所说,“首先从屏幕小开始,然后扩展直到看起来像sh * t。是时候插入一个断点!“

3.始终显示所有内容

找到一种方法可以将页面桌面版本中的所有内容都放到页面的移动版本上,这可能会让人感到压力,但这就是响应式网页设计的重点。在上述示例中,唯一消失的内容是广告(用户可能首先不想要的)和一些导航(由更简单的导航版本取代)。没有隐藏实际内容。移动访问者需要与桌面用户一样多的信息和多少选项,因此不要剥夺他们。

4.优化触摸

您可能不会在网站的移动大小上意外包含onmouseover JavaScript事件,但请注意,平板电脑也不能用鼠标悬停,桌面上的某些人可能正在使用Windows 8并希望使用触摸。最佳做法是,无论屏幕大小如何,只需触摸即可完全访问您的网站。

5.在所有浏览器上测试

还记得过去的好日子,当你抱怨在IE  Firefox 上测试你的网站时?现在你有了:

桌面:

  • IE9 for Windows 7
  • IE10 for Windows 8(不运行Flash)
  • 火狐
  • 苹果浏览器

平板电脑/手机

  • 苹果浏览器
  • 默认Android浏览器
  • Chrome测试版
  • 海豚
  • 歌剧
  • 火狐

那些只是最受欢迎的。您还必须以不同的屏幕分辨率测试所有这些。

但这是值得的

切换到响应式网页设计将是一个巨大的挑战,但随着行业的发展方向,它将为您的未来做好准备,并使您领先于竞争对手。

有没有人做过这个开关?对于那些没有的人有什么建议吗?