本文根据W3C提供的指导方针论述了将Web内容提交到移动设备的最优方案。在移动Web指导方案中,论述了有关输入和输出能力、终端用户的带宽和成本、内容交付等问题。
不久前W3C主持制定了Mobile Web草案指导,其主要目的是为了改善用户通过移动设备访问Web内容的体验。方案内容的制定采用了设备独立原则。在移动Web指导方案中,论述了有关输入和输出能力、终端用户的带宽和成本、内容交付等问题。本文主要论述向移动设备交付Web内容的最优方案。文章中的所有建议都是针对内容交付的,而不涉及这些内容是如何产生的,也不涉及用户的设备或用户代理。
移动Web项目
由于互联网技术的大面积普及,现在通过桌面电脑或笔记本访问网络内容和服务变得非常简单了。对于移动设备,Web技术同样扮演着重要角色。然而,移动互联网正面临着来自各方面的问题,使得大多数移动设备用户忽视了移动Web应用的存在。W3C发起的移动Web草案项目可以让移动用户访问Web变得如同从桌面电脑访问一样简单、轻松和便利。除了为现有的Web用户提供更多一种访问Web资源的途经,移动Web项目也为那些之前没有能力上网的用户提供了唯一的,或者是主要的上网途经。W3C的最终目的,就是让更多的人能够访问到Web资源,将互联网的好处带给更多的人。
移动Web计划最优方案工作组(Mobile Web Initiative Best Practices Working Group)的任务是确保Web内容能够轻松的被移动设备接收。该工作组将制定并公布一套技术最优方案,并且创建一个amobileOK信任标志,用来标记那些支持移动Web方案的Web页面,给移动设备用户提供一个可以接受的Web体验。最优方案指导方针主要针对改进Web内容,在移动设备和其它小屏幕便携设备上的交付和显示效果进行了规定。
草案范围
移动用户与固定用户在Web内容体验方面的差距主要体现在以下几个方面:
内容类型;
网络和设备性能;
接收网络内容的环境不同(比如坐在桌子前和坐在公车上)。
内容类型方面的一个例子是大尺寸位图。位图可能会导致移动设备工作不稳定,另外它需要在被缩小或者剪裁的同时保留图片相关信息。
有关设备和网络性能方面的差别,也是必须要考虑的。其中涉及到技术、环境以及经济方面的问题:
带宽——基本上,蜂窝通信所能提供的带宽要小于固定网络的带宽。
电池——电池性能对移动设备来说相当重要,处理某些任务有可能加大耗电量,缩短待机时间。
容量——比如屏幕尺寸,内存大小等。
成本——蜂窝网络的通信费用经常是按照数据流量计算的。
输入——不同移动设备的输入能力不同,但是总的来讲,移动设备在输入文字时的舒适性不如桌面电脑。
内存——很明显,移动设备上的内存和存储设备容量不如桌面终端的大。
处理能力——移动设备的数据处理能力远不如桌面电脑的处理能力强。
文本输入——移动设备在输入文本时的速度和舒适性都很差。
移动Web需求
表现
目前大多数网页都是针对桌面电脑的显示器尺寸设计的,同时也是针对桌面浏览器软件开发的。如果用移动设备访问这些网页,将遭遇各种不良的经历。由于用户终端设备在屏幕尺寸以及显示材质上都存在明显的不足,因此网页内容往往无法正常显示。
输入
与桌面设备所采用的标准键盘相比,移动设备在输入时更为困难。移动设备的键盘面积一般都很小,导致每个按键的面积也大幅缩小,而且对于移动设备来说,没有鼠标或者控制杆之类的游标控制设备。由于屏幕显示和输入方面的问题,一般的Web窗体很难适应。因此移动设备访问Web资源时出现的障碍之一就是输入URL。冗长的URL以及那些包含了多种标点符号的URL在输入时尤其困难。
而网页之间的导航也并不一定会按预期的顺序工作。虽然现在很多设备都提供了后退键,但是还是有一部分设备不具备这个功能,而且有时候,尽管设备带有后退功能,但是用户却不知道该怎么使用。这意味着用户很难从一个错误的网页返回上一层,或者从一个死链中跳出来。
成本和带宽
与固定网络相比,移动网络的带宽相对较小,并且网络延迟也更明显。这将导致移动设备用户长时间的等待Web内容,其尤是当Web内容过于冗长或者通过导航浏览多个网页时。另外,移动网络的数据传输比固定网络数据传输的成本要高很多。事实上,目前移动设备所能支持的内容类型很少,因此经常有用户在点击了导航链接后发现目标网页内容无法在移动设备上浏览。对于目前的Web网页中的内容,经常有一些是移动用户并不需要的,尤其是广告或者大尺寸图片。在移动领域,这些额外的内容导致了移动Web可用性下降以及网络费用的增加。
用户目标
与固定网络或者桌面系统用户相比,移动设备用户在内容需求方面的兴趣点大相径庭。移动设备用户上网的目的更直接,更具目的性。他们希望能够获得所需内容的核心信息。比如某个移动用户上网就是为了查看自己即将开始的旅游日程表。
同样,移动用户也不太喜欢上网阅读冗长的文档或者随意浏览。移动设备本身的设计就并不适合用户长时间阅读文档,而用户大都将通过移动设备上网看作上网的最后一种途径,只有在其他更便捷的上网方式都无法实现时才会考虑。
广告
商业网站的开发人员应该注意到,对于通过移动设备浏览网站的用户和通过桌面设备浏览网站的用户,应该采用不同的商业模式。比如某些展示广告的机制,对于小型的移动设备来说并不适用,并且也不符合移动Web最优方案的建议。
交付内容
应用设计人员以及服务供应商都希望能尽最大努力在内容上让移动用户获得最佳的体验。然而,除了做好内容,更应该考虑如何让不同类型的移动设备都能获得一个可以接受的浏览效果,包括那些特殊类型的移动设备。
由于移动设备的多样性,对于网站来说,可能很难在一个较大的范围内做到面面俱到。比如不同的移动设备支持不同的标签功能,不同的屏幕尺寸对于接收的图片规格也有不同的要求。因此在向移动设备交付内容时,在标签、图片格式、图片大小、色彩深度等细节方面,都应该配合不同的设备提供多种不同的方案。这种改变内容状态以满足用户终端设备的过程叫做“内容适应(Content Adaptation)”。
内容提供商为了改善用户体验,实现多种不同的内容适应,必须要了解用户终端设备的特性、移动设备上的浏览器的属性、以及用户设备的网络连接速度。对比两个内容相同的网站,第一个采用统一的内容界面,而另一个则针对不同的移动设备进行了导航优化,提供多种不同尺寸的图片,或者采用其他方式适应用户的终端设备,那么移动设备用户对后者的需求一定远高于前者。内容供应商可以通过多种方式发掘交付内容的相关信息,比如CC/PP, UAPROF, CSS Media Queries以及设备独立工作组(Device Independence Working Group)提供的多种参考。
由于各种移动设备的属性不同,移动Web最优方案工作组对默认交付内容(Default Delivery Context)进行了规定:
◆屏幕宽度: 最小120 pixels;
◆标记语言:XHTML Basic Profile;
◆字符编码:UTF-8;
◆图片格式至少支持:JPEG, GIF 89a (非交错模式, 非透明, 非动画);
◆最大页面体积: 20 Kb;
◆色彩范围:适合网络使用, 比如红/绿/蓝三色的值仅能从0, 51, 102, 153, 204, 以及255中选择;
◆风格表单支持:External CSS Level 1
◆HTTP 版本,早期:HTTP/1.0.
有关移动Web内容交付的建议根据向移动设备交付内容的需求,在设计移动Web网页时有一些通用的或具体的原则可以遵循:
主题一致性——这是One Web原则的体现,即一定种类范围内的移动设备都可以访问网页内容,而不会受到产品特性或访问方式的影响。它确保了不同种类的移动设备在访问同一页面时,能够获得一致的效果。
根据设备性能扩展内容——虽然鼓励内容供应商根据“默认交付内容”的规定提供网页内容,但这并不意味着将使得那些具有更高性能的移动设备无法实现更好的用户体验。根据默认交付内容的规定开发网站是基本要求,但网站完全可以适当的根据用户终端设备的能力,为用户提供效果更好的网页内容。
测试——在实际设备和模拟器上进行测试。很多厂商都针对自己的产品开发了模拟器,这些模拟器是网站设计人员首选的测试途经。不过在实际中,很多模拟器表现出来的结果与实际设备大相径庭。因此最终的测试还是应该在多种不同的移动设备上进行,并且要在多种不同版本的浏览器软件上进行测试。
简洁的URL——保持网站URL地址短小。由于在移动设备上输入URL地址比较麻烦,而且用户一般会选择从网页(或者电子邮件、短信息以及其它途经)上提供的URL链接访问网站。但是再有些时候,用户必须要输入URL才能访问到目的网页。尽量缩短URL地址长度可以有效降低用户输入错误的机率,并能实现更好的用户体验。
平衡结构——设计网页时要考虑到在过多的网页内链接与要求用户进行多次跳转才能访问到所需内容之间进行平衡。
明确的链接——明确网页上每个链接的内容。移动设备用户可能因为盲目点击链接而浪费时间和金钱。网页的每个链接都应该明确说明目标网页的位置和内容,以便用户自行决定是否要点击该链接。
图片网站地图——不要使用图片格式的网站地图,除非能够确定客户的设备能够良好的表现出这些图片。
刷新,重定向以及弹出窗口——不要在网页中使用弹出窗口,也不要在未通知用户的情况下改变当前的网页。不要设置网页进行周期性的刷新,除非你能提前通知用户并可以让用户通过某种方式在客户端停止这种刷新。不要用标记语言重新定向网页,而应该通过配置服务器来实现,即使用HTTP 3xx代码。
外部链接资源——尽量减少网页上的外部链接数量。每个外部链接资源(图片、样式单或其它对象)都需要一个额外的连接请求。这将明显增加网页的相应延迟。
页面内容和格式——确保网页内容复合移动设备用户阅读习惯。使用简单明了的语言。将内容限制在用户需求的范围内。因为移动设备用户一般只关注内容的某一部分,而不是长时间随意浏览。因此要将网页内容分隔成用户需求的片断。如果页面内容过多,会导致移动用户等待时间过长。另外,移动设备所能接受的网页体积也是有限的。
尽量没有或只有一个方向的滚动,只有在无法避免的情况下,才可以出现横向和纵向的滚动。这样用户只需要按动一个方向的按键就可以浏览网页的全部内容。不过对于某些特定内容,比如地图以及其它图片,一般都需要横向和纵向同时滚动,否则无法完全显示。不要使用图片进行占位。传统的占位方式都是用一个像素的图片进行占位,但是在多种移动设备的显示屏幕上,这种方式并不起作用。使用背景图片前也要确定用户的设备能够支持。
页面定义——页面标题应该简短并且具有说明性。 移动设备有可能采用页面标题作为默认书签的题目。同时,还要注意标题的长度,每个页面的标题只可以用做页面内容说明,不要添加其它冗长的内容。不要使用框架。很多移动设备的浏览器不支持框架。另外,框架结构经常会产生意外(http://www.w3.org/TR/xframes/#s_intro有详细的框架问题介绍)。如果不清楚客户端设备是否支持,就不要使用表格。为每个非文本元素提供一个文本符号。实际应用中的文本定义还包含其它很多方面的内容,比如编码、脚本、cookies、字体、风格等。基本的原则就是:越简单越好。
用户输入——如果有可能,尽量提供一些预先设定好的输入内容供用户选择。尽量让用户击键的次数降到最低。 适当的为窗体控件设置标签,并且对控件和标签进行适当的布局。提示标签的位置很重要,应该让用户明确的认识到标签和控件的关联。
(责任编辑:陈毅东)
查看本文的国际来源