本文的见解来自于H.UBSPOT学院的免费网站优化课程。乘坐完整的课程来了解有关敏感性设计的更多信息以及如何优化您的网站的性能。

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

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

那么你如何创造有效的移动体验?这就是响应设计进来的地方。

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

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

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

您的网站有多强?使用Hubspot的免费网站GERGER等级。

响应设计如何工作?

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

有很多响应式网页设计最佳实践跟随:

  1. 按钮:一个人的手指比计算机屏幕上的指针大得多。按钮和超链接应至少为48像素宽,48像素高,以确保所有用户可以单击它们。
  2. SVGS.:可缩放的矢量图形文件在向量方面定义图像的形状,这意味着它们可以无限扩展而不会损失质量图像质量。
  3. 响应图像:不是所有的图片都是svg。对于这些,您需要使用CSS规则来自动调整图像的尺寸,以适应用户的屏幕大小。
  4. 字体:确保您的字体符合所有设备。至少,Google建议使用16个CSS像素的基本字体大小。
  5. 设备的功能虽然潜在客户和客户不能通过他们的电脑给你打电话,但他们肯定可以通过他们的智能手机。考虑改变你的“现在就聊!”CTA呼叫“立即呼叫!”,并附上你的工作电话号码来代替电子邮件。
  6. 试验:一如既往,在不同的设备和浏览器上测试您的响应网站。要查看您的网站目前的表现,请退房HUBSPOT的网站GRADER工具

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

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

相比之下,移动模板是一个完全独立的实体,需要您拥有唯一的移动网站或子域。移动模板也是针对每个特定站点构建的,而不是每个屏幕尺寸。

对于Facebook和Twitter等大型应用程序来说,手机专用网站是很好的解决方案,但对于大多数企业来说,响应式网站成本更低,而且更容易开发和维护。

与孤立的移动网站不同,您可以在其中创建一个全单独的移动设备网站的网站,响应性设计通过使用流体,比例基网格将布局适应任何屏幕尺寸。响应网站对所有设备提供相同的HTML,并使用CSS媒体查询来改变您的网站应该如何查找每个设备。

随着从手机上网的人数继续攀升,响应式设计将使您的生活作为营销人员更轻松,您的网站更有效。移动友好的网站将在长期运行中为您节省金钱,提供伟大的用户体验,并在所有设备上执行更好。

响应式网页设计示例

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

例如,上HubSpot的CMS中心单独,有数百个模板可免费或购买,这些模板都在框中响应。让我们来看看有关响应网页设计的五个显着的例子HUBSPOT开发人员对于一些灵感。

1。Gingr是一家宠物护理软件公司,竞雷竞技苹果下载官方版争中断。raybet电子竞技

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

为了在不创建杂乱的情况下添加纹理,该网站集成了播放GingR徽标的形状,并使用类似动物毛发的有机形状。通过重新组装页面元素,在将CTA保持在折叠的同时,该网站跨设备效果很好。

2。Sunspace双胞胎'新网站带来40%的收入增长。

Sunspace Twin Cities专门从事Sunspace Porch Windows,为明尼苏达州和威斯康星州西部的房主和承包商提供豪华门廊窗户。

该网站具有功能型UX,可在桌面,平板电脑和移动设备上提供最大的空间。标题和身体副本都清晰可辨,简单的设计允许网站的内容本身就是发言。最重要的是,一旦公司更新了他们的网站设计,他raybet电子竞技们就看到了一个收入增长40%

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

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

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

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

Net4Energy是一个多种平台,连接想要了解更多有关能源可持续性概念和产品和服务提供商的用户。Net4Energy旨在激发和教育用户的指南,电子书和有用的内容。

通过他们的响应式设计,Net4energy能够将他们的内容提供给在办公室或在路上的观众。这个例子功能很好,因为标题副本和CTA的大小被调整,以占用适当的空间在每个设备上,而不降低可读性或可用性的网站。

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

ACYP(儿童和青少年的倡导者)希望为他们的网站创造一个新的新寻找和管理它前进的能力。这需要使用集线器可拖动模块CMS功能构建页面模板和模块。

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

要了解有关如何创建高性能网站以增长流量和领导的更多信息,请退房HubSpot学院免费网站优化课程

用有效的技术搜索引擎优化改进你的网站。从进行审计开始。

用有效的技术搜索引擎优化改进你的网站。从进行审计开始。

最初发布于7月21日,2020年2:00:00,2012年7月21日更新

主题:

响应设计