第1章　移動化用戶體驗設計　0
1.1　設備并沒有移動，移動的是人　2
1.2　移動=正在做　2
1.3　移動=繁忙　3
1.4　移動=分心　5
1.5　移動=輕松　7
1.6　移動=任務　10
1.7　與你的客戶聊聊　11
1.8　撰寫用戶故事　12
1.9　將用戶故事分解成設計需求　14
1.10　創建帶有優先級的用戶任務分解表　14
1.11　小結　19

第2章　移動化頁面布局　22
2.1　標準化的頁面布局已符合響應式了　24
2.2　是什么固定了寬度　25
2.3　使寬度不固定　26
2.4　拖曳方塊　27
2.5　我們的網站　30
2.6　小結　42

項目訪談1　亞利桑那州立大學和MTV O Music Awards　44

第3章　移動化導航　56
3.1　表　58
3.1.1　尺寸　58
3.1.2　比例　59
3.1.3　設計　59
3.2　汽車界面　59
3.2.1　尺寸　60
3.2.2　位置　61
3.2.3　數量和復雜性　61
3.3　iOS應用程序界面　62
3.3.1　計算器　62
3.3.2　電話界面　63
3.3.3　iPod　64
3.4　那么現在移動化導航設計　66
3.4.1　HTML　67
3.4.2　CSS　67
3.4.3　移動網頁CSS　69
3.5　小結　72

第4章　移動化圖片　74
4.1　圖片移動化的整體分析　76
4.2　內聯圖片　76
4.2.1　有時候，移動化就意味著要變小　76
4.2.2　而有的時候，移動化卻意味著變大　79
4.3　響應式圖片柵格　83
4.4　小結　88

第5章　移動化文字　90
5.1　使用以用戶為中心的方法來移動化文字　92
5.2　使用哪種單位：Point還是em　92
5.2.1　標題部分　93
5.2.2　正文：段落　95
5.2.3　正文：副標題　97
5.3　使用展示和隱藏　100
5.3.1　HTML　106
5.3.2　CSS　107
5.3.3　JavaScript　108
5.4　小結　111

項目訪談2　波士頓環球報　112

第6章　移動化表單　124
6.1　移動化可以提升網頁表單的用戶體驗　126
6.2　Input類型　127
6.2.1　input type=“text”　128
6.2.2　input type=“email”　130
6.2.3　input type=“url”　132
6.2.4　input type=“tel”　133
6.2.5　Select　134
6.3　小結　138

第7章　移動化社交媒體　140
7.1　大部分社會化媒體可以提供“免費”的移動改造　142
7.2　Twitter　143
7.3　Facebook　145
7.4　Google+　147
7.5　Quora　149
7.6　LinkedIn+　151
7.7　YouTube　154
7.8　與社交化網站連接　156
7.9　小結　160

第8章　移動化內容策略　162
8.1　事先對移動環境的理解，會帶來更好的內容策略　164
8.2　移動化設計為你做好可用性評估的準備　165
8.3　可用性評估是優秀內容策略的第一步　166
8.3.1　網站說了什么　167
8.3.2　網站是如何組織的　168
8.4　內容策略的制定為你的第一個移動化設計做好準備　168
8.4.1　從移動滯后轉變為移動先行　169
8.4.2　任務清單和策略化的內容也要前置　169
8.5　小結　170

項目訪談3　洲際酒店集團網站　172

第9章　更多移動化改造的方法：JQuery Mobile　182
9.1　jQuery Mobile網頁框架　184
9.2　jQuery Mobile的優點和不足　185
9.3　網頁頭部　186
9.4　主體區域和頂欄　187
9.5　導航　189
9.6　工具欄和按鈕　192
9.7　模態對話框菜單　194
9.8　表單　197
9.9　橫屏模式　198
9.10　小結　199

第10章　更多移動化方法：設備檢測和PHP引用　202
10.1　什么是PHP　204
10.2　使用PHP　206
10.2.1　修改你的HTML文件　206
10.2.2　設置移動屏幕和完整屏幕按鈕的CSS樣式　210
10.2.3　添加PHP引用　213
10.2.4　設備探測　215
10.2.5　完整網站和移動版的PHP引用　217
10.2.6　一些特殊的CSS　219
10.3　小結　221
10.4　總結　221