响应式网页设计如何工作

越来越多的人除了使用台式电脑以外，还使用移动设备上网，这已经不是秘密了。事实上，有近70亿手机用户在全世界（供参考，世界人口为目前为78亿．这是大量的移动活动。)

但对于像我们这样的营销人员来说，他们在这些移动设备上所做的事情更加引人注目。

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

因此，那些快速响应的网站会产生更多的潜在客户并保持相对于不这样做的公司的竞争优势。

但是，响应式网站设计到底是什么，它是如何工作的，以及为什么要进行转换？本指南旨在回答这些问题，提供一些令人信服的统计数据，并向您介绍响应设计所有的营销人员都应该知道。让我们开始吧。

响应性网页设计不再是一个建议——它是建立品牌知名度、多样化用户体验（UX）和吸引更多网站访问者的关键投资。

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

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

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

响应设计允许您接触到更广泛、更积极的受众，无论他们选择在何处浏览。

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

这意味着大量的客户和收入。

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

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

很多人通过他们的移动设备访问谷歌63％事实上谷歌也会处罚不提供响应式设计的网站。它的移动优先索引实际上会影响你的网站排名，并导致它在搜索引擎结果页面(SERPs)上下降，以支持为消费者提供移动友好设计的网站．

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

2.响应性网页设计使购物者在您的网站上停留的时间更长。

网站智能手机的反弹率接近40%(相比之下，平板电脑只有27%)。此外，一个网页在5秒或更短的时间内加载，保证了70%的浏览时间。

移动用户期望快速、高质量的网站体验(谷歌也是如此)-期望您能通过响应性网站设计满足要求。

使用我们的网站分级器在几秒钟内为您的网站评分，并学习如何免费改进网站。

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

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

响应式网站设计让在线购物者感到愉悦，鼓励他们推荐您的业务，并让他们再次购买更多。

如何做出响应式网页设计

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

CMS是一种软件，可以雷竞技苹果下载官方版让你在不知道如何编码的情况下构建你的网站——包括了解如何为响应性设计编写代码. 站点生成器是类似的工具，但它们放弃了一些功能由CMS提供以换取易用性和较低的价格。

响应性web设计可以使用CMS或网站生成器来实现，以促进响应性设计。以下是一些常见的选择。

1.CMS中心

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

就你的网站建设体验而言，CMS Hub提供了预先构建的网站主题，也通过移动优化，以满足你的访问者和客户，无论他们在哪里，以何种方式浏览。

来源

2.WordPress

WordPress是世界上最流行的CMS，并通过提供最直接的网站建设者之一来保持这一最高级古腾堡编辑器．

WordPress提供了数以千计的主题和模板，包括大量的具有响应性设计的模板．（查找更具响应性的Wordpress主题在这里和在这里（我也是。）

来源

笔记:一旦你为你的WordPress网站通过添加免费表格、实时聊天、电子邮件营销和分析，吸引和转换访问者HubSpot的WordPress的插件．

3.平方空间

平方空间是一个受欢迎的网站建设者，提供华丽的网站设计和创意工具。

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

来源

4.巫师

巫师是另一个网站建设者它提供免费和付费的网站订阅。它提供了易于使用的拖放编辑器、免费托管和安全功能。

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

来源

除了使用上述CMS工具或网站建设者之一创建响应性web设计之外，还可以阅读此博客文章以了解如何优化你的网站可以移动使用也

响应式网页设计最佳实践

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

1.不要忽视你的按钮。

当网站访问者登陆你的网站时，你希望他们做什么？采取行动，对吗？这可以通过点击一个行动呼吁（CTA），如了解更多,下载,甚至购买．

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

例如，假设你提供一个主要的CTA得到HubSpot的免费在桌面站点的顶部，访问者可以从每个页面查看是否。

然而，当你浏览你的手机网站时，它并不适合头部。与其完全删除它，不如考虑移动按钮或将其包含在你的汉堡菜单中(右上角的三行)，这样访问者仍然可以看到并点击它。

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

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

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

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

来源

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

3.确保图像缩放。

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

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

来源

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

笔记:HubSpot可在内容上自动调整图像大小-在CMS Hub上建立响应性网站的另一个原因！

4、考虑你的排版。

在你的桌面网站上看起来华丽的字体在四分之一大小的移动设备上可能不太容易阅读。如果访问者不能阅读你的网站，他们肯定不会点击或购买任何东西。

来源

另外,旋转你的网站字体移动体验可能会给你的桌面用户留下太大的丑陋文字，与你的品牌冲突。

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

• 16pt正文类型是桌面和移动web内容的经验法则。

• 避免超薄字体，因为它们在较小的屏幕上会消失。

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

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

5.充分利用设备特性。

虽然潜在客户和客户不能通过电脑给你打电话，但他们肯定可以通过智能手机给你打电话。考虑改变你自己“现在聊天！”CTA对“现在打电话！”并用你的商务电话号码代替电子邮件。

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

6.经常测试你的网站。

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

马特·克斯利(Matt Kersley)制作的便捷工具还将在不同大小的设备上浏览您的网站。当然，你也可以使用自己的移动设备。

响应式网页设计模板

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

通过HubSpot Marketing Professional访问数千个模板。

1.DjanGo响应式设计模板

价格: $200

这个DjanGo模板是一个完全可定制和响应的站点模板。它的现代、极简设计允许访问者关注你的网站内容和产品信息。

2.Prodigy响应式设计模板

价格：免费

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

3.量子响应设计模板

价格: $75

这个量子模板是一个多用途的主题，以粗体标题和视频背景吸引观众。使用各种页面布局和自定义模块自定义站点。

4.卡拉哈里响应式设计模板

价格: $199

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

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

价格：免费

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

用响应式设计回应你的受众

有如此多的消费者在他们的移动设备上购物和浏览，响应式设计是绝对必要的。没有它，你可能会错过潜在客户、客户和收入。

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

编者按:这篇文章最初发表于2014年9月，现已进行了更新。