响应设计的反模式

本文托管 John Ankarstrm的个人主页。 它最初于2021年4月21日出版。

这 右边的动画gif演示了我的态度 通过几个像素减少浏览器窗口的宽度。

页面的整个空间排列变化：原版 三列布局突然取代 单列布局，其中最初是小的， 首先放置左侧的无关栏。

我肯定在经常体验这种现象中并不孤单。一世 个人喜欢我的浏览器窗口合理缩小，但是 在过去十年中，网页已经开始任意决定 这意味着I＆＃39; d喜欢移动导向，更有能力的版本。 这有一个以上的大问题。

一个关于设计设计的基本概念之一 Macintosh，第一个真正的消费者面向图形用户界面， 是人类可以在空间上与计算机交互的想法。 而不是不得不记得书面命令组织 他们的文件在磁盘上，用户可以在视觉上和 - 这里移动文件 - 这里 真正的洞察 - 记住他们在太空中的位置。用户可以 记住他们在哪里放在哪里，而不担心什么 他们打电话给它，就像他们一样，请记住他们把他们的位置在哪里 钱包，他们的钥匙或那个非常重要的纸张。

这种空间方向的想法是所有用户的基础 接口设计，包括网页设计。作为用户访问您的网站 一次又一次，他们开始学习事情的地方。时间越多 他们投资于您的网站的设计，更有效地 可以使用它 - 以及他们找到的更愉快。曾经想过为什么 许多网络＆＃39;最大的丑闻已经重新设计？这是你的 回答。用户不喜欢将他们的投资扔掉 一件乏味的设计师抱怨。

这也是我对响应设计的问题。最多 响应性设计的实现有效地类似于 每次用户调整窗口大小时重新设计您的网站。这 大多数醒目的例子是水平菜单栏被转换为a 垂直菜单栏：所有用户＆＃39;菜单栏的空间记忆＆＃39; s 链接飞出窗外！你想到的那个选择？ 它实际上在这里＆＃39;

但即使用户不喜欢响应设计，它也很难 逃脱它。我们称之为响应设计的大部分 使用CSS. 媒体查询，它是告诉浏览器的条件陈述 如果满足某些条件，请激活CSS规则数组 - 例如，浏览器窗口的宽度是否高于或 低于给定数量的像素。确切的数字由 网站设计者;结果是那两个 网页设计师几乎不会选择相同的宽度。 现在，我认为我们都同意，在我们的桌面计算机上，我们 更喜欢 查看大多数网页的全宽布局。有例外 在缩小宽度版本实际上更具可用的情况下，但 那些很少见。一般来说，Web的完整版本 页面更令人愉快，更易于使用。

为了逃避Web页面的减少宽度版本，它已启动 向用户自己调整浏览器窗口的大小足够宽 适合页面。但是因为两个网页设计师几乎从未发生过 在其媒体查询中选择相同的宽度，这是不可能的 用户选择窗口宽度 除非他们，否则这一直适合所有网页的完整版本 放弃吧 并使用全屏或其他不合理的窗口。但 除了访问完整版本的网页，它是 通常在用户＆＃39;兴趣 能够立即有多个窗口可见，这需要 窗户宽度有限。

有人可能认为用户可以在窗口中调整窗口大小 在需要更广泛的窗口的网页上​​发生。毕竟，用户 甚至在响应设计之前必须这样做 因为始终是某些网页 宽度。但它不是那么简单：在非响应页面上，它是 非常清楚，如果窗口需要调整大小以适合整个页面，但 在响应页面上，有没有任何信令给用户的任何信令 嘿！整页面不适合您当前的窗口大小 - 没有 滚动条，无截止内容;最好（或者最糟糕，我猜），只是一个 汉堡菜单，或其他奇怪的移动式界面。

人们可以想象，用户可以通过禁用来解决这个问题 在其Web浏览器中媒体查询支持。如果只是这么简单！ CSUX是Web设计人员锁定全宽并不罕见 设计后面的媒体查询并提供移动版本 默认。禁用媒体查询将与所需的相反 这些页面上的东西。

更好的解决方案是找到有一些方法来拥有浏览器 向样式表和脚本报告单个用户定义的宽度 由网页服务。这已经是可取的隐私 看法。

完美的解决方案能够识别媒体查询（如果 任何），它可以启用站点的全宽版本并启用， 禁用在窗口上选择的所有其他媒体查询 宽度。潜在地，这种功能可以实现为浏览器 扩展名，使用JavaScript解析并通过所有媒体查询 在样式表中，根据需要选择性地删除它们。

我最后离开了这个部分，因为它是最重要的 部分。我写的是什么，上面写了一个简单的结论：网 设计师需要渴望长而难以如何实现 响应设计。

但是，在更高的水平，我们应该质疑宗旨 响应设计。它显然非常有用：现代网络是 从具有不同屏幕宽度的一系列设备访问，以及 响应设计是解决问题的解决方案。但也许是 响应设计的问题是它太普遍了解决方案。它 试图支持每个可想象的屏幕尺寸，但是多样性 屏幕尺寸实际上很大？它不肯定是他们的情况 已生长在少数易于定义的类别上标准化？

如果每个屏幕中的每一个，那么用户体验会更好 尺寸是单独设计的吗？然后，用户实际上可以 投资于网站的用户界面，因为它是 在相同类型的所有设备上一致。

我可以相信我＆＃39;我敢说，但也许会更好 我们回到某种形式的用户代理检测：

让Mobile = Navigator.UserAgent.match（/ Mobi /）;让iPad = Navigator.UserAgent.match（/ iPad /）;让Android = Navigator.UserAgent.match（/ Android /）; if（移动＆amp;＆amp;！ipad）这是一个电话，如果（ipad || android）这是平板电脑

上面的代码可能无法完成，但我认为它应该涵盖一个 很多地面。只需确保桌面版本是默认值 案例，因为并非所有桌面浏览器都始终如一地支持JavaScript， 虽然所有手机和平板电脑都这样做。