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

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

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

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

结果，公司的公司响应的网站产生更多的领导与那些没有这样做的公司相比，保持不断增长的竞争优势。

但是响应网站设计的究竟是什么，它如何工作，以及为什么要制作开关？本指南旨在回答这些问题，提供一些引人注目的统计数据，并教授您的主要功能响应设计所有营销人员都应该知道。让我们开始吧。

响应式网页设计不再是一种建议——它是建立你的品牌意识，丰富你的用户体验(UX)，转化更多的网站访问者的关键投资。

它还节省了您的业务宝贵时间。您不能为每个潜在设备设计一个单独的网站，您的访客可能会使用 - 更不用说未来的技术。响应式网页设计确保您的网站与所有设备和屏幕兼容，以确保令人愉快的体验......现代设备和尚未发明的人。

让我们走更多为什么响应式设计在当今非常重要。

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

响应设计只要他们选择浏览，允许您到达更广泛的，更加啮合的受众。

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

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

让我们解开敏感网络设计的三个主要好处。

1.响应的网络设计有助于消费者发现您的网站。

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

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

2.响应式网页设计可以让购物者在你的网站上停留更长时间。

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

移动用户期望快速、高质量的网站体验(谷歌也是如此） - 您可以满足响应网站设计的期望。

在几秒钟内使用我们的网站GEARER将您的网站级评定，并学习如何免费改进它。

3.响应的网络设计建立积极的品牌认可和与消费者的信任。

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

响应网站设计喜悦在线购物者，鼓励他们推荐您的业务，并将它们带回购买。

如何做出响应式网页设计

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

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

可以使用促进响应设计的CMS或站点构建器来实现响应的网页设计。这是一些常见的选择。

1. CMS枢纽

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

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

源

2.WordPress.

WordPress.是世界上最流行的CMS，并通过提供最简单的网站构建器之一古腾堡编辑器。

WordPress提供了数千个主题和模板，包括很多响应设计模板。(找到更多响应性强的Wordpress主题在这里和在这里了。)

源

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

3.广场空间

广场空间是一个热门网站建设者，提供华丽的网站设计和创意工具。

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

源

4. Wix.

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

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

源

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

响应式网页设计最佳实践

使用直观的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还将在不同大小的设备上提供PEEK。当然，您也可以使用自己的移动设备。

响应式网页设计模板

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

通过Hubspot营销专业获得数千个模板。

1.DjanGo响应式设计模板

价格: 200美元

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

2. Prodigy响应设计模板

价格： 自由

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

3.量子响应式设计模板

价格：75美元

这量子模板是一个多功能主题，捕捉您的受众与粗体标题和视频背景。使用各种页面布局和自定义模块自定义您的网站。

4. Kalahari响应设计模板

价格：199美元

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

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

价格： 自由

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

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

对于如此多的消费者在其移动设备上购物和浏览，响应设计是绝对的必备。没有它，您可以遗漏领先，客户和收入。

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

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