2020 年响应式 Web 设计备忘清单

如今，智能手机和移动设备依旧是人们访问互联网时使用最广泛的平台，因而企业会特别注意，确保用户在使用这些设备访问自家网站时能获得无缝的体验。但并非所有网站都适合移动设备使用，这意味着如果在移动设备上访问这些网站，它们的大多数功能还是无法正常工作。这就会导致这样的状况：访问者无法充分体验到网站上的一些设计和功能，这将导致用户参与度降低和销售额的下降。

你知道吗，全世界超过 50％的搜索查询是来自移动设备的。基于这种趋势，谷歌在 2018 年引入了“移动网页速度更新”指标；需要注意的是，网站加载速度现在被视为移动搜索结果的主要排名参考因素之一。因此，如果你仍然迟迟不肯将网站转换为与移动设备兼容的版本（这也称为自适应网页设计），则很可能会导致业务不断流失。

我们先来研究一下响应式网页设计通常意味着哪些内容，然后再来讨论这份参考清单。

什么是响应式网页设计？为什么需要它？

我们使用的智能设备大小不同，形状各异。智能设备的尺寸可能像手表这样小，也可能像电视那样大。世界各地的人们都在使用各种类型的智能设备来访问我们的页面。因此，无论用户使用何种智能设备访问企业的网站，企业都应确保自家网站向用户显示正确的内容，且易于使用。

采用响应式网页设计后，企业就可以确保自己的网站在所有设备上都能显示正常，并保持完整的功能。响应式网站可以轻松地适应所有智能设备的规格，并且网页设计在任何设备上都具有同样的吸引力和功能属性。

设计响应式网站的综合参考清单

如果你在过去几年中重新设计了自己的网站，或者开发了一个全新的网站，那么你可能已经在使用响应式网站设计了。响应式网页设计已成为了一种标准，如今大多数网页设计公司都在创建响应式网站。但你的职责不仅是要确保网站适合移动设备，还可能需要经常测试你的网站，使其保持最新状态，同时还要检查它的响应能力。

如果的网站是 WordPress 类型的，那么在测试过程中可以参考下面这个清单：

在多种浏览器和设备上测试你的网站

从 Google Analytics 获取移动和 Web 流量数据。这样你就能了解访问者使用了哪些设备和移动浏览器来访问你的网站。

定期更新设备 - 浏览器组合

使用你从 Google Analytics 收集的数据将旧的设备 - 浏览器组合替换为新的、优化更好的组合。

检查重要内容是否在所有设备上可见

你必须确保自己认为最有影响力和最关键的内容在所有平台上正确可见。可以让不太重要的内容在小型移动设备上"移出视线外"。

确保网站根据内容的重要性来安排内容顺序

你必须确定内容的展示顺序，以使内容的最重要部分在小型设备上优先显示出来，而相对不那么重要的部分则排在后面。

检查网站加载速度

请注意你的网站在不同设备、浏览器和互联网接入带宽上加载所需的时间。你可能需要压缩体积较大的资源，以便用户可以在较小的设备上正确查看它们。你可以尝试使用缓存来提升网站性能。

对你的网站进行彻底的显示测试

图像、文本和控件之间应该完美对齐。确保内容不会溢出屏幕边缘。理想情况下，内容应在所有设备上都能向下滚动，并展示出专业的效果。

评估内容版式是否适合所有设备

页面字体应与现有的所有平台保持兼容。换句话说，内容应在所有设备上保持可读性。此外，样式、字体和颜色应在不同设备上保持一致。

重新评估设备字体

在评估字体在多种操作系统和设备上的适用性之后，你需要选出合适的字体。你应该在网站的样式表中定义设备的默认字体。

检查你的网站是否能流畅导航

导航元素不得与屏幕边缘重叠。使用汉堡菜单图标来提供隐藏的导航元素。访问者应该能使用滑动动作来浏览网站。

检查网站的弹出窗口

你需要检查浏览器弹出窗口和嵌入式弹出窗口是否能在不同平台上都正确响应。

检查各个交互层级

用户会使用多种输入方式（例如鼠标、键盘、手写笔甚至指尖）与设备交互。你必须检查你的控件是否能对手指的点击做出响应。

使你的网站针对小型移动设备优化

在重新设计网站的过程中，必须首先考虑针对小型移动设备的优化工作，然后再考虑兼容较大屏幕的设计选项。

你可能需要注意的是，许多因素（例如浏览器的渲染引擎和设备功能，包括 GPU、显示分辨率和图形 API 等）都会在很大程度上影响最终用户访问你的网站的体验。正因如此，你可能需要在移动设备上测试网站，这样就能提前找到不同平台上的不一致状况。

如何测试设计资产的一致性

你应该注意，自己的品牌设计是否在所有媒体平台和内容格式中都能保持一致性。例如，当我们听到“可口可乐”、“Apple”、“百事可乐”或“耐克”这些品牌名称时，我们的脑海中就能立刻浮现出它们的徽标。这就是强大、令人难忘且保持一致的设计所产生的力量。你的设计资产应该在所有平台上看起来都一样，即使在缩放或调整大小之后也是如此。你应确保图标、颜色和版式在不同平台上保持一致。测试时要小心如下元素：

字体：某些字体在放大或缩小时会显得笨拙或不均匀，并且往往会在不同浏览器之间，以及在不同设备之间产生变化。例如，macOS 系统能够以一致的方式缩放字重，而 Windows 就无法做到这一点。值得注意的是，与 Chrome 上显示的效果相比，字体在 Safari 上的外观可能会有些“暗淡”。因此在使用字体之前，必须测试它们并根据上述参数进行评估。

媒体文件：你需要确保图像的多个版本与不同的浏览器、设备分辨率和视口保持兼容。使用 Chrome 开发工具测试图像是否会对网站性能或 SEO 产生负面影响。还要在慢速网络条件下做检查。检查颜色是否能显示一致。

代码：虽然你可以使用 Bootstrap 等框架来构建网站，但必须承认的是，总会有一些功能无法正确对齐，或者可能会在调整大小时出错。这可能是由于浏览器供应商的错误，他们没有应用一种单一的机制来生成网页。

下面是一份小清单，供你在代码测试过程中参考：

• 检查某些浏览器是否支持特定的 JS、CSS 或 HTML 属性；

• 你可以考虑使用 ESLint 和 CSSLint 编写可兼容主要浏览器的 CSS 和 JavaScript；

• 你可以考虑使用 Normalize.css 来记下基础规则，收录那些在不同浏览器中显示效果都不一样的样式。整理完代码后，你需要手动找出显示差异。

你应该特别注意以下几点：

布局：检查整体布局是否可以适当地匹配不同大小的视口。

间距：元素不应相互重叠。

对齐：确保以适当的方式对齐动态元素。

高度：元素的高度通常在响应式设计中不受影响；但是，你可能仍需要定义元素相对于移动设备上视口的高度。

宽度：确保每个元素的宽度与视口保持兼容。

按条件渲染：检查是否能够根据视口大小调整元素。确保元素能轻松出现、隐藏或调整大小。

按条件滚动：确保注册按钮和输入字段不受移动屏幕上的键盘遮挡。

文本的可读性：你的字体应该能正确缩放，并且它们应该具有适当的大小和足够的清晰度，以便从多个视口轻松查看。还要消除像素渲染问题。

水平滚动：检查长链接或句子。它们可能会在小型屏幕上引入非必要的水平滚动。在各种视口和浏览器上测试文本的可读性。

响应式图像：图像应适应分配给它们的空间。使用可展开的图像。优化你的 JS 和 CSS 图像文件；根据具体需求最小化或压缩它们。

图标定位：如果你有一些图标 - 字体组合，则必须确保将其正确放置在浏览器和视口上。

用于测试响应式网页设计有效性的工具

有很多工具可以让你测试网站的响应能力，我们列出了使用最广泛的三种：

Mobile-Friendly：这是谷歌的工具，不仅支持搜索引擎优化，还可以分析网站的响应速度。你所要做的就是输入页面 URL，然后就能了解页面在移动平台上是否兼容。就是这么简单！

Am I Responsive：此工具可让你知道你的网站在常见设备上的显示方式。只需在平台上输入你网站的 URL，就会看到网站在笔记本电脑、平板电脑、手机和台式机上的显示效果。

下载地址：http://ami.responsivedesign.is/

Responsive Design Checker：如果你想在多种设备上测试网站的响应能力，这个工具非常有用。该工具与 Am I Responsive 工具有一定程度的相似性，但是前者提供了自定义屏幕分辨率选项。该工具还允许你测试页面在 Google Pixel 手机以及 Amazon Kindle 上的显示效果。

下载地址：http://responsivedesignchecker.com/

最佳响应式网页设计实例

网站响应能力是确保稳定的网站流量和增加销售可能性的关键所在。我们列出了响应式 Web 设计的三个最佳示例，这些示例可帮助你找到灵感，并采用最适合你业务的设计。

DropBox

号召用语（call-to-action）和 Dropbox hero 区域在不同的屏幕尺寸下调整得很好。Hero 区域下方有一个箭头，其仅会在大屏幕上显示。如果你正在较小的设备上查看 Dropbox，就不会看到这个箭头了。这是因为用户会自然地向下滚动来移至内容的下一部分。

Treehouse

Treehouse 的网站具有高度响应的导航菜单设计。屏幕尺寸不一样，导航菜单项也会相应地更改其尺寸。对于较小的屏幕，导航菜单项会隐藏在标题的汉堡图标按钮后面。

Dribble

该网站的设计能很好地适应用户的屏幕尺寸。屏幕尺寸越小，设计网格中的列数也越少，以确保与屏幕大小良好兼容。

所以你决定了吗？

全世界现有超过 85 亿的活跃移动设备，这意味着你的网站必须具有适合移动设备的设计，这样才能不受阻碍地获取流量。根据 ComScore 的数据，大约 80％的互联网用户在使用智能手机；而根据 SocPub 的数据，有 57％的用户表示他们不会选择那些网站对移动设备不友好的企业。

你应该注意的是，响应式 Web 设计是一个渐进的过程，需要根据最新的技术发展趋势和消费者行为的变化来定期更新。你需要在新的设备、浏览器和操作系统上测试网站的响应能力。如果你要设计一个全新的网站，则可以考虑参考响应式 WordPress 主题。

那么，你最近是否测试了网站的响应能力？你执行了哪些流程？欢迎大家分享经验。

延伸阅读

https://hackernoon.com/responsive-web-design-checklist-for-2020-k3r3zgm