为什么你需要一个响应式网页设计以及如何做[+例子]

本文的见解来自于HubSpot学院的免费网站优化课程。以全部课程，详细了解响应式设计以及如何优化您的网站的性能。

在全世界范围内,超过50%所有的互联网活动都是通过移动设备完成的。台式机紧随其后45%多在整个互联网活动中，平板电脑占据了其余部分。

如今，有如此多的人通过手机上网，提供一个优秀的手机网站体验至关重要。没有它，你就不能迎合大多数的互联网用户，并可能因此而错过流量和业务线索。

那么，你如何建立一个有效的移动体验？这就是响应式设计的用武之地。

简单地说，响应式网页设计是一种在所有设备上以优化形式出现的网页设计方法。

换句话说，响应式设计将自动为所有屏幕大小重新格式化你的网站。这使得你的网站访问者可以轻松地浏览和与你的网站互动，不管他们使用什么设备。

在这里，让我们探索响应式设计是如何工作的，并看看一些例子，以激发你自己的响应式网页设计在2020年。

如何响应的设计工作？

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

有很多响应式网站设计的最佳实践跟随：

1. 按钮：一个人的手指比在电脑屏幕上的指针大得多。按钮和超链接至少应为48个像素宽，48个像素高，以确保所有用户都可以点击它们。
2. SVGs：可缩放矢量图形文件中矢量来定义图像的形状，这意味着它们可以无限扩展不失品质的图像质量。
3. 响应图片:不是所有的图片都是svg。对于这些，您需要使用CSS规则来自动调整图像的尺寸，以适应用户的屏幕大小。
4. 字体：请确保您的字体是在所有设备上清晰可辨。至少，谷歌建议使用16个CSS像素的基本字体大小。
5. 设备的功能虽然潜在客户和客户不能通过他们的电脑给你打电话，但他们肯定可以通过他们的智能手机。考虑改变你的“现在就聊!”CTA呼叫“立即呼叫!”，并附上你的工作电话号码来代替电子邮件。
6. 测试：与往常一样，考验你的反应网站在不同的设备和浏览器。要看到你的网站是如何当前正在执行，检查出HubSpot的网站平地机工具。

响应式网页设计vs.孤立的移动网页

有两种主要的方法来创建移动网站:响应式设计和移动模板。响应式设计要求你只有一个网站，它被编码以适应所有屏幕大小，不管网站显示在什么设备上。

相比之下，移动模板是需要你有第二次，仅移动网站或子域名完全独立的个体。移动模板也专为每个特定的网站，而不是每个屏幕尺寸。

只有移动网站可以为Facebook和Twitter等更大的应用程序提供巨大的解决方案，但对于大多数企业而言，响应网站更具成本效益，更易于开发和维护。

不像孤立移动网站，在那里你为移动设备创建一个网站的整体单独的版本，响应式设计采用流体，基于比例的电网适应的布局任何屏幕尺寸。响应网站提供相同的HTML到所有设备和使用CSS媒体查询来改变你的网站应该如何看每个设备上。

随着人们上网从自己的手机网站的数量不断攀升，一个负责任的设计会让你的生活，作为一个营销更容易和你的网站更有效。移动友好的网站将节省您的钱从长远来看，提供出色的用户体验，并在所有设备上更好地履行。

自适应网页设计实例

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

例如，上HubSpot的CMS中心独自一人，有数以百计的模板，可免费或购买的是盒子的所有响应右出。让我们来看看在行动从响应式网站设计5点显着的例子HubSpot开发商对于一些灵感。

1。Gingr，宠物护理软件公司，一枝独雷竞技苹果下载官方版秀的竞争。raybet电子竞技

Smartbug Media为专注于宠物的SaaS公司Gingr设计了一个新网站，反映了该品牌有趣的声音，同时提供丰富的raybet电子竞技用户体验和移动功能。该设计平衡了有机形状与现实形象，传达和加强金格独特的解决方案和专业而现代的声音。

要添加纹理而不产生杂波，该网站集成形状的渔翁得利Gingr的标志，以及使用类似于动物毛发有机形状。通过重新组织页面元素，同时保持CTA网站功能跨越阱器件上述的倍。

2。Sunspace双城新网站驱动收入增长40％。

专业sunspace走廊的窗户，Sunspace双城提供豪华的门廊窗口，在明尼苏达州和威斯康星州西部业主和承包商。

该网站有一个功能UX，使桌面上，平板电脑和移动设备上使用最出空间。无论是标题和正文都清晰易读，而且简单的设计使网站的内容，以自己说话。最重要的是，一旦公司更新了其网站的设计，他们raybet电子竞技看到了收入增长40%。

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

设计一个跨文化的网站是很困难的。宏达的管理团队知道，作为一家总部位于中国的公司，吸引外国人对他们的成功至关重要，他们很乐意与HubSpot合作，以获得更多的线索。raybet电子竞技

他们的设计目的是为了与西方观众产生共鸣。以蓝色为主色调和橙色为主色调帮助这个网站脱颖而出。此外，该网站的元素很容易跨设备参与。

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

Net4energy是一个多边的平台，连接谁想要了解更多有关能源可持续性的概念和产品及服务供应商的用户。Net4energy旨在激励和引导带，电子书，以及实用的内容，教育用户。

凭借响应的设计，Net4Energy能够向观众提供他们的内容，无论是在办公室还是在旅途中。此示例功能良好，因为标题副本和CTA被调整大小以在每个设备上占用正确的空间，而不会降低站点的可读性或可用性。

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

ACYP（在倡导儿童和青少年）希望为自己的网站，并管理它前进的能力，一个全新的外观。这需要使用HubSpots的拖动模块CMS功能构建页面模板和模块。

该网站使用了多种模块，可以根据观看设备的不同自动调整宽度和高度。图像的大小调整，以占适当的空间，使头部和身体副本立即可见，甚至在移动上。

要了解更多关于如何创建一个高性能的网站增长的流量和线索，请HubSpot学院免费网站优化课程。