现如今在移动设备上访问Web已经不是什么新鲜事了，然而WAP2.0设备的出现又重新引发了移动Web开发的热潮，大量经验丰富的XHTML开发者以及著名组织如dotmobi和W3C的 Mobile Web Initiative都在为此努力。现在是学习移动Web开发的最好时机。

告诉你一个小秘密：我有读心术。我知道你现在在想什么，你肯定在想：“我为什么要关注移动领域？毕竟，移动web的用户体验比起桌面web差远了。”

不止你一个人这样想。我们之中的很多人，包括传统的桌面web开发者、管理者、生产者等等，在评估移动web体验的时候都会产生这样的误解。我们期望它和桌面web的体验一样好。

事实的真相是“移动web”——这个短语在整篇文章中指的“在移动设备上访问web”——作为它本身来说，体验还是非常棒的。如果我们能正确看待移动web应用环境的巨大潜能，而不是把它当作一个蹩脚的桌面web的扩展，我们就会明白该怎么去发掘那些潜能。

你可能听到这样一个事实：到2009年，全世界的手机用户预期达到30亿。移动设备的使用量正在稳步增加。真正令人兴奋的两个关键因素是：1)全球拥有手机的人会超过PC，这意味着有更多的人浏览你辛苦创建的web内容2)你可以利用现有的web发布技术。

现在让我们先冷静一下：客观的说，正如眼下所示，访问移动web具有很大的差异性。市面上存在着种类繁多的移动设备用户代理(浏览器)，每种都以不同的方式渲染标记。退一步说，究竟是使用WML、XHTML Mobile Profile、XHTML Basic还是cHTML成了一个艰难的抉择。另外，web地址呢？是使用mobile.mysite.com、 mysite.com/wap还是mysitemobile.com？那些设备会支持这些吗？

希望还是有的！这篇文章就是一个起点。它不会回答你的所有问题，但是希望能让你产生一个目标，不仅仅是学习更多的技术，还要有信心为创建成功的移动web而努力。

语境才是王道

毫不夸张的说，在移动领域，理解语境(指围绕场所、事物或事件的情境和条件)是非常重要的。如果忽略语境，你的内容对用户来说就没什么价值。细想一下你是怎样在移动设备上访问数据的：你乘坐地铁或走路去下一个约会地点，一只手拿着手机，另一只手端着咖啡，你得时不时的抬头看一眼周围以免撞上柱子或坐过站。

移动web就是一个context-, content-, and component-specific(语境、内容以及组件限定)的环境。或者换句话说，在移动设备上访问web内容在很大程度上会被周围的条件、任务的相关信息以及该设备的性能所影响。不像桌面web(屏幕大，访问速度快且可靠，数据由键盘和鼠标输入)，移动web往往只有一个小屏幕，用户只能间歇地进行单手操作。这不免导致了移动web内容和功能的精简，但也创造了桌面环境中难以获得的机遇：特定位置的数据，活跃的消息，以及语音通信等等。

任何移动web策略都必须首先弄清楚目标用户是谁，他们想要从网站或app里面获得什么，以及这个网站或app的语境关联是什么。问问自己，和用户密切相关的东西是什么？当用户使用移动设备的时候可能会遇到什么样的问题及需求？从回答这个问题开始，你已经迈出了第一步。

WAP 2.0: 一种XHTML环境

让我们从移动互联网技术的一些基本原理开始。Wireless Application Protocol (WAP)是让移动设备访问互联网内容的协议。Wireless Markup Language (WML)是WAP1.0的所使用的语言。自WAP2.0引入以来，XHTML Mobile Profile (XHTML-MP)成为了首选的标记语言，它向后兼容WML。

Translation? WAP 1.0 = WML, WAP 2.0 = XHTML.这对于一般的web开发者来说是一个好消息，因为这意味着我们开始清除WAP 1.0 和 WML，它们对于那些没有专门研究移动开发的人来说曾是不可逾越的障碍。现在学习移动开发的难度比几年前要小得多，几乎所有的设备都使用的WAP2.0和XHTML-MP，这对于那些使用过XHTML Transitional or Strict(这已经成为了那些设备的官方标记语言)的人来说会比较容易上手。

然而，我们不能完全忽视WML，它在过去的那么多年里面一直作为传统的标记语言被移动网站(又称作“WAP sites”)所使用。我们也不能忽视cHTML，它在日本的i-mode市场里面依然盛行。关于WML 和 cHTML的书籍市面上有很多，我们这篇文章的主旨是消除XHTML环境下桌面web开发和移动web开发的隔阂。

我们已经具备了开发网站和应用的基础知识。XHTML-MP只不过是XHTML的一个子集，它与XHTML Transitional or Strict 没有本质的区别。DevelopersHome.com 上面发布了一个详细讲述XHTML-MP细节的文档：XHTML-MP Tutorial

此外，dotmobi最近发布了两套XHTML-MP模版，它会帮助移动开发的新手创建移动web内容。至少，你可以查看源代码以了解XHTML-MP的内部机制，你会看到这和普通的XHTML区别不大。你也可以学习那些已经使用了XHTML-MP的网站的源代码，例如Flickr Mobile 和 Yahoo Mobile.

最后，因为XHTML-MP是XHTML的子集，初次测试和认证在大多数桌面浏览器上会顺利通过。最后的深入测试还是需要在实际设备上进行，但是一开始你可以在桌面上进行测试，看看那些标记有没有正确且符合语义地渲染。

开发方法

如果你在阅读这篇文章，你可能想要在已有的网站或web app上进行修改，让它们可以在移动设备上运行，或者计划写一个新的网站或web app，让它们只包含支持移动设备的部分。你的选择是什么？

开发移动web的方法有许多，我们在这里总结了三种主要的。下面就是每种方法的详细讲解，包括各自的优缺点。

1、Strip Images and Styling(移除图片和样式)

考虑到WAP2.0设备除了支持WML之外还支持XHTML，这种方法依靠标签隐式层次结构的优势来呈现一个导航清楚、内容丰富的应用。样式和图片都移除掉，只留下一个原始的无样式的内容。

现在存在一些资源，可以让用户和开发者以最小的代价渲染那些原始的内容。Skweezer.net ，Greenlight Wireless Corporation开创的移动web服务，自2001年就开始投入使用了。Skweezer的免费门户网站为它的用户提供重新排版和动态压缩的服务。同样的，Google也提供了类似的重新排版的服务。站在开发者的角度来看, Mike Davidson的“two-minute”移动模式允许网站拥有者通过 a domain mirror 和 global_prepend / global_append PHP 文件重新改变网站的功能。

虽然这种“quick fix(权宜之计)”由于实现简单而具有吸引力，但却很少考虑语境。此外，文件大小仍然是个问题，即使只包含标记和文本的内容也会过于庞大，往往导致很长的、具有滚动条的页面(请记住很多移动用户还在以KB为单位付费)。

2、Handheld Stylesheets(手持型样式表)

手持型样式表通常被视为一个更加移动友好的web典型代表。因为它们从CSS继承而来，这种方法只需要在正确编码的网站里面加入一个额外的样式表，并且只需要一个web地址。现在并不缺少针对handheld stylesheet的开发资源，那些熟悉XHTML 和 CSS的人也对它的灵活性和易控性赞不绝口。

然而，事情并不像表面上看起来那么乐观。手持样式表目前对许多的移动设备并不支持。更重要的是，手持样式表主要用于注重外观而非上下文，因此对移动浏览器上面内容的相关性关注不够。

3、Mobile-optimized Site(面向移动设备的网站)

那些改编的方法只是用来让网站的外观适合在小屏幕上显示，而没有解决移动用户和设备的语境、内容以及组件的特定需求。

Little Springs Design使用miniaturizing vs. mobilizing(使微型化 vs. 使移动化)论述了这个问题。Miniaturizing是“将移动环境和技术看作桌面环境的一个子集”。它没有考虑到移动设备的优缺点。Mobilizing正好相反，它“针对移动用户的需求，充分地利用技术来满足这些需求。” 和语境相关的用户任务——而不是现存的网站——决定了移动网站的架构

尽管目前这个方法还存在问题，开发者必须提供至少两套文件(桌面和移动设备)，并选择对应的web地址。面向移动设备的网站经常以用户和设备为中心，这与设备独立性是相矛盾的。此外，如果移动设备和桌面机一样强大的时候会怎样？

但是十有八九，来自于用户的回报证明了这些付出是值得的。一个面向移动设备的网站首先要解决的问题是内容如何访问，然后才是内容如何展现。换句话说，内容优先于外观，功能优先于格式。精简的页面，意味着用户能节约更多的带宽成本并拥有一个更快的浏览器体验。

看看下面这个例子：Kayak.com默默地登上了Google搜索的前条。它们不预订机票和酒店，只是搜索提供这样功能的网站，并通过广告和结果分成营利。最近Kayak发布了移动版本，kayak.com/moby。搜索航班，酒店，甚至吃饭的地方，你可以得到电话号码和地址。

   如图所示，它的主页非常简单：

   选择“fly”你会看到如下所示。看看输入框是多么的简单。就一个用来输入出发和抵达城市的输入框(可以输入机场代码或城市名)连出发日期都不需要：

你不能预定机票，但是可以查询价格，出发/抵达时间，以及订票号码。毕竟，一部手机——你可能正在使用的设备——主要是用于打电话的。自然的，提供一个号码与提供预定相比是一种更加简单、更符合语境的方法。

通过点击“Search travel info with Kayak.com Mobile”可以查看更多的内容。

总之，选择面向移动设备的方法很简单，最重要的是你的选择必须取决于一定的标准，诸如用户的目标，开发的资源，以及你网站或应用的内容长宽。你的策略也许只能等待合适的推出时机。但是，如果你想等着用户需要的时候再去做，那你将错失良机。

   展望未来

   毫无疑问，移动web是一个令人激动的，充满挑战的，并且值得的体验。它存在着大量的改进空间，相对来说，我们还处于移动web开发的起步阶段。下面是适用于用户和开发者的几个改进移动web的方法。

   一个更合理的、有规律的、可靠的(desirable, disciplined, dependable)体验就是——亲自在移动设备上访问web，你很有可能会觉得失望。我们需要更合理的、有规律的、可靠的移动web体验。Desirable 指的可用、廉价、以及语境良好。Disciplined意味着提供的内容考虑到了移动设备的优缺点。Dependable是在多设备上的一致性，这是我们最在乎的。

   Greater user agent consistency(更粗略的用户代理一致性)——可能并不精确，我们假设市场上有超过几百个web-ready的移动设备和这些设备上安装的几十种用户代理。这对于开发者来说是一个重要的挑战，且不说访问，光说在这些指定用户群体可能使用的设备上进行测试就是一项不切实际的巨大开销。

   解决方案就是，无需在每个设备上测试，因为市场上许多设备的显示大致相同，我们只需要实现一定程度的一致性即可，这样可以让开发者在测试设备上花费更少的时间和代价。

   Less jargon(更少的术语) ——对于传统web开发者来说最大的障碍是移动web领域里一大堆的术语和缩略词。过渡到移动开发在某种程度上类似于学习一种新的语言。在学习的过程中，部分开发者认为，我们需要关注更多的是用户体验而不是这些专业术语。

   考虑Feedburner’s Mobile Feed Reader页面上的这个例子：

   下载“JAD”? 用手机的数字键盘输入上述地址？毫无疑问如果要通过输入多达50个字符的地址来下载“JAD”文件会让用户崩溃。

   你——移动web还需要你。你的经验，你的天赋，你解决问题的能力。你的声音将鼓励你的团队以一个语境相关的方式创造出更适合移动设备的web内容。

   你还在等什么？

   原文链接：http://mobiforge.com/starting/story/a-beginners-guide-mobile-web-development

建议继续学习：

1. [译文]关于移动Web性能的5个神话    (阅读：1249)