广东网页设计：断点和网站的未来

2019.08.12 mf_web

135

当iPhone于2007年问世时，已故伟大的史蒂夫·乔布斯的网络浏览器的演示给人的印象并不是那么微妙，以至于苹果对用户捏缩放和滚动作为浏览的一部分不太感到不安。经验。响应式网页设计旨在通过巧妙地应用灵活的网格，流畅的布局，当然还有媒体查询来解决这个问题。

然而，响应式网页设计已经证明在某种意外后果法则的案例研究中，其中一种不正常的意外影响是断点偏执。但即使没有媒体查询对你选择的这些断点产生的不当影响，在经过多次反思后，它们也会恍然大悟，这些可能不是我们正在寻找的机器人。

在本文中，我们将研究超出屏幕尺寸的断点，并探索使用它们在网络上创建真正的自适应体验的不同可能性和实用方法。

门限动态

某个阈值是某些事物开始或发生变化的点或水平。在物理世界的任何地方都可以找到并感受到门槛：在红绿灯处停下来，选择脱脂牛奶而不是全脂奶油，两种糖而不是三种糖，在迪士尼世界的茶杯搭车中勉强选择，等等。

阈值定义了我们，因为它们定义了行动，行动决定了结果。能够识别正确的阈值可以为您提供更好的结果，特别是当您确切知道每个阈值内需要完成的工作时。它类似于在正确的时间做正确的事情。

我们的远见是概念化 - 并且启用 - 没有任何新门槛的新门槛将为结果开辟新的行动前景。我们从中获得的自由和灵活性只会有助于实现我们对渐进式大体化的内在渴望，这将促使我们创建更好的网站，提供更好的用户体验。

今天的断点

在今天的网页设计中，我们最关注的阈值几乎完全与屏幕尺寸有关。过去几年的主要挑战是设计移动设备，并且屏幕尺寸是明显的焦点，我们的主要目的是调整网页布局以符合目标环境的特定显示特性。

在响应式Web设计中，定义这些断点的主要方法是设置媒体查询。

@media screen and (min-width: 240px) and (max-width: 320px){
   body { background: red; }}

复制

上面的标记清楚地标识了两个阈值（240像素和320像素），这两个阈值构成了触发动作的范围（在这种情况下，将背景颜色更改为红色）。它在概念上非常简单。

美杜莎查询

“当我们增强人们完成任务的能力时，我们应该注意不要不必要地限制他们能做什么。” - Jeremy Keith

事实证明，媒体查询非常严格。通常，您被迫采用不完全直观的方式使用断点，也不会与您的核心设计愿望一致。换句话说，您必须满足您的设计愿望。因此，您可能对自己的阈值有充满想象力的想象力，但更多可能的媒体查询不会让您按照您设想的方式应用它们。

媒体查询的捍卫者应该明白效率是使任何有效努力值得称赞的原因。花费几分钟甚至几个小时来调整那些讨厌的指令，然后每次想要进行调整时都必须重新调整它们，这绝对不是一个递归的噩梦。基于移动设备（如智能手机，平板电脑等）的广泛分类设置断点有什么问题？！

在“ 设计断点 ”一文中，Stephen Hay建议根据设备类定义断点。在一些断言的推动下，我开始了一个小型研究项目，后来我转换成博客文章来证明这是对还是错。在我最近就媒体查询是否应针对设备类进行的调查中，大约54％的受访者表示同意。但即使你想要，也没有直观的方法来处理媒体查询。

在我看来，从网页设计师的角度来看，媒体查询的功能集是不完整的。之所以如此，是因为设计师比媒体查询目前提供的（并且可能将来会有）更多的断点有想象力和胃口。

新的断点

如前所述，我们查找和设置新阈值的能力将决定我们将新操作概念化的能力，我们可以设置触发器。通过这样做，我们可以在固有的静态和不灵活的环境中引入更多调整。

上下文网页设计中的断点

明天的网站必须不仅仅是响应性的 - 它们也必须是上下文的。这些灵活性和流动性的概念必须超越屏幕尺寸。一体适用所有网站的时代必须结束，并被适应用户需求和期望的网站所取代。

要启用此功能，我们必须概念化更多阈值，但首先我们需要找出要跟踪的参数。在Nick Finck关于“ 情境网 ” 的深刻见解中，他强调了网页设计中的四个方面：用户，任务，环境和技术。当然，这四个都是推断的宝库，但我们应该关注什么呢？

我们可以询问数百甚至数千个关于用户，他们的任务，他们的环境以及他们可以访问的技术的问题。但是，我们必须将这些问题建立在我们目前和公开的能力基础上，以获得这四个参数的数据。一些可能的问题可能是：

用户的身体能力是什么？如果用户视力受损或听力受损，我们需要添加更多可访问性功能，以增强他们的体验。
用户的一般位置在哪里？知道用户在哪里可以让我们了解他们的文化，经济状况，人口统计等。
用户所在的时间是几点？人通常是习惯的生物，可能更有可能在某个时间执行某些行为。
用户的设备是什么？手机不是平板电脑，平板电脑不是PC。不同的设备具有不同的功能，将用于不同的任务。
用户对此有何吸引力？用户喜欢（和不喜欢）的内容将在帮助我们确定优先级和提供内容方面发挥重要作用。

有很多方法可以使用当今浏览器中提供的技术来回答上述问题。如果没有，那么我们真的需要更加努力地构建它们，特别是考虑到与可访问性一样重要的问题。

那么，我们如何将网站设计为上下文？我们如何在上下文意义上可视化断点？这是一个场景。

我们假设早上6点，你的闹钟就响了。在准备好出去工作之前，你蹒跚地走到厨房去吃早餐。你喜欢鸡蛋，但你打开冰箱，没有鸡蛋。所以，你决定采取其他措施，但是你想订购一些杂货，以便他们准备好在你下班回来的路上接受。您可以从连接互联网的冰箱启动一个非常大的百货连锁店的网站来完成这项工作。

你印象深刻只是因为这个网站是响应？在这一点上，获得最优惠的电子产品是您的首要任务吗？你是否真的想要提醒一下，你最近在网站上看过的几件物品是Lincoln Logs和蜘蛛侠牙刷架？我的意思是，现在是早上6:18，你正在从冰箱里浏览。火箭科学家是否需要弄清楚可能杂货项目应该是一个值得优先考虑的类别？！

我确信还有很多其他类似的情况，对于不熟悉网络技术的人来说，很容易对网站似乎仍未达到他们的期望感到沮丧。但对于我们这些人，我们是否应该找借口，还是我们应该试图进一步推动这个问题呢？

新方法

“媒体查询允许作者测试和查询用户代理或显示设备的值或功能，与正在呈现的文档无关。” - 编辑草案，W3C（2014年6月3日）

我最近在阅读“Media Queries Level 4”草案规范，以了解事情的发展方向。我必须说，我对这个方向并不是很兴奋，而且这里的创新似乎并不多。

从文档的摘要中，我们可以清楚地定义媒体查询作为一种方法。但是，我只是无法理解为什么没有媒体功能的演变来反映当前 - 以及可能的未来 - 现实。

设备级媒体功能如何phone或有tablet什么问题？它们似乎是明显的选择，并且，根据前面提到的民意调查，网页设计师需要这个功能集。有些人认为那些可能不是未来的“事物”，但这是不可信的，因为汽车，电视，电脑，冰箱，手表和眼镜仍然是人们今天觉得有用的“东西”。我们什么时候才能真正看到元素查询问题的解决方案？

在我看来，媒体查询（作为多设备世界中的网页设计工具）根本无法与当代网页设计师的创作轨迹保持任何形式的平衡，并且它们是网络设计未来的道德标准。。也许我们应该考虑其他方法; 我想建议一些。它们并不复杂，我们所需要的只是帽子，外套和TIE。

帽子戏法

我们现在可能都熟悉CSS类选择器。它们是网页设计中最常用的选择器之一。

.muttley .do_something {…}

复制

我不明白为什么我们不使用这些类而不是媒体查询来构建适合移动设备的网站？

在我看来，如果浏览器采用HTML属性标记（HAT），那么为许多不同情况设计网站将会更加容易和快捷。基本上，这将涉及浏览器将特定参数放置class在<html>标记的属性中（在正在加载的页面的过程中），这将使Web设计者能够在其CSS标记中利用这些类。

其中一些参数可能包括以下内容：

设备组固定，移动，家庭，穿戴，汽车等
设备类。电脑，手机，平板电脑，电视，冰箱，汽车，手表等
输入设备粗，细
带宽高，中，低
定向肖像，风景
视口宽度和高度与设备无关的像素，最接近的40的倍数，带有符合字母的前缀
日期ddmmyyyy格式的本地日期和时间，以及时间的 24小时表示
时区 UTC偏移量
一般地理位置大陆和国家代码

可以根据预期需要添加更多参数。此外，所有参数都将被抽象到DOM窗口对象，以便通过JavaScript轻松访问它们。

因此，假设有人在4G LTE移动网络上使用Nexus 5手机。浏览器会将相关标签添加到页面中，让我们留下：

<html class="mobile phone coarse high portrait v360w v640h d07052014 t0900 utc_a af_ng">

复制

如果他们将手机的方向更改为横向，浏览器会有状态地更新标签，为我们提供以下信息：

<html class="mobile phone coarse high landscape v640w v360h d07052014 t0900 utc_a af_ng">

复制

如果发生这种情况，网页设计师将有很多选择，可以快速调整他们的网页跨越众多逻辑断点，从字面上思考速度。让我们考虑一个有效的例子。

我最近测试的定价表与目前很多SaaS网站上看到的表没有什么不同。该表是三列，使用ul带有浮动li标记的标记构建。

定价表下方是一些FAQ内容，也有多列布局。

02-FAQ内容-OPT-500 — 多栏常见问题解答内容。（图片来源：Restive.JS）（查看大图）

显然，这些多列元素在所有移动设备上看起来都不如在桌面上那么好。因此，本着响应式网页设计的精神，我们必须使它们适应较小屏幕的尺寸。我们这样做的方法是，只有在平板电脑上以横向方向查看网页时，才能在完整的多列荣耀中展示这两个视觉组件。

这背后的逻辑是我们希望平板电脑在这个方向上有足够的屏幕空间让整个表格按预期显示。如果不满足这些条件，那么我们将列折叠为线性和垂直。

我们的定价表的基本CSS是这样的：

ul {
   margin: 0;
   padding: 0;
   list-style: none; }ul li {
   float: left;
   width: 33%; }

复制

因此，利用HAT，我们将使用以下标记实现这些功能：

.mobile ul li {
   float: none;
   width: 100%; }.mobile.tablet.landscape ul li {
   float: left;
   width: 33%;}

复制

而已！只需为所有移动设备禁用浮动布局元素，然后以横向方式为平板电脑重新启用它们。简单的愿望，简单的解决方案。你想尝试用媒体查询做同样的事情吗？跟我博士StackOverflow问好！

显然，采用这种方法有好处。效率是一个主要的好处 ; 你花费更少的时间来构建网站，因为你不会浪费大量的时间来制作媒体查询，更不用说随之而来的移动设备的所有测试。其次，保持你的标记会更容易，因为一切都是内联的，不会有不必要的重复。第三，您将有机会探索更多用例，因为有更多参数可用作更多逻辑断点的阈值。

多种颜色的外套

每个人似乎都对分析着迷。网站分析程序，例如Google Analytics和MixPanel，都试图全面了解访问过您网站的人，访问了多长时间，他们来自哪些网站，使用了哪些设备等等。这些数据无法分辨你是访问者所关注的内容。

当然，您可以使用Cookie来跟踪您网站的访问者，但之后您只能在当天，某一周或一个月内确定他们在您网站上的内容。您将无法准确确定他们关心的具体内容，也无法在他们离开之前对此做任何事情。

跟踪内容亲和力并使内容适应所述亲和力可以真正帮助我们构建真正适应人们欲望的网站。但是，要真正获得这些数据，数据收集机制需要超越任何一个网站。也就是说，所有网站都需要以协作和透明的方式构建此亲和力配置文件。

COAT代表“ 累积和开放的亲和力标记。”它只是一种共享方法，可以理解访问者对其具有亲和力的事物，然后构建该亲和力的概要。以下是它的工作原理：

有人经常访问一堆网站。有些是新闻网站，有些是体育网站，有些是博客。每个网页都有一个COAT元标记。
浏览器（通过COAT子引擎）将读取此元标记，并以逗号分隔的格式将其值以增量方式存储在保留的，受保护且只读的localStorage变量（可以命名为任何内容）中。因此，对于我们用户访问的网站，价值可能是news:info:1,sports:soccer:2,blog:tech:3。
如果该人访问另一个与体育相关的网站，该网站将从localStorage读取（并更新）他们的亲和标签。它看到这个人适合足球，所以在主页上更优先考虑足球内容。

有了这种洞察力，我们可以调整网站的主页，以更加专业化的方式更好地满足用户的不同需求。

COAT数据将包含以下格式的单个逗号分隔字符串：

{category_1}:{sub_category_1}:{popularity_1},…,{category_n}:{sub_category_n}:{popularity_n}

复制

这里category是一种内容的广泛分类; sub_category能够进一步分类; 并且popularity是衡量访问频率的指标。因此，如果我们的用户每月访问一次科技博客30次并且每天访问体育网站的足球部分5次，那么我们最终会得到这个标签：

blog:tech:30,sports:soccer:150

复制

这只是一个例子; 分类系统将由更大的网络社区定义和维护。还将制定一些保障措施。例如，如果网站没有定义COAT元标记，那么它也无法读取。此外，如果用户在私人模式下浏览，则COAT将被禁用。

COAT不会跟踪任何个人信息。目的不是弄清楚一个人是谁以及他们可能在哪里，而是要了解他们喜欢的内容类型（以及他们喜欢的内容），以便网站能够个性化他们的浏览体验。

TIE IN

让我们面对这样一个事实：JavaScript非常棒。它对大多数网页设计师来说并不是很平易近人，但它的功能非常庞大，它是未来网站做好事的关键，即使它今天对网站功能的贡献不是问题。

HTML和CSS是构建网站的重要组合，已经有一段时间了。但是，似乎只允许HTML与JavaScript保持关系。诚然，CSS是“用于描述文档外观和格式的样式表语言。”但是，正如今天在由支持Web的设备占主导地位的世界中所做的那样，很多因素决定了网站的外观和感觉。超越了CSS的范围。

因此，需要允许CSS“与朋友”JavaScript并在执行某些任务时请求帮助。确实应该有一种方法可以直接将Javascript功能与内联CSS规则相关联。一种方法是通过超越内联表达式（TIE）。TIE将提供一种将CSS规则与JavaScript表达相关联的机制，为网站功能开辟更多惊人的机会。

我们来看一个简单的例子。假设我们在主页的侧边栏中有一个推荐组件：

网页侧边栏中的推荐组件。（图片来源：Ian Storm Taylor）（查看大图）

我们希望将这个相同的组件放入另一个页面的主要内容区域，在这里我们可以使用更多的宽度：

我们的推荐组件位于网页的页脚中。（图片来源：Ian Storm Taylor）（查看大图）

这称为模块化设计，从概念上讲，这是一个非常简单的想法。但是，我们很难在CSS中实现它（正如Ian Storm Taylor发现的那样），因为根据容器的大小，没有一种简单的方法将CSS样式应用于推荐组件。

这种情况引发了元素查询的喧嚣，最重要的需求是定义适应其容器大小的可重用模块。如果CSS本身实现了某种TIE功能，那么我们可以在CSS中编写一个简单的表达式来实现这一点：

.testimonial { … }.testimonial[expr="if @parent:width less than 200px"] { … }.testimonial[expr="if @parent:width between 200px and 500px"] { … }

复制

对于第一个规则集，我们将.testimonial照常设置样式。对于第二个规则集，表达式可能意味着，当父元素的宽度.testimonial小于或等于200个像素时，则将相应的声明应用于该DOM元素（即父元素）。对于第三个规则集也是如此，其中当父元素具有201像素到500像素的宽度时应用声明。

基本上，CSS只会提供有关做什么的指导，而JavaScript则会完成CSS不适合的繁重工作。我们不是为样式编写CSS规则集然后跳转到JavaScript来激活它们，而是通过CSS中的表达式来完成两者。因为我们正在处理相同的DOM元素，所以有一种简单直观的方式可以直接从CSS中调整样式并激活它（即DOM元素）。

任何此类TIE实施都应足够强大，以使网页设计人员能够以创造性的速度实现功能。换句话说，如果他们可以想象它，设计师应该能够实现它 - 或者接近它的东西 - 几乎是瞬间实现的。

把它放在一起

让我们考虑一个场景，展示在构建网站时三者如何组合在一起。

当你读到这篇文章时，世界杯将会开启，来自世界各地的足球迷将齐聚巴西，体验Copa Mundial的惊险刺激。让我们假设你是那些粉丝之一并且在圣保罗，带着你的智能手机和谷歌眼镜。

一个流行的在线体育目的地恰好将涵盖该活动，通常会以其世界其他地方的其他体育赛事为代价，将其网站与世界杯特色相提并论。该网站将采用前面解释的三种方法，以提供非常特殊的用户体验。

在构建了各种内容组件之后，网站的开发人员应该能够在没有太多压力的情况下做一些事情：

针对Google Glass优化网站，提供更简单，更纤薄的界面，以便于导航。此外，使用HAT的设备类参数，使颜色对比度适应一天中的时间（即在夜晚切换到深色背景上的浅色文本）。
仅当访问设备是智能手机或平板电脑且恰好位于巴西（使用HAT的位置参数）时，才能提供有关巴西不同城市（例如体育酒吧，其他观看中心等）的本地景点的更多内容。
如果用户在即将到来的比赛后六小时内访问网站，则使用赛前分析，球队和球员简介以及商品（使用HAT的时间参数与TIE结合）。
如果用户在比赛结束后12小时内访问网站，则会带有匹配要点和赛后分析。使用相同的代码库（使用HAT中的设备类参数）为智能手机和平板电脑上的匹配亮点提供不同的布局设计。
如果我们确定（通过COAT）用户比前者更喜欢前者，那么带领高尔夫球场的位置比足球更突出。但仍然在侧边栏中显示匹配高光，像素宽度较窄（使用CSS中的TIE功能以模块化方式设置）。
如果我们无法确定用户是喜欢足球还是其他运动，则默认为常规格式的内容。

正如您所看到的，如果考虑所有三种方法，那么高度个性化和精心加权的用户体验的排列和机会是丰富且易于实现的。我们不一定要全部使用它们，但如果我们愿意的话，知道它们就在那里很好。

Polyfill方式

“你不能总是得到你想要的东西。但如果你有时尝试，你可能会发现，你得到了你需要的东西。“ - 滚石乐队

网页设计社区在哪里没有填充？即使是最好的技术并不总是按预期工作，有时它在功能上也存在差距。在这些情况下，“只是冷却和填充”将是一个有效的口头禅，而过去几年确实是一个名副其实的polyfill-palooza。

到目前为止，本文中概述的所有功能仅仅是想法，并未在任何即将出现的CSS或媒体查询草案规范中指定，因此即使您愿意，也无法立即使用它们。但是，这并不意味着我们在此期间无法做些什么。

RESTIVE.JS

我之前提到我使用插件来构建一个网站。好吧，那就是Restive.JS，这是我大约一年前开发的一个jQuery插件，它包含并实现了HAT原则。使用的内置选项breakpoints，classes并命名为一个特殊的功能turbo_classes，Restive.JS填入您<html>或<body>标签类，使您可以轻松通过内联CSS网页布局适应更自然的设计元素属性值。

一旦掌握了基本想法，使用它来构建新的响应式和自适应网站就非常容易了，就像在现有网站上添加所述功能一样。我最近写了一篇关于“ 如何让任何网站响应 ” 的教程，你可以在闲暇时仔细阅读。

您还可以通过Restive.JS的文档和GitHub自述文件了解更多信息。