世界范围内移动设备的使用数量在与日俱增。面对在跨越多个不同设备上创建良好web体验的挑战，现在已经存在多种解决方案。但是对于任何一个给定的项目，这些解决方案中哪个是最合适的？为了回答这个问题，《移动优先》作者Luke以Bagcheck应用作为案例（注：Bagcheck是一家从事搜索与发现业务的创新型企业），解释了选择分别设计移动版和桌面版背后的原因，并通过对比提炼出四个优化移动Web产品的建议。全文如下：

本人是响应式Web设计（Responsive Web Design）理念的拥护者和粉丝。但经常有人这样问我：为什么我们还要为Bagcheck单独构建一个独立的移动版本，而不使用流体网格（fluid grids），弹性图片（flexible images）和媒体查询（media queries）等方法来为我们的移动用户提供一个响应式Web解决方案？

对于我们的Bagcheck站点来讲，网站性能以及网站开发速度是两个至关重要的问题。我们所做的决定中，很多都是为了使网站性能和开发速度两者都尽可能的快（毕竟我们是一家新成立的企业）。作为我们关注网站性能的一部分，我们也很注重“什么才是必须的”这样的理念。这意味着我们需要向不同设备或者用户呈现一些他们需要的东西。我们乐于做一些优化工作。使用双重模板系统（dual template system）我们就可以从以下多个方面进行优化，比如资源顺序（source order），媒体（media），URL结构以及应用程序设计。

最初我们以命令行接口（command-line interface）的形式构建Bagcheck，在此基础之上我们创建了一个移动Web体验版的Bagcheck，接着很快就开发出了一个桌面Web体验版的Bagcheck。这样的过程很可能也影响到了我们所使用的开发方法。

另外值得一提的是，虽然自己能够胜任编码工作，但我主要是一个设计师。因为我关注的焦点是设计要素，所以在这篇文章里会尽量多的包含一些技术层面的资源链接，如果你有更多的资源和实现想法，赶快发给我吧！

资源顺序（Source Order）

响应式Web设计(Responsive Web Design)最为核心的部分是,将相同的HTML代码应用到不同的设备上面来，并且根据具体设备自身的性能来动态调整（主要是通过CSS）外观显示。HTML标记有一个资源顺序，这个资源顺序通常规定Web页面如何被浏览器渲染。尽管可以使用JavaScript和CSS技术来改变HTML元素的位置布局，但想以一种可靠的方式在多种不同设备上面进行HTML元素重定位则非常具有挑战性。

就拿网站导航菜单这个简单的例子来说吧，对于那些拥有较大屏幕以及鼠标/键盘等输入的设备来说，将导航菜单放置到网页的顶部是很常见的做法，其原因有以下几个方面：

• 设备屏幕拥有足够多的空白区，页面实际内容不可能被挤出屏幕之外。
• 通常需要通过一些关键的类别和动作集合来决定在网站上显示什么内容
• 当这些