2020年你需要知道的7个响应式设计最佳实践

2020年，全球智能手机用户的数量是预计将达到35亿较2019年增长9.3%。

96%的美国人现在拥有某种类型的手机，其中81%是智能手机。

越来越多的人出于方便而使用手机浏览网页，而不是坐在台式机或笔记本电脑前——而且有数据可以备份。

2019年第三季度，移动设备(不包括平板电脑)创造了51.5%的全球网站流量。这是巨大的。

我们中的大多数人已经在移动优化我们的网站，但这并不一定意味着你所拥有的是满足用户的需求。

为了确保你的网站符合标准，这里有7个必须知道的响应式设计最佳实践，将帮助你确保你的网站在2020年在所有设备上提供顶级体验!

1.最小化和优先级

由于尺寸的限制，当涉及到内容和图像时，移动设备根本不能提供最大的空间。

当你想到一个桌面网站页面时，你会很自然地想要将我们需要显示的信息分成“部分”。把这些段落看作是一篇新闻文章的段落。这样你就可以很容易地分解和阅读页面的每个部分而不会混淆。

以Slack为例，我概述了他们主页的不同部分，以说明这是什么样子。

这些部分确实可以让内容在桌面上很好地呼吸，但在移动设备上，你需要确保这些部分以一种不会过度增加页面长度的方式重新组织。

在一些情况下，你有一个挨着另一个小的部分，比如下面Wistia的主页，你可以移动四个堆叠在一起的块。

来源:Wista

这种技术适用于交互性较差或像这样的详细部分。但如果这个部分有15个方块，或者只有当你悬停时才会发生特定的交互，那该怎么办?

如果你试着像之前的例子那样缩小它，页面会明显变长，那些“悬停”效果将不再起作用(因为你不再使用鼠标在手机上导航)。

正是这样的情况促使人们以移动优先的心态访问他们的网站。这意味着你把你的首先是移动用户的需求．

你不是在创建一个桌面网站，并删除那些让网站在移动平台上变得不那么直观的功能。你首先要制定最佳手机体验的策略，然后将其调整到桌面布局中，这样你就可以明确自己是否想要增强体验，因为你在空间上有优势。

虽然这是一个理想的场景，但您可能不适合做一个完整的网站重新设计，并遵循这种方法。与此同时，你应该通过优化桌面到手机的体验来提供最好的体验。

回顾一些你最重要或表现最好的页面——这可能是你的主页，服务页面，或产品页面。然后，比较它们在移动和台式机上的性能(使用工具谷歌分析）;查看页面上的时间、滚动和点击的热图、转化率等。这将有助于为它们当前的表现提供一些基准数据。

然后，花一些时间回顾你选择的页面，尝试回答是或否，以帮助评估是否需要一点TLC:

• 某些部分占用的空间是桌面的四倍多吗?
• 某些交互在移动设备上是否不如在台式机上有效?
• 手机上的字体大小是否难以阅读?你发现自己眯着眼了吗?
• 根据你的热图，与桌面相比，用户滚动的距离是相同或相似的吗?
• 用户是否会被困在某个地方，导致他们在页面上的时间显著减少?

一旦你确定了问题所在，你就可以开始提出解决方案了。你应该隐藏某些部分吗?段落是否需要缩短以更好地适应移动屏幕?你是否有其他方法来安排不同的区域，使它们仍然能够实现相同的目标?

为了找到具体的解决方案，你需要和你的设计师一起深入研究这些问题，以帮助你找到正确的方法来改进你的网站的移动布局。

一旦你制定了你需要做的事情的策略，你就可以在你网站的一些最受欢迎的部分开发这些解决方案。这让你有机会测试他们是否改进了你的参数。

一旦您觉得有了足够的数据，您就可以在站点的尽可能多的区域中实现这些解决方案。

谁做得好:ESPN

自ESPN是一个体育新闻网站，网站主页上有大量的信息可以提供。

在台式机网站上，有这种修饰的空间，但在手机网站上，就没有那么多了。

在移动(右边，上面)，您会注意到中间的桌面部分是您首先看到的东西。主标题下面的四个视频现在是滑块的一部分，而不是堆叠在一起。

那些在左边栏的指向网站其他部分的“快速链接”不再可见。他们选择合并某些部分，使页面更短。

向下滚动时，您会注意到它们开始根据用户可能想要的内容，以更具体的顺序排列信息。例如，他们会在视频下方插入热门新闻列表，而不是直接进入大块的特色文章。

像这样的策略将帮助你战略性地组织你的移动层次结构，从而让你首先给你的用户最有价值的信息。

2.让你的漏斗底部的行动呼吁(CTA)容易找到

你的商业网站很可能有一个你希望用户完成的主要行动号召。也许是购买一款软件，安排一次咨询，或者注册你的应用。

为了促使人们完成这一目标，你可能会在你的导航栏和整个网站，尤其是桌面网站上，设置一个主要的行动号召。

如果你在跟踪你的cta，你可能会注意到导航按钮是人们进入门户页面并进行转换的主要方式之一。所以，在任何时候都有这个按钮是非常重要的。

人们忽视的一个机会是确保他们的主要CTA清晰且易于在手机上找到。让我们来看看Brightedge为例。

Brightedge有一个非常棒的网站，非常清楚地阐明了他们的产品的功能和它为用户提供的价值。然而，在手机上仔细检查他们的网站时，注意到他们的大型“请求演示”CTA已经不在导航中了。

我建议你在手机上删除导航CTA时要小心。这样做自然会让你的移动访问者更难找到那个页面。

我建议在移动平台上保持一致性，并为其腾出空间。如果你确实不能，那么你至少应该尝试把按钮进入汉堡包导航，让它在屏幕上尽可能可见，而不需要滚动。

这样，按钮仍然是你网站的一个经常访问的区域。

谁做得好:Salesforce

Salesforce在所有设备的导航栏中保持“免费试用”按钮，但只改变其位置和颜色。

他们在屏幕底部还有两个额外的cta来呼叫他们或与他们聊天。

但如果你是一个不需要“聊天”和“呼叫”CTA的企业，但需要一种方式来推广你的网站的主CTA(因为你不能把它放在导航区)，你可以实现一个类似的底部栏布局，取而代之的是主CTA。

我还得为Salesforce与CTA的互动加分。与将访问者带到带有表单的单独页面不同(在桌面上是这样做的)，表单会从移动设备屏幕的右侧滑出，类似于hello bar，将访问者留在页面上。

这是有益的，因为用户不需要等待一个完全独立的页面加载，而在移动设备上，由于带宽或网速的原因，这是有问题的。它只是帮助用户更快地完成所需的操作。

3.使用可伸缩的矢量图形(SVGs)

svg或可伸缩矢量图形是必备的任何响应设计就是利用插图或图标。不像图像文件(JPG/PNG)， svg是无限可伸缩的。

你可以放心地知道，任何图标或图形将保持超清晰的所有经验，而不必担心分辨率或像素化。

无论网站是如何被浏览的，结果都是一致的抛光外观。

此外，svg通常具有较小的文件大小，这有助于您的站点更快地加载。没有人愿意坐在手机上看图像缓冲，因为它太大了。

(左边是SVG，右边是PNG)

需要说明的是，这种文件类型不是普通摄影的选项，它只适用于计算机生成的图形。

谁做得好:HubSpot

HubSpot的的网站几乎每一页上都有复杂的插图。

如果将它们保存为png，那么由于细节的数量、使用的颜色数量和所需的大尺寸，它们的大小很容易增加5倍。

最棒的是，不管你是在电脑上还是手机上看，这些图片看起来都很清晰。

4.规范可点击区域和按钮

在手机上，按钮和链接将由人的手指点击，而不是精确的鼠标点击——所以互动区域需要更大的区域来适应这种差异。

它们需要多大?好吧，这取决于用户，但平均而言，建议移动设备上的任何可点击元素至少是48像素高．

这意味着你需要优化按钮、表单输入、博客上的内联链接、卡片布局、导航链接等等。

您可能会发现，在内联链接(比如博客文章中的链接)上很难遵守这个规则。如果你发现你的用户很难点击链接，您可以尝试这种技术，增加它们周围的可点击区域(注意:这个解决方案确实需要开发人员的帮助)。

这将有助于确保在你的网站导航中有更少的错误，从而减少潜在的挫折，并保持浏览者参与。

谁做得好:Vidyard

Vidyard在保持重要的可点击区域足够大，这样你的拇指就不会乱翻。

在图片中，你会注意到Vidyard增加它在英雄部分的两个按钮的大小，而不是保持它们的大小相同。英雄下方的三个方块也是完全可点击的，而不是只让箭头具有可点击的不同颜色文本。

类似的有目的的元素应用在网站的大部分地方，使其易于浏览。

5.响应的图像

不同的设备有不同的图像大小需求。

桌面版可能需要1200像素宽的全分辨率图像，而移动版可能只需要400像素宽的图像。

这实际上是物理大小的三分之一，也就是文件大小的三分之一。这一点很重要。

旧的方法是加载大分辨率(1200px)的图像，然后在所有设备平台上使用相同的文件——但这些大文件会大大减慢网站的加载时间。

为了获得最佳的响应体验，最好在移动端和桌面端使用相同图像的两个不同版本。

例如，在移动设备上，我们只使用(或“调用”)我们需要的400px图像，而不是1200像素的大图像，后者在加载后会收缩到400px。

在一个页面上加上几张图片，你可以得到明显更快的加载体验，特别是当移动站点是通过手机服务而不是wifi加载的时候。

有一些很深入的文章这是如何完成的，所以你可以指定图像，你想要显示在特定的屏幕尺寸。

如果你正在使用HubSpot的网站页面来构建你的网站，那么你很幸运!HubSpot的实际上默认情况下，启用自动调整内容的图像大小．

谁做得好:Adobe

与其他示例不同，这个示例的视觉效果将更侧重于代码，因此您可以看到这个技术的示例。

下面是用来生成图像的代码Adobe的网站．您会注意到有几个' .jpg '文件被分隔在不同的行中。

这些jpg代表了两个不同屏幕尺寸的图像;你可以通过与每个' source '对象相关联的' media '标签来判断。

结果是不同大小的图像将显示在不同指定的设备尺寸。根据你的网页，你可能会发现你需要更多或更少的图像变化。

6.认为排版

考虑网站在所有平台和设备上的易读性很重要，但在移动平台上，你需要更加关注用户的易读性需求。

如果人们看不懂你的价值主张或你的内容，他们很可能就不会再逗留了。

你要确保内容易于阅读，并根据设备大小进行优化，这样访问者就不会眯着眼睛看。

这也意味着要注意你想在网站上使用的字体，以及它们在小屏幕上的易读性是好是坏。

记住要根据设备的大小平衡标题和正文字体的大小。你不希望你的字体大小完全不同，以至于读起来很尴尬和不自然。

我还写了一篇关于如何为桌面和手机找到合适的字体大小的博客文章我建议深入研究，以帮助了解更具体的字体大小规则。

谁做得好:IMPACT

我知道，我知道……把我们自己包括在这里作为一个例子有点不正统，但我们一直在测试和调整我们的字体大小，根据我们听到的访客，所以我只是忍不住!

标题在以文本为主的页面上创建了一个很好的层次结构。在博客列表页面上，最顶层的层次结构是博客标题，这样访客可以在寻找要读的内容时快速浏览它们。

内部文章的字体大小也足够大，可以容纳大量的内容，同时仍然可读。

虽然我们可以将字体大小设置为14px，以适应更多的内容，但大部分读者可能无法清晰地阅读文章。更大的字体和更大的行高也意味着你不需要费力地寻找下一行。

7.充分利用设备特性

在智能手机上，你有能力做各种各样的任务。你可以直接从浏览器打电话、发送信息和打开应用程序。

在你的网站上利用这些功能，不仅可以增强用户的移动体验，甚至还可以增加转化率和鼓励用户行动。

例如，在桌面站点上，您可以列出电话号码。在该网站的移动版本中，您可能想在按钮或可点击区域中列出电话号码，当单击时将自动提示呼叫。

这个想法也可以应用于电子邮件地址，当点击电子邮件应用程序时，会自动填充收件人，打开新邮件。

社交媒体图标也可以进行编码，当点击时，它们将在应用程序中直接打开，而不是在移动浏览器中。

所有这些都可以让访问者与你的联系和交流变得非常容易。

谁做得好，联合卫理公会之家吗

有时候，当你想要得到信息的时候，立刻打电话和某人说话感觉很好。UMH(我们的客户)认识到了这一点，并利用移动设备的特性为他们的移动站点带来了这种便利。

他们所做的就是把他们的电话号码，放在一个可点击的按钮里，然后把它放在手机导航栏的右边。

通过添加少量的简单代码，现在当它在移动设备上点击时，它会询问用户是否可以拨打那个号码。一旦被接受，设备就会自动开始呼叫。不要摆弄纸笔，也不要试图记住号码来拨号。

今天反应设计

在2020年，如果你想为你的用户拥有一个良好优化的网站，所有这些都是强制性的。你的网站有一半流量可能来自手机;我们不能通过提供不佳的手机体验来疏远他们。

通过审核你的网站，记住这些响应式设计的最佳实践，你将能够确定你的网站是否真的适合我们生活的现代，移动优先的时代，或者你是否需要做一些改变。

也许完全重新设计是为了让你的网站成为一个反应灵敏的超级明星。还不确定吗?让我们谈谈！我们很乐意帮你解决今年和以后的事情。