案例学习：优化移动Web产品的四个要点

　　世界范围内移动设备的使用数量在与日俱增。面对在跨越多个不同设备上创建良好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 inte易做图ce)的形式构建Bagcheck，在此基础之上我们创建了一个移动Web体验版的Bagcheck，接着很快就开发出了一个桌面Web体验版的Bagcheck。这样的过程很可能也影响到了我们所使用的开发方法。

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

　　资源顺序(Source Order)

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

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

　　设备屏幕拥有足够多的空白区，页面实际内容不可能被挤出屏幕之外。

　　通常需要通过一些关键的类别和动作集合来决定在网站上显示什么内容

　　当这些关键的分类和动作集合与屏幕/浏览器的边缘对齐时，访问他们的速度可能会更快一些。将网站的整体导航放在在网页顶部是很有意义的，所以标记资源顺序就成为首先得考虑的问题。

　　然而在那些有着校小屏幕并且触摸作为输入的设备，将网站的整体导航放在网页底部会更加合理一些，这是因为：

　　小屏幕设备没有足够多的空白区域，导致网页的实际内容被网站的整体导航按钮挤出屏幕之外。

　　对于小屏幕和低带宽的设备来说，相对于网站的导航功能，用户更关注的是网站内容的立即访问。

　　人类工程学的因素使得用户更容易在屏幕底部点击到他们感兴趣的目标。

　　所以对于移动设备来讲，将网站的整体导航按钮放置在网页的底部是非常合理的做法，这样做就意味着菜单标记(menu markup)在资源顺序中很可能是排在最后面的。当在不同设备上使用相同的HTML代码时，资源顺序不可能被改变。使用双重模板系统，我们在构建Bagcheck的时候就可以提供不同的标记，因此在移动设备上就会有不同的资源顺序。下图展示的是我们为移动设备和桌面设备生成的两种不同的UI界面。

　　当然你也可以使用其他解决方案，不用提供不同的HTML代码也可以达到相似的效果。Box-direction能够反转条目列表的顺序而不会影响到资源标记顺序。你也可以尝试使用display：table的方法来根据设备屏幕的实际大小重新生成内容显示和网站导航。这些方法可能会更适合你，就看你的需求了。

　　媒体(Media)

　　响应式Web设计另外一个方法是使用弹性图片(flexible images)和视频。当被设置为填充他们容器大小的格式的时候，弹性图像能够根据浏览器视图中的可用空白区来动态调整自己的大小。

　　在较大的浏览器视图中，弹性图片可以通过显示自身的原始大小来填充更多的空白区域。在较小的浏览器视图中，相同的图片可以缩放自身大小从而占用较少的空白区域。为了实现这样的效果，浏览器需要一些较大的图片，这些图片不管是在放大或者缩小的时候看起来都要有不错的效果。

　　现在的问题是，图像越大，文件的大小就越大。虽然并不是所有的Web浏览器都以他们的原始大小来显示图像，但浏览器需要下载整个图片文件，这样会很快导致低性能，除非这样做：

　　结合使用CSS Media Queries ,背景图片不显示，以及不要加载仅仅为较大浏览器视图准备的大图等方法。这种方法对于指定图片标签(image tags)的那些图片是无效的，仅仅对使用CSS图片背景的那些图片有效果，这样就限制了此方法的适用性。

　　你可以使用像响应式图片(Responsive Images)这样的解决方案，这种方法依赖Javascript语言来将HTML标记的小图片根据浏览器视图大小的增加替换成较大的图片。禁用Javascript和cookie功能的浏览器只能够显示相应的小图片。

　　尝试类似noscript tag这样的方法，来阻止不必要的图片加载。

　　使用服务器端的解决方案来检测访问你的站点的设备，并且只传递一些必要的东西。

补充：web前端 , HTML/CSS  ,