我总结的手机web页面设计及编写规则，适用于xhtml basic 和 xhtml mp。仅代表个人观点。
1. 设计相关
1.1 硬件限制
推荐结构
手机屏幕由于尺寸、分辨率和色彩的限制，不能正常显示我们用于普通显示器的设计。在设计mobile web时要注意尽量避免产生滚动条，必需有滚动条时要保障只在一个方向上产生，如右图所示，不使用传统的上左右下结构，而使用上下结构。应该把主要的导航链接放在页面顶部，而且应当尽量精简，1或2行较为适宜。如果需要其它次要的导航就放在页面底部，这样用户打开页面后无需滚动就能看到页面的主要内容。不要使用过于复杂的色彩，手机屏幕不一定能正常显示，只要使网站总体风格一致即可。
手机网络往往要比有线链接要慢，例如，中移动GPRS升级EDGE后峰值只有384kbps，而且由于机制所限，手机连接互联网会产生较高的延迟，这些都将导致页面加载时间的延长；使用移动网络需要用户支付的费用通常会比较高，中移动降价后的GPRS流量费仍高达0.01元/KB。（不知升级3G后会是何种情况，呵呵）
在进行页面设计时应注意图片，flash等元素的使用，不要尺寸和字节数过大的图片，这样加快网页加载，不产生不必要的滚动条，降低用户的使用成本。
版本低一点的手机浏览器往往不支持脚本或插件，而且在许多情况下，用户没有选择的浏览器或者升级旧浏览器的余地。像重新载入网页，构建表，处理不必要而且复杂的样式表，处理无效的标记等等这些操作，由于手机的处理能力通常都相当有限，这意味着网页渲染可能需要很长时间才能完成，这将引起明显的延迟，并且浪费更多的电池电量。
1.2 用户输入
手机输入一般都不像使用普通键盘那么方便，而且一般手机都没有像鼠标这样的指点设备，应尽可能让用户少输入内容。例如一个较长的URI，用户没有耐心去输入它，而且也不能保证输入的正确性。
例如：不推荐使用这样的URI
“http://www.example.org/index.html”，
推荐使用这样的
“http://example.org”。
1.3 用户目标
用户通过手机上网浏览所需的网页时，通常都比桌面用户有更具体的目标，他们的意图往往是为了找出直接相关的资料。例如，用户可能需要收发某封重要的电子邮件，找一个距离最近的中国石油的加油站，看看CCTV5今天是否直播火箭队的比赛等等，恰巧手边又没有一台能上网的电脑。
同样，手机用户通常不太关心冗长的文件或内容。手机屏幕是不适合阅读长篇内容，用户往往还是因为没有更方便的接入方法，只得使用手机作为最后的手段。
2. 代码相关
xhtml mp使用:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//OMA//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>公交搜索</title>
</head>
<body>
</body>
</html>
xhtml basic使用：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>公交搜索</title>
</head>
<body>
</body>
</html>
2.2 去掉不必要的空格和换行
不必要的空格和换行会增大文件大小，去掉空格及换行对浏览器解析来说没有不好的影响，因此推荐在编写完成上传服务器时去掉不必要的内容。
2.3 尽量避免使用Cookie
不是所有的浏览其都支持Cookie，即使支持也不是所有的用户都开启了Cookie支持。我们可以在URL中传递相关信息，当然，要注意不要超过最大长度。如果使用Cookie也要保证是哪些非必要的功能在使用它。
2.4 不要使用<table>标签
<table>在小屏幕上表现不佳，解析难度较大，大多数手机浏览器对<table>都支持不佳。
2.5 图片或其它嵌入对象要添加必要属性
在使用图片或flash等元素时，要添加alt属性，以便在元素不能加载时给用户相应的提示，添加width，height属性，防止发生不可预期的版式破坏，添加id属性以替代name属性。
2.6避免使用绝对度量单位
推荐使用em，ex或者百分比等相对单位替代px，这样便于浏览器对网页的自动缩放。
2.7 把需要共享的样式和脚本通过外部链接引入
推荐把样式和脚本写在文件里通过外部链接引入，这样可以减少解析难度和出错几率。
如果客户端支持缓存就可以不再向服务器发送请求，如果不支持，那么每次都要从服务器取这个文件，不相关的内容也在这个文件里，将额外增加不必要的流量；网页里的每个外部链接都会单独从服务器请求一次，如果内容过于分散，请求次数就会很多。
因此，尽量把可以共享的样式或脚本写在单一的文件里，减少不必要的请求和流量。
也做了几年的UI和交互，网页设计和手机应用的界面，也都多多少少接触过，现在简单的谈一下两者之间的区别，个人愚见，欢迎各种不同意见。
首先，网页设计与手机UI，操作的媒介不同，鼠标与手，这是一个很大的区别，而这个区别所造成的几点不同如下：
1. 精确度不同：
鼠标的准确度是相当高的，哪怕是再小的按钮，对于鼠标来说，也是可接受的（注意，仅仅是可接受），点击的错误率不会很高。
而手的准确度相对而言就没那么高了，而且还要照顾一些肢端较大的用户，因此对于手机UI中的按钮，就需要一个比较大的范围，以减少错误率（相信不少人咒骂过iphone的输入法吧，这就是个很好的例子）
对于鼠标，可以说按钮在屏幕中的任何位置，对于操作的影响都不是很大，你可以轻松的移动鼠标到任何你想去的位置，点击任何你需要的按钮。因此我们可以看到大部分的网页，按钮都在边缘的一个狭小空间内。
而对于手机UI，你需要考虑的是手机的使用环境，通常人们更加希望单手操作手机（某品牌的7寸大砖头除外），因此，我们设计的按钮，通常更多的在屏幕下方，或左右手大拇指能控制到的区域内。
3. 操作习惯不同：
对于鼠标，通常我们有单击，双击，右键这几种操作，因此在网页设计中，我们可以设计右键菜单，双击动作等等。
而对于手机UI，通常我们有点击，长按和滑动甚至多点触控，因此我们可以设计长按呼出菜单，可以设计滑动翻页或切换，可以设计双指的放大缩小，以及双指的旋转等等。
但很明显，我们不能把以上这两种操作习惯混用，想象一下如果手机应用中出现右键菜单，或者网页中出现多点触控操作，那么最先骂娘的就是用户，然后就是设计师的老板了。
4. 按钮状态不同：
对于网页中的按钮，通常有四个状态：默认状态，鼠标经过状态，鼠标点击状态，不可用状态。
而对于手机UI中的按钮，通常只有三个状态：默认状态，点击状态和不可用状态。
因此，在网页设计中，按钮可以与环境以及背景更加和谐的融为一体，不必担心用户找不到按钮，因为当用户找不到的时候，会用鼠标在屏幕上乱画，这时按钮的鼠标经过状态就派上用场了。
而在手机界面中，按钮需要更加的明确，指向性更强，让用户知道什么地方有按钮，因为一旦用户点击，触发按钮的事件就发生了。
然后，网页设计与手机UI，输出的区域尺寸不同，这同样是一个很大的区别，目前主流显示器的尺寸通常在19-24寸，而主流手机的尺寸则仅仅为3.7-4寸（请果粉原谅我没有把iphone的屏幕尺寸作为主流标准，因为它实在是太小了），甚至最愚蠢的厂商开发的大砖头，也不过7寸而已。
这个不同造成的结果是，我们不能在网页设计和手机UI中，在同一屏里放入同样多的内容，一般来说，一个应用或是一个网页应用，总体的信息量是一定的，因此，在网页端，我们可以尽量多的把内容放进首页，而尽量避免更多的层级，一般类的网站，基本只有3级目录，而这个3级目录，是建立在第一级所产生的子目录足够多的情况下。
在手机端，我们需要更多的层级，因为我们不能在第一个页面里放入无限多的内容，所以我们需要给用户一个更加清晰的操作流程，让用户可以更容易的知道自己在整体应用的什么位置，并且很容易的到达自己想去的页面或步骤。因此， map在手机 UI中的重要性，要比网页更大。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
