响应式网页设计是如何工作的

众所周知，越来越多的人除了使用台式电脑外，还使用移动设备来接入互联网。事实上，有近70亿手机用户在全球范围内。(参考，世界人口是目前78亿。这是大量的移动活动。)

但他们在这些移动设备上所做的事情对我们这样的营销者来说更有吸引力。

40%的消费者在亲自购买之前，使用他们的移动设备进行研究。超过一半经常用智能手机购物，还有55%的消费者在社交媒体上查找产品后进行移动购买。

因此，公司响应式网站产生更多的线索与那些没有这样做的公司相比，保持不断增长的竞争优势。

但究竟什么是响应式网站设计，它是如何工作的，为什么你应该做出改变?本指南旨在回答这些问题，提供一些引人注目的统计数据，并教你的关键功能响应设计所有营销人员都应该知道。让我们开始吧。

响应式网页设计不再是一个建议 - 它是建立品牌知名度的重要投资，使您的用户体验（UX）多样化，并转换更多网站访问者。

它还可以节省您的业务宝贵时间。你不可能为你的访问者可能使用的每一个潜在设备设计一个单独的网站——更不用说未来的技术了。响应式网页设计确保你的网站与所有设备和屏幕兼容，以确保愉悦的体验，包括现代设备和那些尚未发明的设备。

让我们深入研究一下为什么响应式设计在当今非常重要。

为什么响应式网页设计很重要

响应设计让你接触到一个更广泛的，更多参与的观众，无论他们选择浏览。

更重要的是，缺乏响应性的网页设计可能会适得其反——它会使你的网站远离那些寻求吸引人的移动体验的用户。事实上，研究表明，你可能会失去多达90%的潜在客户由于一个糟糕的移动友好的体验。

这是一个巨大的客户和收入。

让我们来分析一下响应式网页设计的三大好处。

1.响应式网页设计帮助消费者发现你的网站。

很多人通过移动设备访问谷歌63%事实上,。谷歌也惩罚不提供响应式设计的网站。它的尝试建立索引会影响你的网站的排名，并导致它在搜索引擎结果页面(serp)上的排名下降为消费者提供移动友好型设计的网站。

所以，如果你的大多数用户是在他们的智能手机上搜索(如上面的统计数据所示)，如果你的网站没有响应式设计，客户可能根本找不到你的网站。

2.响应网页设计使购物者保持在您的网站上更长。

网站智能手机的反弹率差不多40％(相比之下，药片只有27%)。另外，一个网页在5秒或更短的时间内加载可以保证70%的浏览时间延长。

移动用户期望快速，高质量的网站体验（那么谷歌) -期望你能满足响应式网站设计。

使用我们的网站评分器评分您的网站在几秒钟，并了解如何免费改善它。

3.响应式网页设计建立了积极的品牌认知度和消费者的信任。

最后,57%的消费者比方说，他们不太可能推荐一家设计拙劣的手机网站的企业。同一份报告显示，超过一半的在线购物者对一家企业的在线表现感到失望，可能会对该企业本身产生负面看法。

响应式网站设计让在线购物者高兴，鼓励他们推荐你的业务，并吸引他们回来购买更多。

如何做出响应式网页设计

它是可能制作自己的响应网站使用CSS和HTML。但这就像在有高速公路的情况下走漫长的小路。在这种情况下，高速公路是内容管理系统或者一个网站建设者。

CMS是一种软件，它可雷竞技苹果下载官方版以让你在不知道如何编码的情况下建立你的网站知道如何为响应式设计编写代码。站点构建器是类似的工具，但它们放弃了一些功能CMS提供以便利的使用和较低的价格作为交换。

响应式网页设计可以使用CMS或网站构建器来实现，这有助于响应式设计。这里有一些常见的选择。

1.CMS中心

CMS中心是一个完全托管、完全集成的CMS。它连接到你的另一个HubSpot的工具因此，您可以为您的访问者、客户和员工提供统一的营销、销售、服务和网站浏览体验。

就你的网站建设经验而言，CMS Hub提供预建的网站主题，也移动优化，以满足您的访客和客户，无论他们在哪里，无论他们浏览。

来源

2.WordPress

WordPress是世界上最受欢迎的CMS，并通过提供最简单的网站建设者之一来维持这个高级的古腾堡编辑器。

WordPress提供了数千个主题和模板，包括很多带有响应式设计的模板。（找到更多敏感的WordPress主题这里和这里， 也。）

来源

请注意:一旦你为你的WordPress网站，通过添加免费表单、在线聊天、电子邮件营销和分析来吸引和转化你的访客HubSpot的WordPress的插件。

3.Squarespace

Squarespace是一个流行的网站构建器，提供华丽的网站设计和创造性的工具。

Squarespace提供60个移动优化模板，从中你可以选择快速建立你的网站。在Squarespace编辑器中，您还可以从桌面视图到平板电脑视图再到移动视图，以确保您的设计无缝地响应不同的设备。

来源

4.款

款是另一个网站建设者该公司提供免费和付费的网站订阅服务。它提供了一个易于使用的拖放编辑器、免费托管和安全特性。

所有Wix模板都为访问者提供了移动优化的体验。和Squarespace一样，Wix编辑器允许你查看你的网站在多个设备上的外观。

来源

除了使用上面的CMS工具或网站构建器来创建响应式网页设计之外，阅读这篇博文来学习如何优化您的网站用于移动使用， 也。

响应式网页设计最佳实践

使用直观的CMS或网站构建器，响应式设计很容易。但即使你使用的是最好的CMS，它也不能弥补对移动友好的内容和媒体——这部分取决于你。让我们来谈谈一些响应式网页设计的最佳实践，帮助你为你的访问者和客户创造最友好的移动网络体验。

1.不要忽视按钮。

当他们登陆网站时，您希望网站访问者是什么？采取行动，对吗？这可以通过单击呼叫 - 动作（CTA）了解更多,下载,甚至买。

站点访问者在您的桌面站点上如何与这些按钮交互?如果这些cta弹出、滚动或位于你的网页底部，你可能需要重新评估手机用户如何访问它们。

例如，假设你提供一个主CTA得到HubSpot的免费在您的桌面网站的顶部，访问者可以看到来自每页的访问者。

然而，当您查看您的移动网站时，它并不适合头部。而不是完全删除它，考虑移动按钮或把它包括在你的汉堡包菜单(在角落的三行)，在那里访问者仍然可以看到和点击它。

此外，请考虑移动网站上可点击区域的大小。与桌面不同，访问者可以使用鼠标光标单击按钮和链接，他们使用手指在他们的智能手机或平板电脑上导航您的网站。

建议使用移动设备上的可点击元素高度至少48像素。这包括按钮、表单字段、内联链接和菜单导航。

2.使用可伸缩的矢量图形。

如果你的网站包含插图或图标，它们应该格式化为可伸缩矢量图形(svg)。

来源

svg可以无限缩放，不像其他媒体格式，如jpg和png。这可以确保您的网站为任何设备上的用户提供高质量的浏览体验。它们还可以帮助您的站点加载更快——我们已经讨论过这对用户体验和SERP排名有好处。

3.确保您的图像比例。

插图和图标并不是唯一在不同设备上改变尺寸的媒体类型。你的图像也需要缩放。

例如，桌面网站可能需要1200像素的图像，而移动网站可能需要400像素的图像。在所有设备上使用更大的分辨率会降低页面速度，所以不建议使用这种方法。

来源

相反，你可以考虑上传不同的图像分辨率，并指定你想在每个设备上显示的图像。这通常是通过在你的网站代码中为特定的“源”对象(例如平板电脑或手机)分配不同的“媒体”标签来实现的。

请注意:HubSpot可以根据内容自动调整图像大小-另一个理由建立您的CMS枢纽响应网站!

4.考虑你的排版。

一种字体在你的桌面网站上看起来很漂亮，但在只有它四分之一大小的移动设备上可能就不那么容易阅读了。如果访问者无法阅读你的网站，他们肯定不会点击或购买任何东西。

来源

另外,旋转你的网站字体移动体验可能会给桌面用户留下过于庞大且与品牌冲突的丑陋词汇。

以下是我们对响应式网页设计的最佳排版建议:

• 对于桌面和移动网络内容来说，16pt的体型是经验法则。

• 避免在小屏幕上淡出的超薄字体。

• 确保所有标题明显大于正文和副标题内容。

• 使用对比色来排版，这样它就不会淡入你的网站背景色。

5.充分利用设备特性。

虽然前景和客户无法将您的计算机叫您，但它们肯定可以在他们的智能手机上。考虑改变你的“现在聊天！”CTA对“现在打电话！”并包括您的商务电话号码代替电子邮件。

此外，如果你的企业有一个移动应用程序，提示网站访问者从你的网站打开你的应用程序-这可能是他们不能在他们的电脑上做的。

6.经常测试你的网站。

和往常一样，在不同的设备和浏览器上测试你的响应式网站。看看谷歌的移动友好测试工具查看您的站点的运行情况。

这个方便的工具由Matt Kersley也将提供一个浏览你的网站在不同大小的设备。当然，你也可以使用自己的移动设备。

响应式网页设计模板

确保你的网站具有响应式设计的最好方法是从响应式网页设计模板开始。下面是5个华丽的模板HubSpot的资产市场这将给您的网站访问者一个移动友好的浏览体验。

通过HubSpot Marketing Professional获取数千个模板。

1.DjanGo响应式设计模板

价格：200美元

的DjanGo模板是一个完全可自定义和响应性的站点模板。它的现代，极简设计让访问者关注你的网站内容和产品信息。

2.神童响应式设计模板

价格:免费

的神童模板是一个干净的网站模板，到达您的观众与明亮的媒体和多个cta。它自动转换其设计，以适合您的网站访问者使用的任何设备。

3.量子响应式设计模板

价格: 75美元

的量子模板是一个多用途的主题，用粗体标题和视频背景来捕捉你的观众。使用各种页面布局和定制模块定制您的站点。

4.Kalahari响应式设计模板

价格: 199美元

的喀拉哈里沙漠的模板是一个响应式主题，在页面级提供动态导航和自定义。使用这个模板来转换你的观众与明亮的，突出的cta。

5.启动框架响应式设计模板

价格:免费

的启动框架模板是一个独特的网站模板与粗体排版和明亮的图形。在HubSpot的内容编辑器中原生构建它，并从数千个图标和几十个定制模块中进行选择。

用响应式设计回应你的用户

随着如此多的消费者在移动设备上购物和浏览，响应式设计绝对是必备之物。没有它，你可能会失去线索、客户和收入。

使用这些工具、模板和最佳实践来开始响应式网页设计。

编者按:本文最初发表于2014年9月，现已全面更新。