为什么您需要响应性网页设计以及如何实现[+示例]

本文的见解来自HubSpot学院的免费网站优化课程．参加完整的课程，了解更多关于响应式设计和如何优化你的网站性能。

放眼全球，超过50%互联网活动总量的70%是在移动设备上完成的。台式机紧随其后的是略高于45%在互联网活动总量中，平板电脑占了其余部分。

今天，有这么多人用手机上网，提供一个很棒的移动网站体验是非常必要的。没有它，你就无法满足大多数互联网用户的需求，因此很可能会错过业务的流量和潜在客户。

那么如何创造有效的手机体验呢?这就是响应式设计发挥作用的地方。

简言之，响应式网页设计是一种设计网页的方法，这些网页在所有设备上都以优化的形式出现。

换句话说，响应性设计将自动为所有屏幕大小重新设置网站格式。这使您的网站访问者能够轻松查看您的网站并与之交互，无论他们使用的是什么设备。

在这里，让我们来探索响应式设计是如何工作的，并看一些例子，以启发您在2020年进行自己的响应式web设计。

响应式设计是如何工作的?

一个考虑到响应性而开发的网站会根据设备和浏览器的大小进行调整，以适当地显示内容。断点设置为定义特定显示的目标范围。例如，您通常会看到手机、平板电脑和台式机的断点。

有一些响应式网页设计的最佳实践遵循:

1. 按钮人的手指比电脑屏幕上的指针大得多。按钮和超链接应该至少48像素宽，48像素高，以确保所有用户都能点击它们。
2. svg:可伸缩矢量图形文件用矢量来定义图像的形状，这意味着它们可以无限缩放而不损失图像质量。
3. 响应的图像：并非所有图像都将是SVG。对于这些，您需要使用CSS规则来自动调整图像的尺寸，以适应用户的屏幕大小。
4. 字体:确保你的字体在所有设备上都是易读的。谷歌建议至少使用16个CSS像素的基本字体大小。
5. 设备功能：虽然潜在客户和客户不能通过电脑给你打电话，但他们肯定可以通过智能手机给你打电话。考虑将你的“聊天现在！”CTA改为“立即呼叫！”，并包括你的商务电话号码代替电子邮件。
6. 测试:一如既往地，在不同的设备和浏览器上测试你的响应性网站。要查看您的网站目前的表现，请查看HubSpot的网站评分工具．

响应性网页设计与孤立的移动网页

创建移动网站有两种主要方法：响应式设计和移动模板。响应式设计要求您只有一个网站，该网站的编码可以适应所有屏幕大小，而不管该网站显示在哪个设备上。

相反，手机模板是一个完全独立的实体，需要你有第二个，仅手机网站或子域名。移动模板也针对每个特定的网站而不是针对屏幕大小。

对于Facebook和Twitter等大型应用程序，纯移动网站可能是一个很好的解决方案，但对于大多数企业来说，响应式网站更具成本效益，更易于开发和维护。

不像独立的移动网站，你为移动设备创建一个完整的独立版本的网站，响应式设计通过使用流动的，基于比例的网格调整布局以适应任何屏幕尺寸。响应式网站为所有设备提供相同的HTML，并使用CSS媒体查询来改变你的网站在每个设备上的外观。

随着通过手机浏览网页的人数不断攀升，响应式设计将使你作为营销人员的生活更容易，你的网站更有效。从长远来看，一个对移动设备友好的网站将为你节省成本，提供良好的用户体验，并在所有设备上表现得更好。

响应式Web设计示例

如果你还没有使用响应性的网页设计，那么你很幸运，因为现在开始使用它很容易。

例如，在HubSpot CMS中心单是免费或购买的模板就有数百种，它们都是即时响应的。让我们来看看五个响应式网页设计的典型例子HubSpot的开发人员为了一些灵感。

1.金格这家公司是一家宠物护理软件bbob全站app1;b电竞官方下载公司，在竞争中脱颖而出。

SmartBug媒体为专注于宠物的SaaS公司Gingr设计了一个新网站，该网站反映了该品牌有趣的声音，同时提供bob全站app丰富的用户体验和移动功能。该设计将有机形状与真实图像相平衡，传达并强化了金格独特的解决方案和专业而现代的声音。

为了增加纹理而不造成混乱，该网站整合了Gingr标志的形状，以及类似动物毛发的有机形状。通过重新组织页面元素，同时保持CTA在页面上方，该网站在不同设备上都能很好地运行。

2.该空间中每个讲座双城”新网站带来40%的收入增长。

专门从事太阳空间门廊窗户，太阳空间双城提供豪华门廊窗户的业主和承包商在明尼苏达州和西威斯康辛州。

该网站有一个功能性的用户体验，最大限度地利用了台式机、平板电脑和移动设备的可用空间。标题和正文都清晰易读，简单的设计让网站的内容不言自明。最重要的是，一旦公司更新了他们的网站设计，他bob全站app们看到了一个收入增加40%．

3.宏达服务的B2B网站重新设计。

要设计一个能很好地进行跨文化翻译的网站是很困难的。宏达的管理团队知道，吸引外国人对他们作为一家中国公司的成功至关重要，他们很高兴能与HubSpot合作，创造更多的潜在客户。bob全站app

他们设计的目的是与西方观众产生共鸣。蓝色原色和橙色强调色帮助该网站脱颖而出。此外，站点的元素易于跨设备使用。

4.能源可持续性平台Net4energy为B2C和B2B客户重新设计。

Net4energy是一个多方面的平台，将想要了解更多关于能源可持续性概念的用户与产品和服务的提供者联系在一起。Net4energy的目标是用指南、电子书和有帮助的内容来激励和教育用户。

凭借其反应灵敏的设计，Net4energy能够向观众提供其内容，无论他们是在办公室还是外出。此示例运行良好，因为页眉副本和CTA的大小调整为在每个设备上占用适当的空间，而不会降低站点的可读性或可用性。

5.ACYP创建模块化的网站设计。

ACYP(儿童和年轻人的倡导者)希望为他们的网站创造一个全新的外观，并能够继续管理它。这需要使用hubspot的可拖动模块CMS功能构建页面模板和模块。

该网站使用了多种模块，可根据正在观看的设备自动调整其宽度和高度。图像调整大小以占据适当的空间，以便即使在移动设备上也能立即看到标题和正文副本。

要了解更多关于如何创建一个高效的网站来增加流量和线索，请查看HubSpot学院的免费网站优化课程．