阅读模式：击败一切的按钮

作为一个年轻的书呆子，我喜欢沉浸在数字世界中，学习他人为我创建的规则的来龙去脉（有意或无意）。但随着我年龄的增长，脾气变得越来越暴躁，我发现自己在浏览这些“令人愉快的”体验时越来越没有耐心。

这种迷恋对我最终成为设计师的职业生涯很有帮助，但不幸的是，它也像是 教别人字距——一旦你学会了如何量化糟糕的用户体验，你就无法回头了。

如今，我是一个心烦意乱的脾气暴躁的人，不想把工作带回家。我只想进去，得到我需要的东西，然后出去。如果我体验到任何快乐，那对我来说就毫无意义了，因为我拥有如此轻松和无烦恼的体验，以至于它根本没有突显出来。

我发现自己一遍又一遍地使用的一个功能是 Safari 的阅读模式。我阅读了很多新闻，而且 随之而来的是很多废话。我现在几乎本能地点击那个神秘的小图标，相信我会被传送到一个我可以专注于对我来说最重要的事物的土地上：内容。

点击此按钮将我传送到一个没有新闻订阅弹窗、调查、弹出窗口、弹出式广告、自动播放视频、应用安装提示、突发新闻提醒、被动攻击性中间页和伪通知权限横幅的土地。它轻松地切断了所有不需要的东西；对于糟糕的用户界面设计来说，它就像是亚历山大大帝之于戈尔迪之结。

Firefox 也提供这种阅读模式。Edge 也是如此。我发现自己每天在我的笔记本电脑上越来越多地使用它——尤其是在阅读长篇文章时，比如这篇文章。如果看到 Chrome 本地使用它，我会非常惊讶，因为 Google 最终是广告业务。

我不会谈论如何最好地为阅读模式制作您的内容。 Mandy Michael 已经在她的文章 为 Safari 阅读模式和其他阅读应用构建网站 中介绍了这一点。她很棒，这篇文章必读。

使用可访问的 HTML 标准构建并非一项死胡同技能。远非如此。如果您一开始就花费精力以语义为目标来构建您的体验，那么您的内容将能够适应专门的阅读模式，以及未来可能出现的一切，而无需付出任何额外的努力。今天的阅读模式可能是明天的 智能浴室镜。

付出努力是一个重要的点：好的设计不是强迫某人走过您精心修剪的草坪上的钢丝绳。它也不是一个随意扔给用户的谜题盒，希望他们能够打开它来发现隐藏的宝藏。好的设计是付出艰苦的努力来适应人们访问解决已识别问题的不同方式。

对于阅读文章来说，核心问题是将我对某个问题的无知转化为理解（此处的资金模式是另一个复杂的关注点）。您在我实现此目标的路上设置的障碍越多，我就越倾向于离开并在别处获得我的理解——我唯一记得的是我在尝试访问您的内容时有多糟糕。如果最终导致该用户永远不再返回，那么广告展示的价值是什么？

但这并不是关于数字媒体策略的网站，也不是关于用户转化的网站。这是一个关于 CSS 和前端开发的网站。我们要讨论的是如何通过依靠 这个巧妙的编程语言 来阻止像我这样的人点击那个按钮，W3C 明智地给了我们这个语言。因为如果你不这样做，所有其他内容——你的新闻订阅框、你的评论、你的相关文章、你的参与——都会被切除。

包容性

您要做的第一件事是撒一张大网。您从一开始就可以主动容纳的人越多，您无意中疏远的人就越少。我们的设计选择应该不可见——我们不想说，“这是为你的”。这应该是显而易见的。我们要避免的是有人遇到一些传达“这是为其他人的”内容的情况。

这并不太难，只要你知道要注意什么。 Carie Fisher 在她的精彩文章 设计可访问内容：排版、字体样式和结构 中概述了大部分内容。

优先级

基本段落样式是所有其他字体决策的源泉。它可能是网站上最常见和最常调用的内容类型，因此重要的是要以它应得的关怀和尊重来对待它。毕竟，网络就是排版。

Heydon Pickering 在 2011 年写了一篇关于段落样式的文章，他的文章名为 完美的段落。关键是：八年后，这些建议仍然很可靠（天哪，我已经做了这么久了）。当您做出与网络平台的本质相符的设计决策时，您会更有信心，相信您正在创建持久、稳健和可访问的解决方案。

最棒的是，这可以腾出时间去做其他事情，比如 阅读关于性别偏见以及对 HTML 和 CSS 的低估。如果有什么，就为我做吧。我真的不知道我还能不能再处理 2000 行用于重新创建 position: absolute; 的 JavaScript 代码。

环境

表单

即使响应式设计在此时已经存在近十年了 (!)，我们似乎仍然忽略了 Ethan Marcotte 免费教给我们的很多智慧。他很聪明，你应该 注意他的言论。

在完全缺乏断点之后，也许我仍然在响应式设计方面遇到的最大罪魁祸首是，假设一个小视口意味着微小的字体。通常，情况正好相反。小型设备是用来佩戴或携带的，这意味着 我们在物理空间中移动它们 以获得舒适的阅读位置。这与更大的、更静止的设备（如显示器）相反，在这种设备中，我们移动身体来适应它。

舒适的阅读位置意味着不要强迫某人将手机放在距离脸部两厘米的地方。人体工程学不太可能改变，但设备会。因此，您应该 将断点名称构建为抽象的。我个人喜欢那些将可用性牢记在心的名称，比如“手腕、手掌、膝盖、桌子、墙”。它有助于 将用户的环境 牢记在心，并让您摆脱仅将某些类型的内容与某些类型设备相关联的观念。

这些源自人体工程学的设计可以在 Rachel Andrew 等人的帮助下实现，他们的 对 CSS 网格的深入探索 帮助我们理解真正的 CSS 布局系统背后的力量。然后，像 Miriam Suzanne 这样的 Sass 专家教我们如何使用 True 来编纂这些布局并将它们可靠地集成到我们更大的 Sass 系统中。

您还想避免虚假的设备嗅探方法，或者对用户的环境和能力做出粗俗的假设。只需 让我增加和减少字体大小。阅读模式允许我这样做，因此我将以一种或另一种方式到达那里。

连接

你需要考虑的另一个问题是，这种理想的段落设计是如何实际呈现给设备的。其中很大一部分涉及加载我们的字体，并确保加载过程优先考虑用户体验。

文本

文本下载速度很快，比其他类型的奇特内容快得多。浏览器会很乐意地渲染它，因为它在历史上是有效载荷中最重要的部分。这意味着阅读模式按钮将比那个让人分心的自动播放视频出现得快得多，那个视频里的人头在视窗的右下角让人头疼。

如果我们的连接速度很慢、间歇性或计量呢？顶级的 MacBooks 仍然不得不使用酒店的 Wi-Fi，就像其他所有人一样。

你想要在我们的段落字体加载时，防止页面跳动。这样可以避免糟糕的体验，比如强迫我四处滚动来重新找到我的位置，因为东西正在到位。它还有助于防止我误点击，把我从我想读的东西上带走，因为我有胆量在 比特币矿工部署 之前与页面互动（谢天谢地，像 Laura Kalbag 这样好心人可以帮助我们解决这个问题）。

点击阅读模式按钮的诱惑很大，因为当我看到页面的主要文本出现时，我知道我可以轻松可靠地避免所有这些潜在问题。

Helen V. Holmes 写了 Type is Your Right!，一篇精彩的文章，它轻松地将排版历史、功能和性能融合在一起。值得注意的是，她讨论了如何管理无形文本闪烁 (FOIT) 和无样式文本闪烁 (FOUT)，以最佳方式控制上述所有问题。作为回应，Monica Dinculescu 制作了 Font style matcher，这是一个很棒的工具，它允许你以各种方式弯曲、拉伸、挤压、压扁和折磨字体，这些方式会让你的死板的排版教授昏倒，所有这些都是为了防止布局抖动。

图片

你可以（也应该）对图片进行各种聪明的优化，以确保我们以尽可能高效的方式提供图片。但当我等待这些图片显示时，会发生什么？ 如果它们永远不出现呢？

既然你是一位负责任的、包容的网络专业人士，你已经确保为我们的图片内容 包含替代文本描述。Ire Aderinokun 教会我们，你可以 更进一步，对损坏的图片进行样式设置。现在，即使是那些不按预期工作的内容看起来也很好。这里没有脆弱的、过度复杂的 JavaScript —— 只有好的、老式的渐进增强。

你想要考虑的另一种图片类型是图标。有很多 理由不使用图标字体。再添加一个理由：图标字体在阅读模式中可能无法正常工作，因为它们是使用文本字形构建的。当阅读模式扫描页面时，它可能会将字形转换为你指定的字体。这可能会导致灾难性的体验，尤其是在使用图标传达关键功能时（例如，“按下主页按钮 (☒) 返回主菜单。”）。

为了避免这个问题，Sara Soueidan 教会我们如何 将这些图标字体转换为 SVG。但你知道吗？她不仅仅是 SVG 专家。她是一位令人难以置信的用户体验开发人员，你最好 阅读她写的文章。我个人学到了很多。

控制

为了帮助使我的阅读体验尽可能舒适，阅读模式允许我调整字体、文本和背景颜色、字体大小和行高以及每行的字数。这太棒了。我经常根据一天中的时间在浅色和深色背景之间切换。

我戴眼镜，我知道我越老，视力就越差。感谢 Jennifer Aldrich 的写作，我知道这是常态。毕竟，我们都只是暂时有能力。我可能也有一天需要像 Windows 高对比度模式 这样的东西。感谢 Amelia Bellamy-Royds，我现在知道 如何让我的内容在该模式下以最佳状态呈现。

网络是灵活的。在网络上工作意味着克服你的自我，学会放手。这意味着接受 媒介永远不会像素完美。这意味着拥抱相对单位等技术，更重要的是，拥抱像 内在网页设计 这样的理念。这由 Jen Simmons 带给我们，她是网页标准的不知疲倦的热情倡导者。

---

我很乐意阅读你的网站。我希望你和谐的排版能静静地将我带入一种流畅的状态，让我忘记我甚至还在浏览你的网站。