弹性网页设计

tip

书评：虽然译作《弹性网页设计》，但这是一本关于网页设计历史的书籍，它揭示了弹性网页设计如何逐步演变并淘汰了那些缺乏正确设计思想的方案。

warning

这本书是关于网页设计历史的，它可能对一些读者感到枯燥，特别是对于对网页设计历史不感兴趣的读者。

info

作者：Jeremy Keith
👉阅读地址

书籍摘要

基础

人类文明史是一部日积月累的历史,每一代人都建立在他们祖先的工作之上。

• 钟面上的指针沿顺时针方向移动，只是因为这是北半球日晷投射的阴影在一天中移动的方向。如果历史的结果有所不同，随着南半球文明的崛起，那么我们今天时钟上的指针就会朝相反的方向移动。

• 至于为什么那些时钟以24小时为单位来计时，每个小时有60分钟，每分钟有60秒，这要归功于古老的苏美尔文明。他们偶然发现使用数字 60 作为计数和商业的基础。它是可以被前六个数字整除的最小数字。

• 有时您仍然会看到用户界面显示光盘或黑胶唱片的图标来代表音乐。

• 相同的界面可能会使用 3.5 英寸软盘的图像来表示保存数据的概念。软盘尺寸之所以为 3.5 英寸，是因为软盘的设计适合放入衬衫口袋。软件界面中的图标向我们低声诉说着服装和时尚史上的故事。

info

万维网的历史也是建立在许多基础之上的。这些基础包括欧洲核子研究中心对管理信息的需求、互联网的发展。

为了展示网络的强大功能和互操作性，需要一个跨平台浏览器；任何人都可以安装和使用的软件，无论他们使用什么操作系统。构建该浏览器的任务落到了欧洲核子研究组织(CERN)的一名本科生尼古拉·佩洛( Nicola Pellow)身上。她创建了线路模式浏览器。它很简单但功能强大。它没有与万维网浏览器相同水平的交互性，但它可以在任何机器上运行这一事实意味着现在每个人都可以访问网络。

一旦世界上出现两种网络浏览器，互操作性和向后兼容性就成为重要问题。例如，当行模式浏览器遇到它不理解的 HTML元素（例如 ）时应该做什么NEXTID？

答案可以在 Tim Berners-Lee 为其最初的名为HTML Tags的集合编写的稀疏文档中找到。在“下一个ID ”标题下，他写道：

浏览器软件可能会忽略此标签。

材料

现在考虑一下当同一个 Web 浏览器遇到它无法识别的元素时会发生什么。

浏览器不会抛出错误。此时浏览器不会停止解析HTML ，拒绝进一步解析。相反，它只是忽略标签并显示其中的内容。

这种对错误的宽容态度使得HTML的词汇量随着时间的推移从最初的 21 个元素增长到HTML 5 中的 121 个元素。每当HTML中引入新元素时，我们都清楚旧的浏览器将如何对待它；他们将忽略标签并显示内容。

这是一个非常强大的功能。它允许浏览器以不同的速率实现新的HTML功能。我们不必等待每个浏览器都识别新元素。相反，我们可以随时开始使用新元素，并确保不支持的浏览器不会卡住它。

HTML面临着成为视觉教学语言而不是意义词汇的危险。

HTML词汇的早期增长充满了为网络浏览器提供视觉指令的新元素：BIG、SMALL、CENTER、FONT。事实上，视觉指示是这些元素存在的唯一原因——它们没有提供关于它们所包含的内容的含义的暗示。

Lie 提出了一种新的格式来描述HTML文档的表示：层叠样式表。CSS与HTML一样对错误具有宽容的态度。如果网络浏览器遇到它不理解的选择器，它只会跳过该选择器花括号之间的任何内容。如果浏览器看到它不理解的属性或值，它只会忽略该特定声明。浏览器不会抛出错误。浏览器此时不会停止解析CSS ，拒绝进一步解析。

仅仅因为一种语言优雅且设计良好并不意味着人们会使用它。CSS比HTML出现得晚。设计师并没有在接下来的几年里耐心等待一种在网络上设计文档样式的方法。他们利用了他们可以利用的东西。

• 一种技术涉及使用透明GIF，大小仅为一像素一像素。如果将其作为元素插入到页面中IMG，但在其WIDTH和HEIGHT属性中给出精确的值，则设计人员可以控制设计中的空白量。

• 另一种技术使用了该TABLE元素。该元素及其子元素TR和TD旨在描述表格数据。但是，通过将正确的值应用于表格单元格的宽度和高度，它可以用于重新创建几乎任何所需的布局。

• 这些都是黑客行为；巧妙解决棘手问题。但他们带来了不幸的后果。设计者将HTML视为内容外观的工具，而不是描述内容含义的语言。

网页设计师不使用CSS 的原因之一是缺乏浏览器支持。

• 当时有两大浏览器在争夺网络的灵魂：Microsoft Internet Explorer 和 Netscape Navigator。它们在设计上是不兼容的。一个浏览器会发明一种新的HTML元素或属性。其他浏览器会发明自己的单独元素或属性来执行完全相同的操作。

随着 Mac 版 Internet Explorer 5 的推出，这种趋势开始发生转变，该浏览器提供了令人印象深刻的CSS支持。如果这就是网页设计的未来，那么生活将会变得更加富有成效和创造性。

• 也许CSS威力的最佳展示是由Dave Shea创建的名为CSS Zen Garden的网站。这是美丽而多样的设计的展示，所有这些设计都是通过CSS完成的。至关重要的是，HTML保持不变。

与建筑共舞

一个学科需要时间来发展自己的设计价值观。网页设计确实是一门年轻的学科。当我们慢慢开始形成自己的一套指导原则时，我们可以向其他学科寻求灵感。

多年来，建筑界已经积累了自己的一套设计价值观。这些价值观之一是物质诚实的原则。一种材料不应用作另一种材料的替代品。否则最终的结果就是骗人的。

使用TABLEs 进行布局本质上是不诚实的。该TABLE元素用于标记表格数据的结构。如果在TABLE使用FONTelements 和 spacer GIF的目的是调整外观。乍一看一切都很好，但经不起推敲。这样的网站一开始各种浏览器的实际使用进行压力测试，其外观就会崩溃。

使用CSS进行演示实际上是诚实的——这就是CSS的预期用途。它还允许HTML在实质上是诚实的。HTML可以回归到实现其真正的目的，即标记内容的含义，而不是尝试履行结构和表示这两个角色。

• 使用（或滥用）CSS仍然有可能造成严重不诚实。很长一段时间以来，没有简单的方法可以使用CSS向元素添加圆角。相反，网页设计师找到了解决该问题的方法，将背景图像放在元素上以模拟相同的最终效果。它在一定程度上发挥了作用，但就像间隔GIF黑客一样，它只是一个外观。然后border‐radius财产就到了。现在，设计师可以以一种实质上诚实的方式设计圆角。border‐radius至关重要的是，早在每个网络浏览器都支持新属性之前，设计人员就能够使用新属性了。这都要归功于CSS自由的错误处理模型。较新的浏览器将显示圆角。较旧的浏览器不会抛出错误。较旧的浏览器不会停止解析CSS并拒绝进一步解析。他们会简单地忽略他们不理解的指示并继续前进。没有伤害，没有犯规。当然，这意味着生成的网站在不同的浏览器中看起来会有所不同。有些人会看到圆角。其他人则不会。

愿景

版画与革命

20 世纪，随着瑞士风格的兴起，印花设计师的技术达到了顶峰。Josef Müller-Brockmann和Jan Tschichold等设计师的作品体现了其结构化布局和清晰的排版。他们根据前几个世纪的设计制定了网格系统和印刷比例。了解页面尺寸的比例后，设计人员可以以最大效果定位元素。页面是一种约束，而网格系统是对其施加顺序的一种方式。

当网络在 20 世纪 90 年代开始征服世界时，设计师开始从纸张转向像素。

一张纸或牛皮纸具有固定的比例，而浏览器窗口可以是任何尺寸。网页设计师无法提前知道任何特定人的浏览器窗口的大小。

设计师们已经习惯于了解他们所设计的矩形的尺寸。网络消除了这一限制。

浏览器窗口的比例只是网络上已知的未知因素之一。处理这种情况最简单的方法是使用灵活的布局单位：百分比而不是像素。相反，设计者选择假装浏览器尺寸是已知的。他们为一种特定的窗口大小创建了固定宽度的布局。

在网络发展的早期，大多数显示器的宽度都是 640 像素。网页设计师创建了 640 像素宽的布局。随着越来越多的人开始使用 800 像素宽的显示器，越来越多的设计师开始创建 800 像素宽的布局。几年后，它变成了 1024 像素。在某些时候，网页设计师决定将 960 像素这一神奇数字作为理想宽度。

就好像网页设计界正在参与一个共同的共识幻觉。他们没有承认浏览器窗口的灵活性，而是选择将一组宽度作为理想的宽度……即使这意味着每隔几年就会改变理想的宽度。

网页设计师坚持使用舒适的固定宽度布局还有另一个原因。该行业的工具鼓励采用类似纸张的方法来进行网络设计。

总是把责任归咎于他们的工具的，是一个可怜的工匠。然而，每个工匠都会受到他们选择的工具的影响。正如马歇尔·麦克卢汉的同事约翰·卡尔金所说，“我们塑造我们的工具，然后我们的工具塑造我们。”

2007 年，史蒂夫·乔布斯 (Steve Jobs)推出了一款可用于浏览万维网的移动设备。支持网络的移动设备在 iPhone 之前就已存在，但它们大多仅限于显示一种称为WML的专用移动设备友好文件格式。很少有设备可以呈现HTML。随着 iPhone 及其竞争对手的推出，手持设备开始配备现代网络浏览器，成为网络上的一等公民。这使网页设计领域陷入混乱。

构成整个行业基础的假设现在受到质疑：

• 我们如何知道人们使用的是宽桌面屏幕还是窄手持屏幕？
• 我们如何知道人们是在家里使用快速宽带连接还是使用速度较慢的移动网络进行浏览？
• 我们如何知道设备是否支持特定技术或插件？
• 移动设备的兴​​起让网页设计师面临着网络作为充满未知的灵活媒介的真实本质。

对这个新暴露的现实的最初反应涉及分割。与其重新考虑现有的桌面优化网站，不如将移动设备分流到单独的孤岛会怎样？这个移动贫民窟通常位于“真实”网站的单独子域：m.example.com 或 mobile.example.com。

这种分段方法得到了术语“移动网络”的使用，而不是更准确的术语“移动设备上体验的网络”的使用。按照他们早期共识幻觉的传统，网页设计师不仅将移动设备和桌面设备视为不同类别的设备，而且将其视为完全独立的网站。

确定哪些设备被发送到哪个子域需要根据不断扩大的已知浏览器列表检查浏览器的用户代理字符串。这是一场红皇后的比赛，只是为了了解最新情况。它不仅容易出错，而且相当随意。虽然曾经很容易将 iPhone 归类为移动设备，但随着时间的推移，这种区分变得越来越困难。随着 iPad 等平板电脑的推出，哪些设备应重定向到移动URL不再明确。也许需要一个新的子域 - t.example.com 或 tablet.example.com - 以及一个新术语，例如“平板电脑网络”。但是“电视网络”或“支持互联网的冰箱网络”呢？

如果网页设计师希望忠于同一个网络的精神，他们需要在相同的URL上向每个人提供相同的核心内容，无论他们使用什么设备。同时，他们需要能够根据可用的屏幕空间创建不同的布局。

2010 年 4 月，Ethan Marcotte站在西雅图 An Event Apart 的舞台上，这是一个网站制作者的聚会。他谈到了建筑界一个有趣的思想流派：响应式设计，即建筑物可以根据使用建筑物的人们的需求进行改变和适应的想法。他解释说，这可能是一种制作网站的方法。

当 Ethan 创造了“响应式网页设计”这个术语时，许多技术进步已经落实到位。正如我在伊森随后关于该主题的书的前言中所写：

这些技术已经存在：流体网格、灵活的图像和媒体查询。但伊森将这些技术整合在一个旗帜下，从而改变了我们对网页设计的思考方式。

Luke Wroblewski创造了“移动优先”一词来应对移动设备的崛起：

失去 80% 的屏幕空间迫使您集中注意力。您需要确保屏幕上显示的内容是对您的客户和业务最重要的功能集。根本没有空间容纳任何界面碎片或价值可疑的内容。你需要知道什么是最重要的。

移动优先不再关注移动设备本身，而是专注于对内容和​​任务进行优先级排序，而不管设备如何。它不鼓励假设。过去，网页设计师曾犯过关于桌面设备的毫无根据的假设。现在，避免对移动设备做出假设也同样重要。

语言

JavaScript 使设计人员能够在网页加载后进行更新。很快就出现了两种常见的用途：翻转和表单验证。

当有人将光标悬停在链接上时交换图像似乎不是一种全新编程语言的合理使用，但早在九十年代就没有其他方法可以创建悬停效果。

这两个用例仍然存在，但现在不需要使用 JavaScript。您可以使用CSS:hover中的伪类创建翻转效果。您可以使用HTML中的和属性来验证表单字段。HTML和CSS的宽松错误处理意味着许多创作错误或浏览器支持问题都可以得到妥善处理；浏览器只是忽略它不理解的内容并继续执行。这通常就足够了。相比之下，如果您向浏览器提供一些格式错误的 JavaScript 或尝试使用不受支持的 JavaScript 功能，浏览器不仅会抛出错误，还会在此时停止解析脚本并拒绝进一步执行。

JavaScript 最早的滥用之一（毫不奇怪）来自广告行业，该行业的存在理由往往与人们试图尽快完成任务的目标相矛盾。JavaScript 允许您创建新的浏览器窗口，这以前只能由用户完成。

最终，广告拦截功能被内置到浏览器和操作系统中，使我们能够对抗过多的 JavaScript。

XHTML 2.0 是一个不同的主张。它不仅会删除已建立的元素，例如IMG，还会实现XML严格的错误处理模型。如果XML文档中存在单个错误（未加引号的属性或缺少结束斜杠），则解析器应立即停止并拒绝呈现任何内容。XHTML 2.0 夭折了。它的理论纯粹性遭到了那些真正以制作网站为生的人们的彻底拒绝。网页设计者正确地拒绝以完全失败的格式发布，而不是尝试从错误中恢复。

2015 年，NASA将其网站重新推出为网络应用程序。如果您想阅读该机构太空探索工作的最新消息，您首先必须下载并执行 3 MB 的 JavaScript。这些内容（文本和图像）本来可以在HTML中传递，但开发人员决定使用 Ajax 来检索这些数据。在加载、解析和执行所有 JavaScript 之前，该网站的访问者只能盯着黑色背景。也许这是为了展示太空的广阔孤独的空虚。

这并不意味着网页设计师不应该使用 JavaScript。但这确实意味着当存在更简单的解决方案时，网页设计者不应该依赖JavaScript。

如果您使用 Web 技术构建某些内容，并且有人使用 Web 浏览器进行访问，您无法确定将支持多少 Web 技术。可能不会是100%。但也不太可能是 0%。有些人会使用iOS设备进行访问。其他人将使用 Android 设备访问。有些人会得到你设计的 80% 或 90%。其他人只会获得 20%、30% 或 50%。网络不是一个平台。这是一个连续体。

层数

《建筑如何学习》 中强调了英国建筑师弗兰克·达菲的一个想法：

座经过适当构思的建筑具有多层的寿命。

• 场地——建筑物的物理位置仅在地质时间尺度上发生变化。
• 结构——建筑物本身可以持续几个世纪。
• 皮肤——每隔几十年，外表面就会整容一次或涂上一层新漆。
• 服务——管道和线路需要每十年左右更新一次。
• 空间规划——墙壁和门的布局可能偶尔会改变。
• 东西——房间里家具的布置每天都会发生变化。

网页设计必须成熟并接受过去几年的发展，放弃在混乱的网络时代形成的排斥态度，实现各种设备和平台的未来，并将语义标记与表示逻辑和行为分开。

用卡尔·马克思的话来说，渐进式增强允许设计者根据每个浏览器的能力提出要求，并根据每个设备的需求提供服务。

这意味着并非每个人都会体验到相同的视觉设计。这不是一个错误。这是网络的一个功能。

脚步

在进行网络设计时，人们很容易会想到滑动、点击、单击、滚动、拖放等交互方式。但很少有人早上醒来期待着滚动和点击的一天。他们更有可能从阅读、写作、分享、购买和销售的角度进行思考。网页设计师需要透过表面的动作来发现下面更有意义的动词。

这是我在网页设计中采用的三步方法：

• 确定核心功能。
• 使用尽可能简单的技术来实现该功能。
• 提高！

假设您是新闻提供者。这就是核心功能——提供新闻。

对于大屏幕设备上的浏览器，您可以引入布局。乍一看，将布局视为增强功能似乎很奇怪，但这就是移动优先响应式设计的教训。首先考虑内容，然后使用合理的源顺序对其进行标记，然后在媒体查询中应用布局声明。

假设我们正在构建一个社交网络。使用我们工具的人们需要能够相互沟通，无论他们身在世界何处。核心功能是发送和接收消息。

至少，我们可以应用与新闻网站相同的逻辑并设计我们的服务。使用CSS，我们可以提供颜色、纹理、对比度、网页字体，以及更大屏幕的布局。但我们不能仅停留在演示上。让我们也改善互动。我们可以使用Ajax拦截表单提交并将数据发送到服务器——我喜欢用Hijax这个词来描述这种Ajax拦截。如果服务器有响应，我们还可以更新当前页面的部分内容，而不是刷新整个页面。这也是介绍一些合适的动画的好时机。并非每个浏览器都支持此高级功能。没关系。核心功能——发送和接收消息——仍然可供所有人使用。

挑战

当伊森·马科特（Ethan Marcotte）展示响应式设计的力量时，遇到了阻力。“当然，响应式设计可能适用于简单的个人网站，但它无法扩展到大型复杂项目。”

然后《波士顿环球报》推出了响应式网站。微软将他们的主页设为响应式。闸门再次打开。

今天也是类似的故事。“当然，渐进式增强可能适用于简单的个人网站，但它不可能扩展到大型复杂项目。”

闸门已准备好打开。我们只需要您创建弹性网页设计的典范。

行为改变很难。即使您确信弹性网页设计方法的好处，您可能会发现自己很难说服您的同事、老板或客户。从来都是这样。从网络标准和响应式设计的历史中获得安慰。这些方法最终被最初抵制的人们所采用。

展示渐进增强的好处可能很棘手。由于回报发生在意想不到的情况下，分层方法很难推销。大多数人甚至永远不会知道站点是否是以弹性方式构建的。这是一个隐藏的质量标志，在具有快速网络连接的新设备上使用现代浏览器的人们不会注意到。

出于同样的原因，您可以开始实施这种分层方法，而无需说服您的同事、老板或客户。如果他们不关心，那么他们也不会注意到。正如格蕾丝·霍珀也说过的那样，“请求宽恕比获得许可更容易。”

意见分歧常常归结为优先事项不匹配。从本质上讲，渐进增强方法优先考虑人们的需求，无论他们的技术如何。另一方面，工具、框架和代码库通常是为了优先考虑设计人员和开发人员的需求而构建的。这并不是一件坏事。开发人员的便利非常有价值。但就我个人而言，我认为用户的需求应该胜过开发人员的便利。

我希望我能预测未来。我唯一可以确定的是事情将会发生变化。

我不知道人们会在网络上使用什么样的设备。我不知道人们会在网络上使用什么样的软件。

未来就像网络一样，是未知的。