优化移动Web产品的四个要点

转载 2012年03月29日 10:11:50

世界范围内移动设备的使用数量在与日俱增。面对在跨越多个不同设备上创建良好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 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界面。


桌面设备上一个分类页面总共有360KB大小的图片,而相应地页面在移动设备上只有30KB大小,这确实是个非常大的差异。

但是优化图片不仅仅是文件大小的优化,你也可以为小屏幕设备精心设计一些显示图片,而不是通过缩放来适应屏幕的大小。当图片中的内容很重要的话,这样子做就显得尤其重要。


同样的系统可以用来优化视频显示。在所有设备上,我们希望通过简单的单击操作就能够完成视频回放。所以我们的桌面模板将视频文件直接嵌入到页面中,而移动模板仅仅显示一个缩略图,两者都只需要通过简单的单击操作就可以开始播放视频。在移动设备上面使用缩略图可以使得视频加载速度更快,并且能够更好地控制页面布局/像素尺寸。

URL结构(URL structure)

我们不仅仅只从资源顺序(Source order)和媒体(Media)两个方面来优化移动版本的Bagcheck。在某些情况下,独特的URL结构将会对站点性能以及小屏幕低速连接的设备的用户体验产生重大的影响。

例如,桌面版的Bagcheck在一个URL上面显示所有的内容列表,评论,更新和偏好。我们将这些部分或者模块捆绑在一个单一文件中,然后在无须刷新页面的情况下动态加载每个模块。这样做可以在桌面体验上产生一个平滑过渡,但在移动体验方面就会增加许多带宽负担。

所以移动Web版本的Bagcheck使用不同的URL结构。相同的URL加载相同的初始内容,但是每个子模块都拥有一个唯一的URL和一个独立的页面,如下图所示:


在这个模型里,

bagcheck.com/bag/7811

在移动设备和桌面设备上加载相同的内容,但是以下这些

bagcheck.com/mobile/bag/7811/updates
bagcheck.com/mobile/bag/7811/comments
bagcheck.com/mobile/bag/7811/likes

都是移动设备上才有的URL。使用这样的结构,我们通过将较大的文件分成小块就可以更进一步地优化性能。另外值得注意的是,我们将这些移动设备特有的URL设置为“nofollow”,这样搜索引擎就不会对他们进行索引。

应用程序设计(Application Design)

URL结构也可以帮助优化移动设备上的扩展交互。将更长的任务或者多步/多模块的应用程序组织在不同的页面上,可以让用户一次只处理一种交互。在较大屏幕上,通过模态对话框或者模块/面板进行的交互,通常也可以达到在较小屏幕上使用独立页面的效果。

现代智能手机和桌面/手提电脑之间的设备性能千差万别。例如在移动设备上可以获得10-50m范围内的精确位置信息,而在桌面/手提电脑上却只能获得更小范围的信息。这种信息的获取能够显著地改变应用程序接口的设计。

我们构建Bagcheck时使用的双重模板系统使得我们能够优化更长的交互,并且能够在我们的应用程序内部利用设备功能。在移动设备上我们启动了条形码扫描功能,这样子用户就可以使用手机内置的摄像机来识别物品。我们也重新组织了非线性列表创建工具(non-linear list creation tool),使其成为手机上一系列更为专注和短小的任务。


解析如何改善和优化 Web 服务器性能

Web服务器概述    Web系统在现在网络中广泛使用,而Web服务器则是Web系统的一个重要组成部分。完整的Web结构应包括:HTTP协议,Web服务器,通用网关接口CGI、Web应用程序接口、We...
  • qw_xingzhe
  • qw_xingzhe
  • 2015年07月07日 23:46
  • 3062

Web测试要点(功能、性能、可用性、兼容、安全)

一、功能测试 1、链接测试  (1)、测试所有链接是否按指示的那样确实链接到了该链接的页面;  (2)、测试所链接的页面是否存在;  (3)、保证Web应用系统上没有孤立的页面(所谓孤立页面是指没有链...
  • wudeyaohehe
  • wudeyaohehe
  • 2007年07月20日 01:02
  • 13526

移动web和PCweb优化的区别

1、PC优化手段在Mobile侧同样适用。 2、在Mobile侧三秒种内渲染完成首屏指标或使用Loading。 3、基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过10...
  • qq_20334295
  • qq_20334295
  • 2017年02月10日 02:41
  • 473

网站内部优化的六个基本要点

分享一下SEO中的网站内部优化需要注意的六个要点: 一、DIV+CSS技术 所有的页面代码都必须用DIV+CSS来编写,因为DIV+CSS的代码简洁,而且功能非常强大,众多大型搜索引擎都推...
  • wqdwin
  • wqdwin
  • 2015年08月15日 16:21
  • 1822

产品需求注意要点

限制条件是否合理、完整 参数设置是否能满足前端 单位转换、空值原因、特殊日期的对应 是否出现重复 财务类数据要注意报告期、单位、调整方式等 选择程序运行效率最高的方式 ——————...
  • zoekarma
  • zoekarma
  • 2016年12月07日 10:32
  • 52

移动web性能测试要点

性能测试   1.连接速度测试   用户连接到Web应用系统的速度根据上网方式的变化而变化,他们或许是电话拨号,或是宽带上网。当下载一个程序时,用户可以等较长的时间,但如果仅仅访问一个页面就不...
  • piooix
  • piooix
  • 2017年07月07日 17:58
  • 226

需求分析要点

一、人员组织 一般必须有商务活动人员,项目管理人员,设计技术人员等,要求组织人员必须明确负责范围,以及明确工作目标,保证实施的有效性。 二、分析方法   ①思路上的注意事项:     1 重中...
  • jx0260
  • jx0260
  • 2013年03月18日 20:19
  • 758

移动宽带之优化

移动宽带,价格便宜,印象中都认为速度慢。 这边原先使用10Mb联通光纤,上行却只有可怜的0.5Mb。 这次更换了移动的100Mb,上行有5~6Mb样子。 路由是使用Panabit标准版。 开始是新...
  • fengyu09
  • fengyu09
  • 2016年08月30日 09:11
  • 3011

产品测试管理的四个阶段

产品测试管理的四个阶段   近几年,作者在国内开展了多场产品测试管理公开课和内训,发现很多的公司虽然有测试团队和测试流程,但对于产品测试过程中的阶段仍然很模糊,例如开发测试和生产测试有什么区别,功能...
  • jichuang123
  • jichuang123
  • 2015年08月03日 13:53
  • 496

React移动web极致优化

原文地址最近一个季度,我们都在为手Q家校群做重构优化,将原有那套问题不断的框架换掉。经过一些斟酌,决定使用react 进行重构。选择react,其实也主要是因为它具有下面的三大特性。React的特性1...
  • offbye
  • offbye
  • 2016年08月12日 19:19
  • 1388
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:优化移动Web产品的四个要点
举报原因:
原因补充:

(最多只允许输入30个字)