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

除了或代替桌面计算机之外，越来越多的人正在使用他们的移动设备访问互联网并不秘密。事实上，有近70亿手机用户全世界。（供参考，世界人口是目前78亿。这是大量的移动活动。）

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

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

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

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

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

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

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

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

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

更重要的是，缺乏敏感的网络设计可以做到相反 - 它可以从寻找吸引移动体验的客户疏远您的网站。事实上，研究表明你可以失去90％的潜在客户由于移动友好体验不佳。

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

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

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

很多人通过移动设备访问谷歌63%， 实际上。谷歌也受到惩罚没有提供响应设计的网站。它的移动式索引实际上可以影响您的网站的排名，并且可能导致它在搜索引擎结果页面（SERPS）上撞击为消费者提供移动友好设计的网站。

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

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

网站智能手机的反弹率接近40%（相比仅27％的平板电脑）。此外，在五秒钟或更短的内容中加载的网页保证了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的内容编辑器中原生构建它，并从数千个图标和几十个定制模块中进行选择。

用敏感设计回应您的受众

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

今天使用这些工具，模板和最佳实践，以便今天开始响应Web设计。

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