响应式设计如何让你从你的网站获得更多

我们生活在一个多屏幕的世界。我记得我是在80年代长大的，那时我们一家五口只有一个屏幕。那是家用电视机(我想是索尼特丽珑)，我们用它看电视、VHS录像带和电脑(我们有一台Commodore 64)。

但是时代已经改变了很多。有一天，我和家人坐在客厅里。在我和妻子、小女儿之间，我们都被屏幕包围着。我们有两个智能手机，一个iPad，一个iPod，一个LED电视，一个Macbook，一个Wii U控制器和一个婴儿监视器。

一个房间里有8个屏幕。

更疯狂的是，除了婴儿监视器，每一个都能浏览互联网。再加上每一个都有不同的分辨率。

这对现代网页设计师来说是一个非常棘手的问题。为什么?你的艺术作品需要在大量设备上看起来很漂亮。

那么现代营销者该怎么做呢?

一种选择是忽略手机屏幕，因为大多数人仍然在传统的电脑上浏览互联网，但这不是主动的，而且真的限制了你的下一个网站构建的保质期。

统计数据显示，随着时间的推移，移动通信流量将继续增加，考虑到新的手持设备的普及，这是有道理的。事实上,根据Mashable, 2013年在美国，17.4%的网络流量来自手机，比2012年的11.1%增长了6%以上。

所面临的挑战

网页设计师如何处理所有这些可用于互联网设备的选项?我们曾经专注于迎合智能手机用户，为他们提供一个完全独立的手机版网站。虽然这在某种程度上是有效的，但它是一个完全独立的web属性，需要额外的开发资源，最终成本。bob体育苹果系统下载安装两个版本的内容都需要维护，这只会让事情变得更加复杂。

在当今时代，针对特定设备和分辨率的想法是可笑的。你可以列出更多的决议、手机和平台。如果你采用了这种方法，当你完成针对每个特定设备的定位和编码时，你的网站就已经过时了，需要重新设计了。听起来有效的,对吗?我们不这么认为。

然而，有趣的是，挑战存在于分辨率谱的两端。越来越多的人不仅在有限的显示器(如智能手机或平板电脑)上浏览网页内容，而且还在高分辨率显示器(如高清电视)上观看内容。

“理想”的解决方案

最起码，我们需要关注合规。如果我们同意用户必须在他们的移动设备上浏览网页内容(我们真的不应该这样)，那么我们需要做的就是确保我们的网站有一些基本的依从性。以下是你应该做的:

• 避免Flash, Quicktime或任何其他插件，可能对移动用户不可用
• 宽度不要超过960px，否则人们会在卷轴城市
• 不要使用小于11px的字体
• 确保主站点导航相当大

但真正的问题是，这样就够了吗?我们愿意接受这个解决方案吗?

理想的解决方案

在这种情况下，理想的解决方案是响应式设计。响应式设计的总体理念是建立一个单一的web属性，它有能力动态更改显示基于它所使用的设备(无论硬件或软件平台)。bob电竞官方下载这既适用于低分辨率设备，也适用于高分辨率设备。

上图显示了响应式设计的实际应用。它展示了响应式设计的网站如何在多个设备上显示。记住，它仍然是同一个网站(我们没有设计一个独立的手机友好版本)，但无论终端用户使用什么设备，网站都是优化的。

事实上，响应式设计更多的是让一个网站在多种设备上呈现良好效果的想法。虽然它还处于早期阶段，但我们看到越来越多的网站都有了响应性。

在开发领域，关于什么是让你的网站具有响应性的最佳方法，存在着很大的争论。我们在New Breed的解决方案，和我们的许多同事一样，是用Twitter引导框架．

这个框架使用12列网格系统，允许响应网站。我们看到的许多主题和平台(包括HubSpot的因为)正在利用这个框架，我们对其结果印象深刻(从开发的角度来看，它易于使用)。

执行

现在希望我们已经引起了您的兴趣，您可以明白响应式设计为什么重要了，我们想向您展示如何在您自己的组织中实现它。

响应式设计始于你的网站，但很快就会成为你营销策略的深层部分。你可能在想什么?首先，正如我们在这篇文章中提到的，响应式设计是你的网站呈现的一个重要组成部分，随着互联网浏览器的行为改变，它变得越来越必要。

考虑使用响应式设计重新设计网站的第一步是查看分析。你的访问者使用什么类型的设备来访问你的网站?如果您仍然有主要使用桌面的用户，那么响应式设计可能就不是您必须做出的改变。但另一方面，如果你的流量改变了他们的行为，现在他们使用平板电脑和移动设备访问你的网站，那么你就可以从响应式网站中受益匪浅。

看看下面的图表，对比了我们从去年这个时候到现在的实际流量。这些图表代表了互联网正在发生的巨大变化。

如果你的图表看起来像这样，那么我们鼓励你考虑用响应式设计重新设计你的网站，原因有几个。当你的网站是可响应的，这里有六个积极的影响，你可以看到:

1)增加转换

在我们之前的内部博客中，我们讨论了如何做到这一点最大化转换与销售准备网站．这是相同的方法-如果你的网站是销售准备(即有明确的转换路径映射到你的买家角色)，你将在你的方式最大化你的转换。

有一个销售准备网站的一部分是有网站设计的响应。由于响应式网站迎合了访问者所使用的特定设备，所以用户与公司的整体体验得到了改善，用户也不太可能转向你的竞争对手。bob全站app

2)降低反弹率

通常情况下，如果访问者在移动或平板设备上浏览你的网站，而网站没有响应，他们就会离开(例如，他们会离开你的网站)。“反弹”)。这意味着当他们点击你的主页时，他们必须缩放或滚动来找到搜索框(举个例子)，他们会感到沮丧，然后转移到其他地方。这可能会对你的跳出率产生戏剧性的影响——以一种糟糕的方式。

有了一个响应式网站，这些用户就不用担心点击和滚动来找到他们想要的东西了。该网站将适应他们使用的任何设备。反过来，他们可能会四处点击并访问更多页面，从而降低你的跳出率。

3)提升页面排名

我们之前说过，但是搜索引擎(尤其是谷歌)现在在搜索结果中更倾向于响应性网站。具体来说，如果用户通过移动设备进行搜索，谷歌更有可能为他们提供一个移动响应的相关网站。

他们的最终目标是给搜索者他们想要的东西，这意味着减少他们因为找不到他们想要的东西而失望的可能性。

4)更强大、统一的在线表现

大多数迎合手机用户的公司都有一个手机专用网站。此站点位于子域上，有时看起来与主站点不同。它仍然符合品牌标准(至少它应该)，但感觉不像原来的网站。

但是对于响应式网站，你就不用担心这个问题了。你一开始就设计了你的主站，所以它在不同的设备上看起来是一样的(尽管有些部分稍微改变了)。

5)降低开发成本

有了响应式网站，你不再需要为移动设备建立一个单独的网站。这意味着你的开发成本可以减少一半。你的维护费用也是一样。我们都知道维护一个网站不是免费的，所以如果运行两个网站，你需要支付两倍的维护费用。虽然重新设计网站可能是一笔开销，但从长远来看，这是在省钱。

6)竞争优势

如果你的竞争对手还没有接受响应式设计，你的公司就有机会获得竞争优势。bob全站app从你的竞争对手中脱颖而出——更好的是，把那些离开他们的无响应网站的访问者转变成你自己的客户!

结论

现在，比以往任何时候都更重要的是，我们的网站可以在多种设备上访问。随着客户行为的变化，我们需要与他们一起发展，我们认为使用响应式设计来优化网站是一件很简单的事情。你不仅可以节省时间(和麻烦)，还可以降低开发成本，你的网站将在每个设备上都有一个优化的显示。

谷歌也更加关注为手机优化的网站，甚至给这些网站更高的排名。随着搜索世界的不断变化，拥有一个移动优化的网站将增加在线能见度。

如果你还是不相信，可以这样想:不管你是否愿意，人们都在通过移动设备访问你的网站。建立你的网站优化转换和生成,但是当那个人使用他们的智能手机或平板电脑进入你的网站,不能找到他们正在寻找或纾困,因为他们必须滚动,然后你可以失去转换成铅。基本上，你是把钱留在桌子上。