响应式网页设计如何工作

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

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

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

因此，公司已经响应式网站产生更多的线索并保持相对于不这样做的公司的竞争优势。

但是，响应式网站设计到底是什么，它是如何工作的，为什么你应该做出这样的转变?本指南将回答这些问题，提供一些引人注目的统计数据，并教你的关键特性响应设计所有营销人员都应该了解。让我们开始吧。

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

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

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

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

响应设计让你能够接触到更广泛、更投入的用户，无论他们选择在哪里浏览。

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

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

让我们来分析响应式网页设计的三个主要好处。

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

很多人通过他们的移动设备访问谷歌63％事实上,。谷歌也惩罚网站不提供响应设计。它的尝试建立索引实际上可以影响您的网站的排名，并可能导致它在搜索引擎结果页面（SERPS）上撞击为消费者提供移动友好设计的网站．

所以，如果你的大多数观众正在搜索他们的智能手机（正如上述统计数字所示)，而你的网站没有响应式设计，客户可能根本找不到你的网站。

2.响应式网页设计使购物者在你的网站更长的时间。

网站智能手机的反弹率接近40%（相比仅27％的平板电脑）。此外，在五秒钟或更短的时间内加载的网页保证了70％的观看会话。

移动用户期望快速、高质量的网站体验(那么谷歌) -期望您可以满足响应式网站设计。

使用我们的网站评分器来评分您的网站在几秒钟内，并学习如何提高它免费。

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

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

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

如何进行响应的网页设计

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

CMS是一种软件，允许bob电竞官方下载您在不知道如何代码的情况下构建您的网站 - 并且包括知道如何为响应式设计编写代码．站点构建器是类似的工具，但它们放弃了一些功能由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.Prodigy响应式设计模板

价钱:免费

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

3.量子响应设计模板

价钱: 75美元

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

4.Kalahari响应式设计模板

价钱: 199美元

的喀拉哈里沙漠的模板是一个响应主题，在页面级别提供动态导航和自定义。使用此模板将受众转换为明亮，突出的CTA。

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

价钱:免费

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

用敏感设计回应您的受众

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

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

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