响应式网络设计的工作方式

这已经不是什么秘密,越来越多的人访问sing the internet using their mobile devices in addition to or in place of desktop computers. In fact, there are将近70亿移动用户全世界。（作为参考，世界人口是目前78亿。That’s a lot of mobile activity.)

但是，他们在这些移动设备上所做的事情对像我们这样的营销人员来说更具吸引力。

40％的消费者use their mobile device to conduct research prior to making an in-person purchase.半数以上routinely make purchases using their smartphones, and55％的购物者在社交媒体上找到产品后进行移动购买。

结果，有响应迅速的网站生成更多潜在客户并保持竞争优势越来越高于那些没有的公司。

但是，响应迅速的网站设计到底是什么，它如何工作？为什么要进行切换？本指南着手回答这些问题，提供一些令人信服的统计数据，并教您响应式设计all marketers should know about. Let’s get started.

响应迅速的网络设计不再是一个建议 - 建立品牌知名度，使您的用户体验（UX）多样化并转换更多现场访问者是一项关键投资。

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

让我们进一步研究为什么如今，响应式设计是如此重要。

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

Responsive design可以让您在任何地方吸引更广泛，更具参与度的受众，但是他们选择浏览。

More importantly, a lack of responsive web design can do the opposite — it can alienate your website from customers looking for an engaging mobile experience. In fact, research shows that you can lose up to90% of your potential customers由于移动友好的体验不佳。

这是很多客户 - 收入。

让我们解开响应式Web设计的三个主要好处。

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

许多人在移动设备上访问Google -63％， 实际上。Google也会受到惩罚websites that don’t offer a responsive design. Its移动优先索引can actually impact how your website ranks and can cause it to be bumped down on search engine results pages (SERPs) in favor ofwebsites that offer consumers a mobile-friendly design。

So, if the majority of your audience is searching on their smartphone (正如上面的统计数据所述），并且您的网站没有响应迅速的设计，客户可能根本找不到您的网站。

2.响应迅速的网页设计可以使购物者在您的网站上更长的时间。

网站智能手机的跳出率接近40％(compared to only 27% for tablets). Also, a web page that loads in five seconds or less guarantees 70% longer viewing sessions.

移动用户期望快速，高质量的网站体验（Google也是如此） - 期望您可以遇到响应迅速的网站设计。

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

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

最后，57% of consumers假设他们不太可能推荐一个企业，该公司的移动网站较差。同一份报告表明，超过一半的在线购物者对企业的在线形象感到失望的人可能会对企业本身进行负面思考。

响应式的网站设计使在线购物者感到高兴，鼓励他们推荐您的业务，并带回他们购买更多。

How to Make a Responsive Web Design

Itis可能会建立自己的响应式网站使用CSS和HTML。但这就像在有高速公路可用时走很长的后路。在这种情况下，高速公路将是内容管理系统（CMS）或网站构建器。

A CMS is a software that allows you to build your website without knowing how to code — and that includes知道如何编码响应式设计。网站建设者是类似的工具，但他们放弃了一些功能offered by a CMS换取易用性和降低定价。

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

1. CMS集线器

CMS集线器is a fully-hosted, fully-integrated CMS. It connects to your otherHubSpot toolsso you can present a unified marketing, sales, service, and site browsing experience for your visitors, customers, and employees.

In terms of your site building experience, CMS Hub offers pre-built website themes that are also mobile-optimized to meet your visitors and customers wherever and however they’re browsing.

来源

2. WordPress

WordPress是世界上最受欢迎的CMS，并通过提供最直接的网站建设者之一（The The The The The The The The The The The The The The The The The The The The Meartlative）保持了这一最高级。Gutenberg editor。

WordPressoffers thousands of themes and templates to start with, including numerous具有响应设计的模板。（找到更多响应式WordPress主题这里和这里， 也。）

来源

笔记：一旦为您的主题设置了主题WordPress网站，通过添加免费表格，实时聊天，电子邮件营销和分析来吸引和转换您的访问者HubSpot’s WordPress plugin。

3.方形

方形是一家受欢迎的网站建设者，可提供精美的网站设计和创意工具。

方形offers 60 mobile-optimized templates from which you can choose to quickly build your site. Within the Squarespace editor, you can also transition from desktop to tablet to mobile view to ensure your designs seamlessly respond to different devices.

来源

4. Wix

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

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

来源

除了使用上述CMS工具或网站构建者之一创建响应迅速的网页设计外，请阅读此博客文章以学习how tooptimize您的网站移动使用， 也。

Responsive Web Design Best Practices

With an intuitive CMS or site builder, responsive design is easy. But even if you’re using the very best CMS, it can’t compensate for mobile-friendly content and media — that part is up to you. Let’s talk about some responsive web design best practices to help you create the most mobile-friendly web experience for your visitors and customers.

1.不要忽略您的按钮。

当他们降落在您的网站上时，您希望网站访问者做什么？采取行动，对吗？这可能是通过单击“召唤”（CTA）之类的了解更多，，，，下载，，，，or even买。

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

For example, let’s say you offer a main CTA like免费获得HubSpot在桌面站点的顶部，访问者可以从每个页面查看。

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

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

建议在移动设备上点击元素至少为48个像素。这包括按钮，表单字段，内联链接和菜单导航。

2.使用可扩展的矢量图形。

如果您的网站包括插图或图标，则应将它们格式化为可扩展的矢量图形（SVG）。

来源

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

3.确保您的图像规模。

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

For example, desktop websites may require images at 1200 pixels, whereas mobile websites may need those at 400 pixels. Using the larger resolution on all devices can slow down your page speed, so that approach isn’t recommended.

来源

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

笔记：HubSpot启用在内容上调整大小的自动图像- 在CMS集线器上构建响应式网站的另一个原因！

4.考虑您的排版。

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

来源

或者，旋转您的网站字体围绕移动体验，您的桌面用户的丑陋单词太大，与您的品牌冲突。

Here’s our best advice for typography on responsive web design:

• 16PT身体类型是桌面和移动Web内容的经验法则。

• 避免在较小的屏幕上消失的Uber薄字体。

• 确保所有标题显然比身体和副标题内容大。

• 使用对比颜色为您的版式使用对比色，以免淡入网站背景颜色中。

5. Take advantage of device features.

尽管潜在客户和客户无法通过他们的计算机给您打电话，但他们肯定可以使用智能手机。考虑更改您的“现在聊天！”CTA to“现在打电话！”并包括您的业务电话号码来代替电子邮件。

Additionally, if your business has a mobile application, prompt site visitors to open your app from your website — something they might not be able to do on their computers.

6.经常测试您的网站。

与往常一样，请在不同的设备和浏览器上测试您的响应式网站。查看Google的移动友好测试工具查看您的网站的表现。

This handy tool by Matt Kersley还将在不同尺寸的设备上查看您的网站。当然，您也可以使用自己的移动设备。

响应式网络设计模板

确保您的网站具有响应设计的最佳方法是从响应式的Web设计模板开始。以下是五个华丽的模板HubSpot Asset Marketplace这将为您的网站访问者带来移动友好的浏览体验。

通过HubSpot营销专业人员访问数千个模板。

1. DjanGo Responsive Design Template

Price：$ 200

这Django模板is a fully-customizable and responsive site template. Its modern, minimalist design allows visitors to focus on your site content and product information.

2.神童响应式设计模板

Price： 自由的

这天才模板是一个干净的网站模板，可通过明亮的媒体和多个CTA吸引观众。它会自动将其设计转换为适合您网站访问者使用的任何设备。

3. Quantum Responsive Design Template

Price：$ 75

这量子模板是一个多功能主题，它以大胆的标题和视频背景来吸引您的观众。使用各种页面布局和自定义模块自定义您的网站。

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

Price：$ 199

这卡拉哈里模板is a responsive theme that offers dynamic navigation and customization at the page level. Use this template to convert your audience with bright, standout CTAs.

5. Startup Framework Responsive Design Template

Price： 自由的

这Startup Framework template是一个独特的网站模板，具有大胆的排版和明亮的图形。在HubSpot的内容编辑器中本地构建，并从数千个图标和数十个自定义模块中进行选择。

Respond to Your Audience with Responsive Design

随着许多消费者在移动设备上购物和浏览，响应式设计绝对是必不可少的。没有它，您可能会错过潜在客户，客户和收入。

Use these tools, templates, and best practices to get started with responsive web design today.

编者注：该帖子最初于2014年9月发表，并已更新以进行全面性。