第1章 为体验而设计 1
1.1 优秀的代码，麻烦的设备 2
1.2 早期的Web是什么样 4
1.3 技术实现和用户体验 6
一个教训 7
1.4 你满足不了所有的人 9
1.5 向后兼容，向前适应 10
技术服务于内容 11
1.6 适应未知的设备 12
1.7 提升Web的可访问性 14
1.8 分层次设计 16
1.9 渐进增强的设计思想 19
第2章 内容是一切的基础 21
2.1 让文案和用户产生交流 23
2.2 设计稿中引入有意义的文案 24
2.3 优化文案，更好地与用户对话 26
问题出现时，做好准备 28
2.4 文案不确定怎么办 30
2.5 为用户优化文案内容 32
2.6 多种形式的内容 33
2.6.1 分析成本和收益 33
2.6.2 保持内容的可访问性 37
2.7 收集数据的时候，请保持和用户的对话 40
2.8 允许留白 41
2.9 让内容带路 43
第3章 使用文档结构化标记增强用户体验 45
3.1 那些年的“网页重构” 47
3.2 利用HTML强调内容 49
3.3 实现方法不止一种 49
避免可能出现的问题 52
3.4 如何使用class和id 54
3.4.1 使用微格式结构化内容 56
3.4.2 RDFa和微数据（Microdata） 58
3.5 元素的取舍和选择 60
3.5.1 注意文档的大纲结构 62
3.5.2 注意代码顺序 65
3.5.3 避免加入多余的HTML标签 69
3.6 使用ARIA提升页面可访问性 71
3.7 容错处理 73
3.8 标记语言对于用户体验的意义 77
第4章 通过视觉设计提升用户体验 79
4.1 设计一个系统，而非一堆页面 80
4.1.1 设计清算 81
4.1.2 从设计风格组件开始，发现整站的视觉语言 82
4.1.3 建立视觉规范或组件库 83
4.2 不做无米之炊 84
4.2.1 营造和用户的对话场景 84
4.2.2 考虑极端情况 86
4.3 理解CSS渲染规则 87
4.3.1 就近原则 87
4.3.2 权重高比就近更重要 90
4.3.3 利用CSS容错性 92
4.3.4 渐进式导航的实例 97
4.4 从小屏幕开始的设备响应 101
4.4.1 为所有人提供支持，为一些人提供优化 105
4.4.2 布局从小到大变化的实例 107
4.4.3 允许流动布局 109
4.5 紧跟标准 111
4.6 防守性的设计 114
保守地应用样式 115
4.7 在页面中隐藏内容 116
4.7.1 避免使用的方法 117
4.7.2 可以适当使用的方法 118
4.7.3 最佳方法 119
4.8 使用CSS生成内容 120
4.9 针对其他媒体类型和交互方式而设计 122
4.9.1 设计一个供打印的页面 123
4.9.2 兼容不同的交互方式 124
4.9.3 考虑大屏幕设备 126
4.10 保留浏览器的默认样式 128
4.10.1 关于浏览器默认控件是否美观的讨论 129
4.10.2 关于模拟系统控件的讨论 129
4.11 拥抱可持续性 130
第5章 通过交互设计提升用户体验 133
5.1 了解潜在的问题，避免日后踩坑 135
5.1.1 了解Web的性质 136
5.1.2 什么情况下会“无JavaScript” 138
5.2 保证最基础的用户体验 140
5.3 防止性的代码 142
5.3.1 先观察，再动手 142
5.3.2 特性检测 145
5.3.3 确认代码依赖的库的存在 146
5.4 建立最低限度的代码支持 147
5.5 区分对待 149
5.6 创建页面所需的结构 150
5.7 描述当前发生了什么 152
5.8 代码简单明晰 153
5.9 适应性的界面 156
5.10 不要提前应用样式 159
5.10.1 在HTML中添加标记 160
5.10.2 充分利用ARIA 161
5.11 通过适当调整需求提升页面体验 161
5.12 鼠标事件之外 164
5.12.1 发挥键盘的作用 164
5.12.2 提升触屏体验 166
5.13 不要依赖网络状况 169
5.13.1 将数据存储在客户端 169
5.13.2 进一步丰富离线体验 171
5.14 合理发挥技术能力 172
第6章 持续的手艺活儿 175
6.1 体验图 176
6.1.1 Ix图的优点 177
6.1.2 图片延迟加载的实例 178
6.1.3 标签式界面实例 184
6.2 从历史中学习，寄希望于明天 185
6.2.1 移动互联网时代，等价于一个新的拨号上网时代 186
6.2.2 以前的小屏幕，变成了现在的大屏幕 186
6.2.3 仅有文字的设计方案回归了 187
6.3 对任何情况都要做好准备 190