前言 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
· · · · · · (
收起)
