內容簡介
想要為平板、手機、筆記本、大螢幕設備，甚至可穿戴設備提供最優的用戶體驗？那就學習回響式設計吧。這是一本內容特別全面、講解非常透徹的入門書。特別地，通過這本書不僅能迅速掌握回響式Web設計的基本原理，還能夠從頭到尾了解回響式設計的工作流程：從項目啟動開始，到項目最終上線為止。
只要你的工作與創建、改造或者升級網站有關係，都應該看看這本書。換句話說，不僅是前端開發人員，設計師、產品經理、項目經理，甚至後端開發人員也可以通過本書掌握回響式設計的精髓所在。這本書基於回響式設計的前沿技術和社區經驗寫成，匯集了前人的智慧和最佳實踐。希望讀者能夠“站在巨人的肩膀上”，把這本書的內容套用到未來的項目中，造福更多用戶。
內容策略的制定應先於視覺設計
默認設計應針對最窄螢幕寬度進行
回響式Web設計的關鍵：HTML元素和CSS屬性
基於設備視口寬度，通過媒體查詢顯示不同的CSS樣式
處理圖像、文字排版和導航
採用性能最佳化技術建立更輕量級、更快的網站
作者簡介
Clarissa Peterson
用戶體驗設計師、Web開發人員，回響式網站設計諮詢公司Peterson/Kandy（位於蒙特婁）聯合創始人。她經常在開發者會議及研討會上發表關於回響式設計、移動策略和用戶體驗方面的演講。
目錄
前言 XV
第一部分 回響式設計基礎
第1章 什麼是回響式設計 3
1.1 一點兒基礎 3
1.2 簡史 6
1.2.1 固定寬度設計 6
1.2.2 移動Web 瀏覽 7
1.2.3 移動網站 8
1.2.4 更多的設備 9
1.2.5 媒體查詢 10
1.2.6 靈活性 11
1.2.7 回響式網頁設計 12
1.3 為什麼是回響式設計 12
1.3.1 每個設備都得到正確的設計 12
1.3.2 更少的工作 14
1.3.3 搜尋最佳化 14
1.4 總結 15
第2章 回響式內容 16
2.1 內容策略 16
2.2 內容整理 18
2.2.1 僅使用你需要的 18
2.2.2 如何精簡 19
2.2.3 內容審計 20
2.3 內容編寫 20
2.3.1 用戶如何閱讀 20
2.3.2 簡明的語言 22
2.4 內容平等 23
2.5 內容管理 24
2.6 自適應內容 24
2.7 總結 27
第二部分 創建回響式網站
第3章 回響式網站之HTML 31
3.1 使用HTML 32
3.1.1 HTML 版本 32
3.1.2 Web 標準 33
3.1.3 使用HTML5 33
3.2 頁面基本結構 34
3.2.1 文檔類型聲明 34
3.2.2 文檔結構 34
3.2.3 頁面標題 35
3.2.4 字元集 36
3.3 視口 37
3.3.1 寬度 40
3.3.2 初始縮放比 40
3.3.3 用戶可縮放 40
3.3.4 最大縮放比 41
3.4 結構性元素 41
3.4.1 螢幕閱讀器 42
3.4.2 <header> 43
3.4.3 <nav> 43
3.4.4 <footer> 43
3.4.5 <article> 44
3.4.6 <aside> 44
3.4.7 IE 支持 44
3.5 創建一個頁面 45
3.5.1 結構性元素 45
3.5.2 加入內容 46
3.5.3 無樣式頁面 47
3.6 清晰和語義化的HTML 48
3.6.1 分離內容與表現 48
3.6.2 注釋 49
3.7 總結 50
第4章 回響式網站之CSS 51
4.1 CSS 的工作方式 52
4.2 CSS 版本 53
4.3 置CSS 於何處 57
4.3.1 嵌入式樣式 57
4.3.2 樣式表 58
4.3.3 內聯樣式 59
4.4 層疊 59
4.4.1 層疊的作用方式 59
4.4.2 重要的規則 60
4.4.3 內聯樣式 60
4.4.4 ID 選擇器 60
4.4.5 類、屬性和偽類選擇器 61
4.4.6 元素與偽元素選擇器 61
4.4.7 繼承規則 61
4.4.8 默認值 62
4.4.9 發生衝突怎么辦 62
4.5 使用層疊 62
4.5.1 默認值和重置 63
4.5.2 繼承規則 64
4.5.3 元素規則 64
4.5.4 其他規則 65
4.5.5 保持簡單 65
4.6 注釋 66
4.7 組織你的樣式表 66
4.8 盒模型 67
4.8.1 度量單位 68
4.8.2 em 68
4.8.3 高度與寬度 69
4.8.4 外邊距與內邊距 70
4.8.5 框線 71
4.8.6 盒子大小 72
4.9 顯示 74
4.10 定位 75
4.10.1 靜態定位 75
4.10.2 相對定位 75
4.10.3 絕對定位 76
4.10.4 固定定位 77
4.10.5 定位元素的度量單位 78
4.11 浮動和清除 79
4.12 基本樣式 81
4.13 總結 83
第5章 媒體查詢 85
5.1 何為媒體查詢 85
5.2 媒體查詢結構 87
5.3 在樣式表連結中使用媒體查詢 89
5.4 使用媒體查詢的其他方式 90
5.5 我們可以查詢什麼 91
5.5.1 視口寬度和高度 91
5.5.2 螢幕寬度與高度 92
5.5.3 方向 92
5.5.4 寬高比 92
5.5.5 解析度 93
5.5.6 其他媒體特性 93
5.6 瀏覽器支持 94
5.6.1 IE 條件注釋 94
5.6.2 測試媒體查詢結果 96
5.7 斷點 96
5.8 設計範圍 97
5.9 回響式設計 98
5.9.1 漸進增強 98
5.9.2 用格線進行設計 99
5.9.3 使用格線列 100
5.9.4 優先為小螢幕設計 101
5.10 使用媒體查詢 102
5.11 兩列布局 102
5.11.1 使用浮動 103
5.11.2 使用格線 105
5.11.3 加入媒體查詢 107
5.12 設定最大寬度 108
5.13 如何選擇斷點 109
5.14 總結 110
第6章 圖像 111
6.1 顯示圖像的方式 112
6.1.1 CSS 替代方案 112
6.1.2 內容圖像 113
6.1.3 背景圖像 113
6.1.4 圖像拼合 113
6.1.5 圖示字型 114
6.2 替代文本 115
6.3 圖像檔案格式 118
6.3.1 JPEG 119
6.3.2 GIF 119
6.3.3 PNG 120
6.3.4 SVG 120
6.4 最佳化圖像 121
6.4.1 像素與解析度 121
6.4.2 高密度螢幕 122
6.4.3 壓縮圖像 123
6.4.4 實際尺寸 124
6.5 內容圖像 126
6.5.1 <img> 元素 126
6.5.2 加入圖像 127
6.5.3 靈活的圖像尺寸 129
6.5.4 媒體查詢 130
6.5.5 最大寬度 132
6.5.6 用圖像敘事 134
6.6 背景圖像 134
6.6.1 加入背景圖像 135
6.6.2 對齊 136
6.7 回響式圖像 137
6.7.1 建議的客戶端解決方案 138
6.7.2 其他解決方案 139
6.7.3 斷點 143
6.8 總結 145
第三部分 玩轉回響式設計
第7章 回響式設計工作流程 149
7.1 策略與規劃 149
7.1.1 用戶研究 150
7.1.2 內容 150
7.2 內容先於布局 152
7.2.1 內容組件 152
7.2.2 以文本模式進行設計 153
7.2.3 線性設計 155
7.2.4 內容層次 155
7.3 考慮布局 155
7.3.1 草圖繪製 155
7.3.2 從小螢幕開始 156
7.3.3 移動優先 157
7.4 原型 158
7.4.1 線框圖與原型 158
7.4.2 線框圖 158
7.4.3 回響式原型 159
7.4.4 原型中有什麼 160
7.4.5 從基礎開始 160
7.4.6 創建頁面布局 160
7.4.7 框架 162
7.4.8 原型創建工具 163
7.5 視覺設計 164
7.5.1 樣式板 164
7.5.2 測試與調整 165
7.5.3 風格指南 166
7.6 回響式設計工具 168
7.6.1 Adobe Photoshop 168
7.6.2 Adobe InDesign 168
7.6.3 Adobe Edge Reflow 169
7.6.4 Adobe Dreamweaver 170
7.6.5 瀏覽器 171
7.7 推銷回響式設計 172
7.7.1 為什麼要用回響式設計 172
7.7.2 教育你的客戶 173
7.7.3 強調回響性 173
7.7.4 回響式設計並不總是最佳選擇 174
7.7.5 費用 174
7.8 與客戶合作 175
7.8.1 交付物 175
7.8.2 陳述報告 176
7.9 總結 177
第8章 豈止手機 178
8.1 用戶體驗 178
8.1.1 用戶至上 179
8.1.2 手機用戶的謬見 180
8.1.3 為套用環境設計 180
8.1.4 只用手機的用戶 181
8.1.5 使用多個設備 182
8.2 設備無關的設計 182
8.3 專注於移動優先 183
8.4 盡你所能 183
8.5 設備類型 186
8.5.1 手機 186
8.5.2 平板電腦 187
8.5.3 其他設備 187
8.5.4 桌上型電腦與筆記本電腦 188
8.6 觸摸 188
8.6.1 電容式觸摸 189
8.6.2 多點觸摸 189
8.6.3 手勢 189
8.6.4 JavaScript 事件 190
8.6.5 觸摸目標大小 191
8.6.6 導航位置 193
8.7 螢幕尺寸 194
8.8 可訪問性（通用化設計） 196
8.8.1 視覺 197
8.8.2 音頻 199
8.8.3 輸入方法 200
8.8.4 認知障礙 201
8.9 決定支持哪些設備 201
8.10 為何要用真實設備進行測試 202
8.10.1 設備實驗室 203
8.10.2 購買設備 203
8.11 測試 203
8.11.1 驗證器 204
8.11.2 在瀏覽器視窗調整 204
8.11.3 瀏覽器工具 204
8.11.4 瀏覽器與作業系統 205
8.11.5 仿真器與模擬器 206
8.11.6 輔助技術 207
8.12 總結 207
第四部分 設計回響式網站
第9章 文字排版 211
9.1 始於HTML 212
9.2 字型 212
9.3 使用字型 214
9.3.1 設計良好的字型 214
9.3.2 自託管字型 214
9.3.3 字型服務 215
9.3.4 連結字型檔 216
9.3.5 創建字型棧 217
9.4 調整文字大小 218
9.4.1 忘掉像素 218
9.4.2 螢幕距離 218
9.4.3 絕對與相對 219
9.4.4 設定默認字型大小 220
9.4.5 為什麼是100% 220
9.4.6 度量單位 221
9.4.7 字型大小間的關係 225
9.4.8 行高 225
9.5 行長 227
9.5.1 測試行長 228
9.5.2 調整外邊距及字型大小 229
9.5.3 斷字 231
9.5.4 溢出換行 232
9.6 留白 233
9.7 內邊距和外邊距 234
9.8 為螢幕尺寸改變字型 234
9.9 總結 235
第10章 導航及頁眉布局 237
10.1 回響式導航 237
10.1.1 從小屏開始 238
10.1.2 樣式化列表 238
10.1.3 水平導航 240
10.2 網站品牌 243
10.3 導航連結 245
10.3.1 靈活性 245
10.3.2 用戶想要做什麼 245
10.3.3 基於目標的導航 247
10.3.4 保持一致性 248
10.3.5 保持簡單 250
10.4 導航模式 250
10.4.1 頂部導航 252
10.4.2 頁腳導航 254
10.4.3 切換式推出型導航 256
10.4.4 切換式覆蓋型導航 260
10.4.5 部分優先型導航 260
10.4.6 選擇選單型導航 261
10.4.7 抽屜式導航 263
10.4.8 底部導航 264
10.4.9 跳過子導航 266
10.4.10 被拋棄的導航 267
10.4.11 用於寬螢幕的固定選單 269
10.5 頁眉 270
10.5.1 極簡頁眉 270
10.5.2 複雜頁眉 271
10.5.3 導航圖示 273
10.5.4 其他圖示 275
10.6 總結 277
第11章 性能 279
11.1 性能的重要性 280
11.2 性能作為設計元素 280
11.2.1 網路連線 281
11.2.2 平衡 281
11.2.3 臃腫的網路 281
11.3 網頁載入與渲染方式 282
11.3.1 延遲 283
11.3.2 DNS 請求 283
11.3.3 重定向 284
11.3.4 HTTP 請求 284
11.3.5 傳送HTML 檔案 284
11.3.6 解壓 285
11.3.7 DOM 285
11.3.8 渲染<head> 元素 286
11.3.9 渲染<body> 元素 287
11.3.10 onload 事件 287
11.4 性能測量 287
11.5 清理代碼 289
11.5.1 使用簡單直接的代碼 289
11.5.2 縮小 290
11.6 將HTTP 請求減至最少 291
11.6.1 串聯 291
11.6.2 第三方代碼 292
11.6.3 圖像拼合 293
11.7 伺服器設定 293
11.7.1 避免重定向 293
11.7.2 檔案壓縮 294
11.7.3 瀏覽器快取 295
11.8 JavaScript 296
11.8.1 JavaScript 做什麼 296
11.8.2 JavaScript 的工作方式 296
11.8.3 阻塞式JavaScript 297
11.8.4 JavaScript 庫 300
11.9 CSS 301
11.10 託管 302
11.10.1 內容分發網路 302
11.10.2 內容管理系統 303
11.11 有條件地載入內容 303
11.12 重繪與回流 305
11.13 RESS 305
11.14 總結 307
