如何响应网页设计作品

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

但他们在那些移动设备上做了什么，对像我们这样的营销人员来说更引人注目。

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

结果，公司的公司响应的网站产生更多的领导在没有的公司中保持竞争性优势。

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

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

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

让我们走更多为什么响应设计如此重要。

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

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

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

这是很多客户 - 和收入。

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

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

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

所以，如果你的大多数用户都在智能手机上搜索(正如上面的统计数据所说），您的网站没有响应设计，客户可能无法找到您的网站。

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. Squarespace.

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

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

源

4. Wix.

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

所有WIX模板都为游客提供了移动优化的体验。像Squarespace一样，Wix编辑器允许您了解您的网站如何在多个设备上查找。

源

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

响应式网页设计最佳实践

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

1.不要忽视你的按钮。

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

网站访问者在桌面网站上有如何与这些按钮进行交互？如果这些CTA弹出，滚动或位于网页底部，您可能需要重新评估移动访问者如何访问这些。

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

但是，当您查看您的移动网站时，它不适用于标题。考虑在汉堡菜单（顶角三行）中移动按钮或包括它，而不是将其移除，而不是删除它，而是在您的汉堡菜单中移动，而且访问者仍然可以看到并单击它。

此外，还要考虑移动站点上可点击区域的大小。在台式机上，访问者可以用鼠标光标点击按钮和链接，而在台式机上，访问者可以用手指在智能手机或平板电脑上浏览网站。

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

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

如果您的网站包含插图或图标，则应将它们格式化为可缩放向量图形（SVG）。

源

与JPGS和PNG等其他媒体格式不同，可以无限地缩放SVG。这确保您的网站为任何设备上的用户提供了高质量的浏览体验。它们还可以帮助您的网站负载更快 - 我们已经讨论过的是用户体验和SERP排名的好处。

3.确保你的图像缩放。

插图和图标不是不同设备上唯一的介质类型更改大小。您的图像也必须扩展。

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

源

相反，考虑上传不同的图像分辨率并指定每个设备上要显示的图像。这通常通过将不同的“媒体”标记分配给网站代码中的特定“源”对象（例如平板电脑或移动）来实现。

笔记：HUBSPOT使自动映像在内容上调整大小- 在CMS Hub上建立响应网站的另一个原因！

4.考虑你的排版。

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

源

或者，旋转你的网站的字体在移动体验中，可以将您的桌面用户带入丑陋的单词，这些单词太大而且与您的品牌进行了冲突。

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

• 16PT身体类型是桌面和移动Web内容的拇指规则。

• 避免使用较小的屏幕上消除的优步薄字体。

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

• 使用对比颜色的印刷术，因此它不会淡入您的网站背景颜色。

5.充分利用设备特性。

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

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

6.经常测试您的网站。

一如既往，在不同的设备和浏览器上测试您的响应网站。查看谷歌的移动友好测试工具看看您的网站如何执行。

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

响应式网页设计模板

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

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

1.DjanGo响应式设计模板

价格: 200美元

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

2. Prodigy响应设计模板

价格： 自由

这Prodigy模板是一个干净的网站模板，使用明亮的媒体和多个CTA来到您的受众。它会自动转换其设计以适合您的网站访问者使用的任何设备。

3.量子响应设计模板

价格：75美元

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

4. Kalahari响应设计模板

价格：199美元

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

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

价格： 自由

这启动框架模板是一个唯一的网站模板，具有粗体排版和明亮的图形。在Hubspot的内容编辑器中自行构建它，并从数千个图标和数十个自定义模块中进行建立。

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

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

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

编者注：这篇文章最初发表于2014年9月，并已更新全面。