zurb基金会4移动与桌面内容

Question

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

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

我正在开发具有基于设备类型不同的用户体验时的入境申请。台式机（全屏时）具有更详细的数据输入体验，而移动设备/平板电脑具有不同的体验，因为设备的房地产规模较小。我正在开发应用程序，因此当桌面浏览器被调整到768px宽的较小尺寸时，jQuery会调用服务器来更换“较小”移动/平板电脑版本的用户界面。这是否合适？我当然不想下载2个版本的应用程序，并根据设备宽度隐藏其中一个或另一个。

我在正确的轨道上我的jQuery的方法吗？我是否错过了一些关于响应式设计的知识，并且需要为设备定制内容？任何想法，建议和指导表示赞赏。谢谢。

Answer 1

我开发的应用程序，以便在桌面浏览器的尺寸调整为更小的东西是768px宽jQuery的向服务器调用换出UI的“小”手机/平板电脑的版本。这是否合适？

这听起来不像是一个好方法，你采取的方向改变为账户？

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

如果你是大多数平板电脑访问在纵向和改变网站的风景你已经下载< 768px UI后下载> 768px UI。

zb4中的移动第一种方法（带有媒体查询）使您可以防止属于大型设备的内容被下载到小型设备中。基本上你从手机样式开始，如果设备符合你在媒体查询中设置的条件（你可以有更多的断点比zf4框架默认给你的更多），那么下一个规则跳转。

我已经在几个'响应'项目，甚至在前的媒体查询日是我使用JavaScript来衡量窗口

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

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

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

这里有可能把你在正确的轨道的一些资源：

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

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

• 为什么我们需要创建移动优先，自适应的体验
• 如何为适应性网站构建HTML以优化性能和 - 优先灵活性
• 如何编写CSS，首先定义共享样式，建立起风格与媒体查询更大的屏幕，并采用相对单位
• 如何写不显眼的Javascript有条件的内容片断负荷，充分利用触摸事件和地理位置
• 我们可以做什么，以进一步提高我们的自适应体验

希望它可以帮助

Answer 2

移动先用Zurb基金会基本上是由Zurb团队理念的变化，如果你想你开发一个响应网站，而不是采取移动优先的方法，那么我建议使用基金会3依然有效和美妙。我正在阅读的一本书为Mobile First提供了一个很好的选择，Luke Wroblewski也被列为Zurb的顾问，名为Mobile First。

这里是由同一作者的文章，可能是有趣：

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

基本上是：前提是你开始你的开发和设计用于移动，基本意思是iOS或Android风格的浏览器然后添加功能。

因此，与基础3中的.hide类中通常使用的桌面/平板电脑体验和删除操作不同，它们仍然可以通过基础4以这种方式实现，因此建议使用.show类来添加其他内容。

这可以通过使用指南针和萨斯混入方式进一步作出。关于如何做到这一点，没有很多很棒的文档，但基本上可以保持标记语义，应用一个id而不是一个类，并使用mixin将其应用于该id。在速度遍历一个id与一个类的dom中有很多优点，所以它可以是一个很好的方法。

注：基础4使用替换的下降（有一些限制）jQuery的所谓的Zepto。如果你真的需要基础4或者使用基础3，你可以用jQuery代替Zepto。Zepto更轻巧，因此非常适合移动设备。

至于通过使用jQuery异步加载基于浏览器大小的数据（我假设）更快，这是实现它的一种方法。我不确定你是否会在这里获得巨大的速度提升。有很多策略，分页，异步异步加载更多数据，这取决于你如何围绕这些数据安排UX/UI。

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

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

我认为这里的问题更具哲理性，您是否需要所有的功能，这是我认为采取移动优先方法尝试处理的一件事。

另一件需要考虑的事情是感知加载时间。我想我读到的是Seductive UX（另一个很棒的阅读），但用加载器或微调器获得页面速度越快，即使实际上加载速度较慢，加载速度也越快。作为最后一点，如果您打算使用基础，您可以考虑使用jQuery/Zepto和Modernizr从基金会使用的相同媒体查询中提取。这样你就不会复制或创建与其他响应不一致的东西。