zurb Foundation 4 移动与桌面内容

Question

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

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

我正在开发一个时间输入应用程序，它根据设备类型具有不同的用户体验。台式机（全屏时）具有更详细的数据输入体验，而移动/平板电脑具有不同的体验，因为设备空间更小。我正在开发应用程序，因此当桌面浏览器的大小调整为小于 768 像素宽时，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。

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

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

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

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

Answer 2

我正在开发应用程序，因此当桌面浏览器的大小调整为小于 768 像素宽时，jQuery 会调用服务器以将 UI 换成“更小”的移动/平板电脑版本。这样合适吗？

您是否将orientationChange 考虑在内，这听起来不是一个好方法？

我当然不想下载 2 个版本的应用程序并根据设备宽度隐藏其中一个版本。

如果您在大多数平板电脑上以纵向访问网站并更改为横向，则必须在下载 768px UI。

zb4 中的移动优先方法（带有媒体查询）允许您防止将属于大型设备的内容下载到小型设备中。基本上你从移动样式开始，如果设备满足你在媒体查询上设置的条件（你可以有比 zf4 框架默认给你更多的断点），那么下一个规则就会进入。

即使在媒体查询前的日子里，我也曾在几个“响应式”项目中工作过，我使用 javascript 来测量窗口大小

关于 javascript 和 @powjames3 说 zepto 比 jquery 更轻/更快，如果你可以编写自己的 javacript 函数将比使用过度膨胀的库好得多。

现在我做 mobileFirst 响应式 webapps 和网站使用混合用户代理嗅探（有时决定交付什么图像 src 或脚本/样式 src），尽管用户代理测试的决定我总是服务于移动优先媒体查询，并且有条件地加载内容。

“正如 Ethan Marcote（和他之前的 John Allsopp）指出的那样，Web 固有的灵活性是一项功能，而不是错误。”

这里有一些资源可能会让你走上正轨：

用户代理解析检测：http://mobiledetect.net/

教程http://www.html5rocks.com/en/mobile/responsivedesign/ 涵盖：

• 为什么我们需要创建移动优先、响应迅速、自适应的体验
• 如何为自适应网站构建 HTML 以优化性能并 - 优先考虑灵活性
• 如何编写首先定义共享样式、使用媒体查询为大屏幕构建样式以及使用相对单位的 CSS
• 如何编写不显眼的 Javascript 以有条件地加载内容片段，利用触摸事件和地理位置
• 我们可以做些什么来进一步增强我们的自适应体验

希望对你有帮助