响应式 Web 设计：下一步是什么？
响应式 Web 设计：下一步是什么？
我很荣幸能在 Responsive Day Out 3: The Final Breakpoint 大会上发表闭幕主题演讲。该会议于2015年6月19日在英国布莱顿举行，是设计师和开发者分享其响应式网页设计工作流程策略、技术和经验的聚会。
以下是我想说的。
今天我们对响应式设计世界进行了一次精彩的巡礼。我们看到了如何提升我们的工作流程和流程。我们学习了新的方法来改善我们产品的可访问性。我们努力应对现代 CSS 和 HTML 功能，这些功能帮助我们适应周围千变万化的显示尺寸。
我们探索了模块化代码的未来以及浏览器在没有网络连接的情况下工作的能力。我们甚至对网络的未来发展方向进行了展望。
自从 Ethan 的文章、流体网格、弹性媒体和媒体查询问世以来，我们已经取得了长足的进步。这三个原则播下了种子，随着我们对设备普及影响的更好理解，它们生根发芽，蓬勃发展。我们已经看到网络能够无处不在，几乎无所不能。
我敢说，“响应式网页设计”是第一篇真正捕捉到 John Allsopp 多年前在“网页设计之道”中讨论的概念，并将其提炼成设计和开发社区真正能够深入理解的文章。它提供了一个具体的例子，展示了网络能够根据需要进行灵活调整和塑造的能力。
这是许多设计师第一次接受“体验”不是单一事物的想法。
当然，我们这些网络标准社区的许多人一直在讨论和实践 渐进增强。我们正在争取信徒，但进展缓慢。Ethan 直接而简洁地展示了视觉设计的渐进增强会是什么样子。
为每个尝试访问我们网站的人提供相同的体验是不可能的。需要考虑的因素实在太多了。我们有屏幕尺寸、显示密度、CPU 速度、内存容量、传感器可用性、功能可用性、界面方法……（深呼吸）……操作系统类型、操作系统版本、浏览器类型、浏览器版本、已安装的插件、网络速度、网络延迟、网络拥堵、防火墙、代理、路由器，以及在技术考虑因素的旋风中我可能无法想到的其他十几个因素。
这甚至还没有考虑到我们的用户。
谈到我们需要接触的人，为了让我们的工作真正有意义，我们必须考虑读写能力水平、阅读敏锐度、领域知识水平、学习障碍和阅读障碍等认知障碍、注意力缺陷问题、环境干扰、视力障碍、听力障碍、运动障碍、他们对如何使用设备以及如何使用浏览器的理解程度、他们对常见网络惯例的熟悉程度，以及一大堆其他“人为因素”。
每个人都是不同的，每个人带着自己独特的需求来到网络。有些需求是与生俱来的，例如失明。另一些则是暂时的，例如摔断鼠标臂。还有一些则纯粹是情境性的，取决于当时使用的设备及其技术能力或限制。
试图为每个人在每种情况下考虑所有因素而设计一种单一的体验是不可能的。然而，蒂姆·伯纳斯-李爵士却对一个无处不在的网络抱有愿景。他是疯了吗？
蒂姆爵士的 网络愿景 是内容可以创建一次，并可从任何地方访问。分散但相关的“超媒体”片段散布在全球各地，可以通过链接相互连接。此外，任何能够阅读 HTML 的设备上的任何人都可以免费检索它们。
最终，蒂姆爵士设想了普遍的可访问性。
对我们中的大多数人来说，确保网站可访问性是一个事后才考虑的问题。我们口口声声说“以用户为中心”的这样那样，但往往把“可访问性”一词视为“屏幕阅读器”的同义词。它远不止于此。“可访问性”关乎人。人们以许多不同的方式消费内容和使用界面，有些方式与我们相似，有些则大相径庭。
当然，有视觉障碍的人通常使用屏幕阅读器来获取内容。但他们也可能使用盲文触觉反馈设备或盲文打印机。他们可能还会使用键盘。或者他们可能会结合音频提示使用触摸屏。甚至他们可能使用摄像头通过 OCR 和文本转语音来“阅读”内容。是的，视觉障碍影响着相当大比例的人口（尤其是随着年龄增长），但这只是“可访问性”难题的一部分。
文本与背景之间的对比度是确保内容在不同照明条件下保持可读性的重要因素。颜色选择是可访问性问题。
我们在网站和界面上使用的语言直接影响用户理解我们的工作、我们提供的产品以及其重要性的难易程度。它还影响我们让用户对自己、他们的体验和我们的公司有何感受。语言是可访问性问题。
我们网页的大小直接影响页面下载所需的时间、客户访问页面的成本，以及（有时）甚至内容是否可以访问。性能是可访问性问题。
我可以继续说下去，但我相信你已经明白了。
可访问性旨在为所有人提供良好的体验，无论其身体或精神能力、性别、种族或语言如何。它认识到我们都有特殊需求——身体限制、带宽限制、设备限制——这些可能要求我们以不同的方式体验同一个界面。
例如，当我在手机上访问一个网站时，我的视力受限于屏幕分辨率（尤其是我使用鼓励缩放的浏览器时），并且我的手与按钮和链接交互的能力也受到限制，因为我用指尖浏览，而指尖比鼠标光标更大且精确度差得多。
在触摸屏上，我可能需要略有不同的体验，但我仍然需要能够完成我访问网站的目的。我需要一种体验，更重要的是，我需要一种恰当的体验。
接受体验不必是单一事实的现实，将帮助我们以更少的麻烦触达更多人。体验可以——也应该——被构建为一个连续体。这就是渐进增强：我们从一个适用于所有人的基线体验开始——内容、真实链接、第一代表单控件以及实际提交到服务器的表单。然后，我们在此基础上构建体验。
您的浏览器支持 HTML5 表单控件？太棒了！当您输入电子邮件地址时，您将获得更好的虚拟键盘。您可以使用 CSS？很棒，让我为您改善阅读体验。哦，您可以处理媒体查询！让我调整布局，使行长更舒适一些。哇，您的浏览器支持 Ajax？！来，让我加载一些您可能会感兴趣的相关内容的预告片。
想象一下，你坐在一家餐馆里，服务员立刻给你端来一块牛排。但你是个素食主义者。你问他们有没有你能吃的东西，他们礼貌地回答说：“哦，很抱歉，肉是必需品。你为什么不吃肉呢？很容易的！你真的错过了美味的食物。”任何真正关心你体验的服务员都不会这样做。
然而，我们——作为一个行业——似乎对告诉别人他们需要改变他们的浏览器来适应我们没有任何问题。这是错误的。没有用户，我们的工作就没有意义。我们应该竭尽全力吸引和留住他们。这是客户服务的基础。
这又回到了 Postel 定律，Jeremy 经常提到：
严于律己，宽以待人。
我们对待浏览器支持需要放宽，不要对我们能发送的内容做太多（或者最好是任何）假设。
当然，这并不是我们行业中每个人都准备接受的方法，所以我会提供另一个我反复回顾的引言……
当事情发生时，你唯一能控制的就是你对它的态度；你可以接受它，也可以怨恨它。
我们无法控制世界，我们只能控制我们对世界的反应。
现在，在座参加本次“响应式日”终极版（或在家收看）的各位，可能比大多数人更理解这一点。我们感受到新设备、屏幕尺寸和功能的持续冲击。我发现应对这一切的唯一方法是接受它，拥抱多样性，并将设备和浏览器的激增视为一种特性，而不是一个错误。
我们有责任教育我们周围那些——无论是偶然还是有意——尚未接受多样性是我们的现实，并且事情只会变得更疯狂的人。把头埋在沙子里不是一个选择。
当我尝试帮助人们理解和拥抱多样性时，我经常会想到我最喜欢的一个来自 约翰·罗尔斯 的思想实验。
罗尔斯是一位哲学家，他经常与学生、教会团体等进行社会实验。
在实验中，参与者被允许创建他们理想的社会。它可以遵循任何哲学：它可以是君主制、民主制或无政府状态。它可以是资本主义或社会主义。实验中的人们可以自由掌控社会的一切方面……但随后他会增加一个转折：他们无法控制自己在该社会中担任的职位。
这个转折就是早期博弈论学家 约翰·哈萨尼 所说的“无知之幕”，而罗尔斯一次又一次地发现，参与实验的个人会倾向于创建最平等的社会。
这是有道理的：当无知之幕被揭开时，如果一个理性、自私的人发现自己可能处于同样的境地，他会如何对待老人、病人、特定性别、种族、信仰或肤色的人呢？
我们现在为特殊需求所做的事情，将在未来带来回报。看看坡道就知道了。
它们是轮椅人士无障碍设施的经典例子，同时也造福了那些没有轮椅的人：搬运行李的人、用推车运送重物的快递服务、推着孩子（或打扮好的宠物狗）的父母、骑自行车通勤的人，以及那些仅仅喜欢走缓坡而不是费力爬台阶的人。
当我们创建从 A 点到 B 点的替代路径时，人们可以选择最适合他们的方式，无论是出于选择还是必要。每个人都能实现他们的目标。
我们都有特殊需求。有些是与生俱来的。有些是后天形成的。有些是暂时的。有些与我们个人无关，而是情境性的，或纯粹取决于我们使用的硬件、我们可用的交互方式，甚至是我们访问互联网或处理数据的速度。
响应式网页设计如果不是关于可访问性，那它又是什么？是的，它的基本原则关注视觉设计，但从大局来看，它们都旨在提供最佳的阅读体验。
作为响应式设计的实践者，我们理解调整界面的好处。我们理解回退机制。我们理解如何设计在各种条件下都能正常运行的强大体验。我们每天都在拓宽产品的可访问性。
随着科技不断提供新颖的方式来消费和互动我们的网站，这些技能将使我们变得不可或缺。
我们才刚刚开始涉足——呃，动手涉足——基于动作的手势控制世界。当然，我们已经在触摸屏上使用二维手势一段时间了，但三维基于动作的控制才刚刚开始出现。
这个方向的第一次重大飞跃是 Xbox 360 (以及后来的 Windows) 上的 Kinect。通过 Kinect，我们使用身体动作与计算机互动，例如举手 (让 Kinect 注意)、向前推手以点击/轻触，以及抓住以特定方向拖动画布。
Kinect 在与计算机交互方面带来了一场重大革命，但从交互角度来看，它带来了与 Wii 控制器 和索尼 PlayStation Move 类似的挑战。像举手 (或魔杖控制器) 这样的大动作可能会让人感到疲惫。
它们也不是很准确。如果你认为触摸屏精度是个问题，那么像 Kinect 或 LEAP Motion 这样的手势带来了更大的挑战。
为了适应这种互动（目前我们无法检测到），我们需要注意点击互动控件的难易程度。我们需要确定我们的按钮和链接是否足够大，以及它们之间是否有足够的空间，以确保用户的意图能够准确地传达给浏览器。两个有助于解决此问题的规范是媒体查询级别 4 和指针事件。
在 媒体查询级别 4 中，我们能够将样式规则应用于特定的交互上下文。例如，当我们对光标有非常精确的控制时（例如使用触控笔或鼠标），或者控制不那么精确时（例如使用触摸屏或物理手势）。
@media (pointer:fine) {
/* Smaller links and buttons are ok */
}
@media (pointer:coarse) {
/* Larger links and buttons are probably a good idea */
}
查看原始mq4-pointer.css | 查看原始
当然，我们希望在尺寸和间距方面提供一个合理的默认值，作为旧版浏览器和设备的后备方案。
我们还可以确定设备是否能够悬停在某个元素上，并相应地调整界面。
@media (hover:hover) {
/* hover-related interactions are A-OK */
}
@media (hover:on-demand) {
/* hover-related interactions are potentially difficult,
maybe do something else instead */
}
@media (hover:none) {
/* No hover possible :-( */
}
查看原始mq4-hover.css | 查看原始
然而，我们仍然需要弄清楚所有这些在 Surface 平板等多模式设备上的运行效果。当用户切换输入模式时，设计会改变吗？应该改变吗？为此，规范还提供了 any-pointer 和 any-hover，允许您查询是否有任何支持的交互方法符合您的要求，但这里有规范中的一个警告：
仅因为 `any-hover` 或 `any-pointer` 指示具有这些功能的输入机制可用，就设计一个依赖悬停或精确指向的页面，可能会导致糟糕的用户体验。
这些媒体查询选项正在 Chrome、Mobile Safari 和 Microsoft Edge 中推出，因此值得一试。
指针事件 (Pointer Events) 是另一个开始受到关注的规范。它将交互泛化为一个单一事件，而不是强迫我们将体验隔离成鼠标驱动、触摸驱动、笔驱动、（叹气）力驱动等等。
我们可以非侵入式地检测指针事件的支持情况……
if ( window.PointerEvent ) {
window.addEventListener( "pointerdown", detectType, false );
}
查看原始pointer-test.js | 查看原始
……然后以相同的方式处理它们，或者根据 `pointerType` 创建分支
function detectType( event ) {
switch( event.pointerType ) {
case "mouse:
/* mouse input detected */
break;
case "pen":
/* pen/stylus input detected */
break;
case "touch:
/* touch input detected */
break;
default:
/* pointerType is empty (could not be detected) or UA-specific custom type */
}
}
}
}
查看原始pointer-event.js | 查看原始
当然，除了考虑用户在与屏幕交互时的准确性水平外，我们还需要考虑用户阅读我们内容时可能增加的距离。
为此，我一直在尝试使用视口宽度 (vw) 单位。
很长一段时间以来，我一直使用 em 作为布局的最大宽度（因此行长与字体大小成比例）。我还使用相对字体大小。以此为基础，我可以使用与最大宽度匹配的媒体查询，并将基本字体大小设置为最大宽度处的 vw 等效值。
body {
max-width: 64em;
}
@media screen and (min-width: 64em) {
body {
font-size: 1.5625vw; /* ( 1em / 64em ) * 100 */
}
}
查看原始vw-scaling.css | 查看原始
这样，整个设计在超出该尺寸时就会简单地缩放布局。
如果你不想自动开启类似功能，可以通过 JavaScript 启用其切换开关。
当你开始考虑 HoloLens 这样的设备时，事情会变得更加疯狂。不，我还没有玩过。
但能够将可调整大小的虚拟屏幕放置在任何表面上的想法，作为用户而言带来了一些有趣的可能性，作为设计师而言则带来了一些独特的挑战。当然，HoloLens 也带来了手势控制，因此考虑多种输入类型应该会让我们走得很远。
同样地，我们应该开始思考当我们仅仅通过凝视浏览时，体验可以而且应该是什么样子。凝视追踪起源于无障碍领域，作为一种为手部受限或无法使用手部的人提供界面控制的方式。传统上，凝视追踪硬件价格高达数千美元，超出了许多人的承受范围，但这种情况正在开始改变。
在过去几年中，我们设备的计算能力不断增强，而支持凝视追踪的硬件成本却大幅下降。放眼四周，你会看到凝视追踪开始进入公共领域：许多智能手机和智能手表都能识别你何时注视它们（或者至少有时能识别）。这离知道你正在看屏幕上的哪个位置只有一小步之遥。几乎所有高端智能手机现在都配备了前置摄像头，这使它们成为提供这种交互方法的完美选择。
Sesame Phone 旨在让人们无需用手即可使用智能手机。它使用面部追踪在屏幕上移动虚拟光标，让用户可以与底层操作系统以及各个应用程序进行交互。它支持点击、滑动和其他手势（通过上下文菜单），在我看来，它非常令人印象深刻。这样的技术使患有多发性硬化症、关节炎、肌肉萎缩症等疾病的人能够使用智能手机，更重要的是，能够浏览网页。
The Eye Tribe 和 Fixational 也在努力将眼球追踪技术带入智能手机和平板电脑。眼球追踪与面部追踪类似，但光标会跟随您的焦点。微手势——眨眼、眨眼等——让您能够与设备进行交互。
尽管大多数凝视追踪软件都模拟鼠标并具有可调节的灵敏度，但它作为指针设备的准确性并不理想。例如，当我使用 Sesame Phone 时，我很难控制头部的姿势，以便将光标固定住以悬停并点击按钮。我相信这会随着练习而改善，但在凝视交互中，更大、间距合理且更容易瞄准的链接和按钮无疑是天赐之物。
到目前为止，我一直专注于促进导航和内容消费的交互方法。但是填写表格呢？我告诉你，用你的脸在虚拟键盘上逐字输入电子邮件，真是糟糕透了……
幸运的是，大多数这些手势实现都与某种形式的语音识别相结合。例如，Kinect 将接受语音命令来导航和完成诸如填写表格之类的任务。Sesame Phone 也支持语音命令进行某些基本操作、口述电子邮件等。
结合语音，Kinect 和 Sesame Phone 的替代交互方式效果非常好。但语音交互也可以独立存在。
我们大多数人都熟悉 苹果的 Siri、谷歌即时 (Google Now) 和 微软的 Cortana。这些数字助手非常擅长从选定来源检索信息，并执行其他助手类任务，例如计算小费和设置提醒。然而，就与网络互动而言，它们还没有做到……。我们可以与它们互动，但它们不一定能与网页互动。
通过语义 HTML 和微格式、微数据以及 RDFa 等结构化语法公开我们网页中存储的信息，最终应该能让这些内容对这些助手可用，但我们并不知道。它们的各种制造商并没有真正给我们任何线索来如何做到这一点，而且就目前而言，它们都无法查找网页并为您朗读。为此，您需要调用屏幕阅读器。
每家公司都提供自己的屏幕阅读器。它们都能够帮助您与页面互动，包括帮助您填写表格，而无需看到页面。然而，这些技术尚未与它们各自的助手结合起来。我们很快就会看到这种情况发生。
当我们开始思考我们的网站在语音环境下将如何被体验时，我们网页的可读性变得至关重要。清晰、流畅的散文和逻辑性的源代码顺序将是绝对必要的。如果我们的页面在被阅读时毫无意义，那还有什么意义呢？
内容策略师 Steph Hay 将界面视为与用户进行对话的机会。很快，这将在字面上实现。
有趣的是，微软让我们得以一窥如何为我们的网站设计自定义语音命令，超越了操作系统通过 Cortana 原生支持的功能。换句话说，他们让我们能够教他们的助手。
在 Windows 10 中，可安装的网络应用程序可以在页面头部包含一个 语音命令定义 (VCD) 文件，以启用自定义命令。
<meta name="msapplication-cortanavcd" content="http://myapp.io/vcd.xml">
查看原始vcd.html | 查看原始
引用的 VCD 文件只是一个 XML 文件，定义了 Web 应用程序的关键字和可以发出的命令。
使用非常基本的语法，VCD 识别给定短语的可选部分以及 Cortana 应该提取的变量
<?xml version="1.0" encoding="utf-8"?>
<VoiceCommands xmlns="http://schemas.microsoft.com/voicecommands/1.2">
<CommandSet xml:lang="en-us" Name="groupPost">
<CommandPrefix>Group Post</CommandPrefix>
<Example>Group Post add note</Example>
<Command Name="addNote">
<Example>add a note {message} using group post</Example>
<ListenFor RequireAppName="BeforeOrAfterPhrase">[please] add a note [that] {noteSubject}</ListenFor>
<Feedback>adding {noteSubject} to Group Post</Feedback>
<Navigate Target="/addNote.htm"/>
</Command>
<PhraseTopic Label="noteSubject" Scenario="Dictation"></PhraseTopic>
</CommandSet>
</VoiceCommands>
查看原始vcd.xml | 查看原始
这个特定的应用程序将捕获的信息传递给 JavaScript 进行处理。没错，Cortana 也有 JavaScript API。相当酷。
但传统电脑和智能移动设备并不是我们开始看到基于语音体验的唯一场所。我们还有像 亚马逊 Echo 和 Ubi 这样的无实体语音助手，它们完全无头。
目前，它们都似乎专注于帮助您的房屋变得“更智能”——播放音乐、调节恒温器等——但想象这些设备与浏览和互动网络的能力结合起来并不难。
在不久的将来，基于语音的网络交互将完全成为可能。它们一开始可能会有点蹩脚，但会变得更好。
我将做一个有些大胆的预测：虽然触摸在许多方面革新了数字访问，但语音将更具意义。基于语音的界面将为人们提供与数字世界互动和参与的新机会。
因为我们一直在思考我们创造的体验如何跨多种设备消费，所以在语音方面，我们比其他从事网络工作的人更有优势。我们将体验视为一个连续体，从文本开始。
随着语音技术成熟，我们将在人们眼中成为专家。我们将赋能下一代网站和应用程序实现语音功能，从而改善数十亿人的生活。因为“可访问性”不是关于残疾，而是关于访问权，关于人。
当然，我们将让人们更容易查询电影时间并购买电影票观看最新的《变形金刚》烂片，但我们也将赋能全球近9亿人——其中超过60%是女性——他们是文盲。这是一个在我们的以文本为主的互联网上被 largely 忽略的人群。
我们将为贫困和弱势群体创造新的机会，让他们参与一个曾经排斥他们的世界。你可能不知道，但财富 500 强企业中 80%——想想塔吉特、沃尔玛——只接受在线或通过电脑提交的求职申请。我们将让那些电脑技能有限或阅读困难的人能够向这些公司申请工作。
我们可以帮助弥合数字鸿沟和识字差距。我们可以为人们创造机会，改善他们及其家人的生活。我们有能力在这个世界上创造出我们大多数人从未梦想过的更公平的环境。
这是一个令人难以置信的激动人心的时代，不仅对响应式设计社区，不仅对网络，而且对全世界！未来即将到来，我迫不及待地想看到你们把它变得多么精彩！
响应式日 3：最终断点 于 2015 年 6 月 19 日在英国布莱顿举行。
更多 Web 开发实践
本文是微软技术布道师关于实用 JavaScript 学习、开源项目和互操作性最佳实践的 Web 开发系列文章的一部分，包括 Microsoft Edge 浏览器和 新 EdgeHTML 渲染引擎。
我们鼓励您使用 `dev.modern.IE` 上的免费工具，在包括 Microsoft Edge（Windows 10 的默认浏览器）在内的各种浏览器和设备上进行测试。
- 扫描您的网站是否存在过时库、布局问题和可访问性问题
- 将虚拟机用于 Mac、Linux 和 Windows
- 在您自己的设备上远程测试 Microsoft Edge
- GitHub 上的编程实验室：跨浏览器测试和最佳实践
来自我们工程师和布道者的 Microsoft Edge 和 Web 平台深度技术学习
- Microsoft Edge Web Summit 2015（新浏览器、新支持的 Web 平台标准以及 JavaScript 社区特邀嘉宾的预期内容）
- 哇，我可以在 Mac 和 Linux 上测试 Edge 和 IE！ (来自 Rey Bango)
- 在不破坏网络的情况下推进 JavaScript (来自 Christian Heilmann)
- 让网页正常工作的 Edge 渲染引擎 (来自 Jacob Rossi)
- 利用 WebGL 释放 3D 渲染潜力 (来自 David Catuhe，包括 vorlon.JS 和 babylonJS 项目)
- 托管 Web 应用程序和 Web 平台创新 (来自 Kevin Hill 和 Kiril Seksenov，包括 manifold.JS 项目)
更多免费的跨平台工具和网络平台资源