responsive-design - zurb Foundation 4 移动与桌面内容

Question

我是 Zurb 基金会的忠实粉丝。他们刚刚发布了 Zurb Foundation 4，它被重新设计为移动优先。考虑到移动设备、平板电脑和传统桌面体验，我对响应式设计还很陌生。我正在努力思考如何最好地为这些不同的设备管理我的网站内容。使用 Zurb Foundation 4，您可以根据小型、中型或大型设备尺寸隐藏或显示内容。因此，Zurb 的方法似乎是将所有内容放到设备上，让 CSS 决定根据设备显示哪些内容(这是响应式设计)。

我的问题是为什么我们必须将所有内容放到设备上？这似乎浪费了服务器上的处理，浪费了带宽，因为浏览器处理内容时体验变慢，其中一些内容可能永远不会显示给用户，因为他们正在使用的设备。我错过了什么吗？回到服务器并让它向客户端发送适合设备类型的内容不是更好吗？难道我们不应该关心移动用户的数据计划并且不发送不适合他们设备类型的内容吗？我在响应式设计中看到的所有示例都将桌面和移动/平板电脑的内容下载到客户端，这似乎是一种浪费。

我正在开发一个时间输入应用程序，它根据设备类型具有不同的用户体验。台式机(全屏时)具有更详细的数据输入体验，而移动/平板电脑具有不同的体验，因为设备空间更小。我正在开发应用程序，因此当桌面浏览器的大小调整为小于 768px 宽时，jQuery 会调用服务器以将 UI 换成“较小”的移动/平板电脑版本。这合适吗？我当然不想下载 2 个版本的应用程序并根据设备宽度隐藏一个或另一个。

我的 jQuery 方法是否走在正确的轨道上？我是否遗漏了有关响应式设计和需要为设备定制内容的内容？任何想法、建议和指导表示赞赏。谢谢。

Answer 1

Zurb Foundation 的 Mobile First 基本上是 Zurb 团队的理念改变，如果你想开发一个响应式网站而不是采用 Mobile First 方法，那么我建议使用 Foundation 3，它仍然可用且很棒。我正在阅读一本书，它为 Mobile First 提供了很好的宣传，这本书由 Luke Wroblewski 称为 Mobile First，他也被列为 Zurb 的顾问。

这是同一作者的一篇文章，可能很有趣:

http://www.netmagazine.com/interviews/luke-wroblewski-mobile-first

基本上:前提是您开始为移动设备进行开发和设计，这意味着基本上是 iOS 或 Android 风格的浏览器，然后添加功能。

因此，与其从桌面/平板电脑体验开始并删除基础 3 中的 .hide 类通常所做的事情，并且仍然可以在基础 4 中以这种方式实现，他们建议使用 .show 类来添加额外的内容。

使用 Compass 和 Sass Mixins 可以更进一步。关于如何执行此操作的文档并不多，但您基本上可以保持标记语义，应用 id 而不是类，并使用 mixins 将其应用于该 id。这里有一个 id 与一个类的速度遍历 dom 的优势，所以它可能是一个很好的方法。

注意:foundation 4 使用名为 Zepto 的 jQuery 替换(有一些限制)。如果你在foundation 4中确实需要它，你可以用jQuery替换Zepto，或者使用foundation 3来代替。 Zepto 更轻巧，因此非常适合移动设备。

至于通过使用 jQuery 根据浏览器的大小异步加载数据(我假设)来更快，这是一种方法。我不确定您是否会在这里大幅提高速度。有很多策略，分页，异步加载更多数据，这取决于你如何围绕这些数据安排 UX/UI。

还有许多其他问题，例如缓存资源、CDN 等，这些都是前端工程中的典型问题，可能会提供更快的加载时间。您可以查看与此相关的一个资源是 ySlow。

还有许多设计模式，例如 Canvas 幻灯片、3 行(汉堡菜单)、在滚动上加载更多数据、无状态应用程序，可以让您在移动应用程序中拥有相同的功能。如果你去无状态，在初始页面加载后，其他页面应该看起来几乎是瞬时的。

我认为这里的问题更具哲学性，您是否需要所有功能，这是我认为采用移动优先方法正在尝试解决的一件事。

要考虑的另一件事是感知的加载时间。我想我读到的是 Seductive UX(另一篇很棒的读物)，但是你可以用加载器或微调器更快地打开页面，它被认为加载得越快，即使实际上它可能加载得更慢。

最后一点，如果您打算使用 Foundation，您可能会考虑将 jQuery/Zepto 与 Modernizr 一起使用，以从 Foundation 正在使用的相同媒体查询中提取数据。这样，您就不会复制或创建与其余响应能力不一致的东西。