zurb foundation 4手机与桌面内容

Question

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

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

我正在开发一个基于设备类型具有不同用户体验的时间输入应用程序.桌面(全屏时)具有更详细的数据输入体验,而移动/平板电脑由于设备空间较小而具有不同的体验.我正在开发应用程序,所以当桌面浏览器调整为小于768px宽的东西时,jQuery会调用服务器来替换"较小"的移动/平板电脑版本的UI.这个合适吗？我当然不想下载2个版本的应用程序,并根据设备宽度隐藏其中一个版本.

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

Answer 1

Zurb基金会的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.这里有速度遍历dom的优点,因为它可以是一个很好的方法.

注意:基础4使用名为Zepto的jQuery替换(有一些限制).如果你真的需要在基础4或者使用基础3,你可以用jQuery替换Zepto.Zepto更轻巧,因此非常适合移动设备.

至于使用jQuery根据浏览器的大小异步加载数据(我假设)更快,这是一种方法.我不确定你是否会在这里增加速度.有许多策略,分页,异步加载更多数据,这取决于您如何围绕该数据安排UX/UI.

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

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

我认为这里的问题更具哲学性,你需要所有的功能,这是我认为采用Mobile First方法试图接近的一件事.

要考虑的另一件事是感知加载时间.我想我读到的这是诱人的用户体验(另一个很棒的阅读),但你用装载机或微调器获得页面的速度越快,它被认为加载的速度就越快,即使在实际情况下它可能加载得更慢.

最后要注意的是,如果您计划使用基础,那么您可能会考虑使用jQuery/Zepto和Modernizr从基础使用的相同媒体查询中提取.这样,您就不会复制或创建与响应的其余部分不一致的内容.