世界规模内移动设备的使用数目在一日千里。面临在跨越多个分歧设备上建树精采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元素重定位则很是具有挑战性。

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

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

　　凡是需要经由过程一些关头的类别和动作集结来抉择在网站上显示什么内容

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

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

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

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

　　人类工程学的身分使得用户更轻易在屏幕底部点击到他们感乐趣的方针。

　　所以对于移动设备来讲，将网站的整体导航按钮放置在网页的底部长短常合理的做法，这样做就意味着菜单标识表记标帜(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这样的体例，来阻止不需要的图片加载。

　　使用处事器端的解决方案来检测访谒你的站点的设备，而且只传递一些需要的工具。

　　推荐阅读

　　<b>优质人脉资源匮乏瓶颈 中小网站如何突破</b>

无能否认，此刻优质人脉资本对网站成长影响越来越年夜可能一个不知名的新网站，如不美观站长熟识一些可以登高一呼，应者云集的行业内知名年夜佬，只要网站内容(处事)还行，经由过程这些年夜佬发话介绍，立马就能让自>>>详细阅读

本文标题：<b>案例学习：优化移动Web产品的四个要点</b>

地址：http://www.lgo100.com/a/22/20120326/44748.html

 1/2    1  2 下一页