移动 Web 最佳实践
序言
“移动 Web 最佳实践 1.0”是一份由 W3C 制定的标准规范，它旨在帮助人们设计出能够在各种移动设备 上良好运作、美观呈现的内容。这套卡片将这份规范文档中提及的指导方针总结为 10 个主题。遵循这些指导 方针，网络内容提供者便能拓宽受众范围，创建出更加高效的 Web 站点和应用程序，并且使更多设备能更方便 地浏览 Web。
要了解更多信息，请访问：http://www.w3.org/TR/mobile-bp/
实现“移动化”的 10 个要点
同一个 Web
能支持不同设备的内容设计，可降低成本，提高灵活性，并满足更多人的需要。
同一个 Web
主题一致性: 确保使用各种设备访问页面的用户都能获得同样主题的内容。
设备功能: 充分发掘设备自身的能力，提供更好的用户体验。
缺陷: 针对有缺陷的设计采取合理的补救措施。
测试: 除了借助模拟器以外，也最好在实际设备上进行测试。
恪守 Web 标准
面对市场上五花八门的设备和浏览器，只有遵循标准才能保证最好的兼容性。
恪守 Web 标准
合法的页面代码: 页面代码应当能通过标准校验。
内容格式支持: 内容的格式要能为设备所支持。
内容的首选格式: 尽可能将内容以设备的首选支持格式发送。
字符编码支持: 确保内容的编码字符集（Encoding）为目标设备所支持。
当前使用的字符编码: 在应答中明确指出所用的字符编码。
样式表的使用: 除非目标设备不支持，否则使用样式表（CSS）来控制布局和页面外观。
结构: 所用的标记语言要能凸现文档的逻辑结构。
错误信息: 提供有用的错误信息以及从出错状态导航到正常状态的办法。
避免重蹈覆辙
移动设备的小尺寸屏幕和键盘容易产生可用性方面的问题，这就需要更加深思熟虑的设计， 避免犯一些常见错误。
避免重蹈覆辙
弹出窗口: 不要使用弹出式窗口，也不要在未事先提醒用户的情况下更改当前窗体。
嵌套表格: 避免使用嵌套的表格。
基于表格的布局: 不要使用表格来主导布局。
间距图片: 不要使用图片来控制间距。
杜绝框架: 不要 使用框架（frame，iframe）
图片热点映射: 除非设备能有效地支持，否则不要使用图片热点映射（image map）。
留心设备的局限性
当打算使用某些特定的 Web 技术时，别忘了移动设备的能力彼此有很大不同。
留心设备的局限性
COOKIES: 不要 依赖于 Cookie。
对象或脚本: 不要依赖于嵌入式对象或脚本。
表格支持: 除非确定该设备支持表格，否则不要使用。
表格替代: 如果可能，使用某种方式替代表格的呈现。
样式表支持: 保持良好的文档结构，使得即便缺少样式表内容也能完好呈现。
字体: 不要依赖于 对字体相关样式的支持。
颜色的使用: 确保内容在用不同颜色呈现时仍能准确传达信息。
优化导航系统
面对小尺寸的屏幕和有限的网络带宽，简明的导航设计至关重要
优化导航系统
导航条: 在页 面顶部只提供最小化的导航。
导航: 提供一致的导航机制。
链接目标 ID: 清楚指定每个链接的目标。
链接目标的格式: 注意目标文档的格式，除非已知该设备支持它。
快捷键: 为导航菜单和频繁访问的功能分配快捷键。
网址（URIs）: 保持站点 网址简短并易于输入。
平衡: 要考虑在页面链接数量和抵达目标内容所需链接跳转次数之间保持平衡。
检查图片和颜色
图像，颜色和样式能美化内容，但需要小心：设备的屏幕对比度可能很低，也可能不支持某些图片格式。
检查图片和颜色
图片缩放: 在服务器上端就调整好图片尺寸。
大图: 不要使用设备无法显示的图像。 避免使用太大或者太高分辨率的图片，除非会因此丢失关键信息。
设定图片尺寸: 在页面代码中指明的图像的尺寸大小，如果有的话。
非文本元素替换: 为非文本元素提供一个替代文本（alt，title）。
色彩对比度: 确保前景色和背景色组合具有足够的对比度。
背景图片 可读性: 当使用背景图片时，确保内容仍然具有在设备上的可读性。
单位: 不要使用像素作为尺寸单位，并且避免在标记语言和样式表属性值中使用绝对单位。
保持小巧精简
小巧的站点节约时间和开销，让用户喜闻乐见。
保持小巧精简
最小化: 使用简洁，高效的页面代码。
页面大小限制: 确保页面的总体大小适合设备的内存限制。
样式表大小: 保持样式表尽量小。
滚动: 除非万不得已，否则只提供一个方向上（垂直，水平）的滚动。
节省网络资源
利用网络协议功能，减少网络瓶颈和延迟的影响，改善用户体验。
节省网络资源
自动刷新: 不要使用页面定期自动刷新，除非已通知用户，并提供了停止的方法。
重定向: 不要使用标记来自动重定向页面。相反，通过配置服务器执行重定向， 使用 3xx的 HTTP 代码。
外部资源: 保持尽可能小的对外部链接资源的需求。
缓存: 在 HTTP 响应中包含缓存控制信息。
帮助和指导用户输入
移动设备上的的键盘和其他输入方式使用起来可能并不舒适， 但可以通过有效的设计最大限度地减少对它们的需要。
帮助和指导用户输入
尽量少的按键: 保持最少的按键次数。
避免文本输入: 尽可能地避免要求用户自己输入本。
提供默认值: 尽可能提供预先设定好的默认值。
默认输入模式: 如果设备支持，指定一个默认的文字输入模式，语言和/或输入格式。
TAB 键顺序: 在链接，表单控件和对象上创建符合逻辑的 Tab 跳转顺序。
控件标签: 为所有表单控件指定关联标签并设置合适的标签文字。
控件位置: 控件及其关联标签的位置布局要合适。
你的用户正在路上
“在路上”的移动 Web 用户时间宝贵且周围环境嘈杂， 他们只想看简明扼要的信息。
你的用户正在路上
页面标题: 提供一个言简意赅的页面标题。
明晰: 使用 简单明了的语言。
中心思想: 确保和主题相关的内容优先于其他。
限度: 只提供用户所请求的内容。
适合: 确保内容适合在移动环境下使用。
可用的页面划分: 将大页面划分为较小尺寸的多个部分以提高可用性。