4

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

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

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

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

4

2 回答 2

5

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 正在使用的相同媒体查询中提取。这样，您就不会复制或创建与其余响应能力不一致的东西。

于 2013-03-04T00:12:44.517 回答
3

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

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

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

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

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

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

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

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

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

以下是一些可能使您走上正轨的资源：

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

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

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

希望能帮助到你

于 2013-03-07T04:11:34.143 回答