響應式設計改造與優化 响应式设计、改造与优化

菲爾·達特森 (Phil Dutson)

下單後立即進貨 (約4週~6週)

買這商品的人也買了...

商品描述

 

<內容簡介>

目  錄
第 1部分 創建響應式部局
第 1章 內容事項. .................................. 2

構成內容的要素. ......................................3

信息採集.........................................3
信息確認.........................................5

選擇合適的內容. ......................................7

內容性能.........................................7
搜索引擎優化考量..........................10
用戶期望.......................................11

討論內容滑塊. .......................................12
小結. .......14

第 2章 為什麽移動優先....................... 15

瀏覽 Web. ............................................16
從小尺寸開始時的註意事項. ....................19

網站主題.......................................20
網站導航.......................................22
營銷圖像.......................................24
網站搜索.......................................25

小結. .......27

第 3章 使用柵格................................ 28

選擇柵格.29

Pure.Grids...................................30
Bootstrap.....................................30
Foundation..................................31
Gridpak........................................31
Golden.Grid.System.....................32
Skeleton......................................32

使用響應式柵格. ....................................32
使用自適應柵格. ....................................36
兩全其美.38
小結. .......38

第 4章 顯示表格數據.......................... 40

定義表格數據. .......................................41

聯系地址列表. ................................41
發票和收據....................................41
表單41
配方和卡片....................................42
電子郵件站點和應用.......................42

使用表格數據. .......................................42

顯示表單.......................................43
使用表格.......................................47
使用 CSS改變外觀. .......................47
創建多個表格. ................................50
使用下載鏈接. ................................53

小結. .......56

第 5章 使用測量單位.......................... 57

使用像素.58
使用百分比...........................................60
使用 em和 rem單位.............................63
viewport測量. ......................................65
小結. .......69

第 6章 使用媒體查詢.......................... 70

viewport.meta標簽..............................71
實現突變點...........................................73

使用媒體查詢. ................................74
IE6-8瀏覽器支持. .........................80

設備專屬的媒體查詢..............................80

iPad80
iPhone.4S以下. ............................81
iPhone.5和 5S.............................82
Nexus.7(第二代).......................82
Galaxy.S4....................................83

小結. .......83

第 7章 排版設計................................ 84

Web字體. ............................................85

字體格式.......................................85
TTF86
EOT86
WOFF..........................................86
SVG............................................87

瀏覽器和設備支持.................................87

設備差異.......................................87
瀏覽器行為....................................89
提供 Web字體..............................91

使用字體服務. .......................................93

Google字體.................................93
Adobe.Typekit..............................94
Fonts.com...................................94
Font.Squirrel................................95

icon字體95
小結. .......96

第 8章 改造現有網站.......................... 97

選擇一個合適的移動佈局. .......................98

塊級佈局.......................................98
響應式佈局..................................100
自適應佈局..................................102

利用組件開展工作...............................103

導航...........................................103
搜索...........................................105
內容區域.....................................105
滑塊...........................................106
鏈接...........................................107

移動化的註意事項...............................108

不要濫用懸停. ..............................108
點擊呼叫.....................................109
模態窗口.....................................109
輸入框........................................111

小結. .....112

第 2部分 使用響應式媒體
第 9章 響應式圖片............................114

圖片應該是響應式的............................115

圖片分發.....................................115

使用 JavaScript的解決方案. ................125

Picturefill組件.. ...........................126
Pixity組件..................................127

小結. .....129

第 10章 響應式視頻. ......................... 130

使用視頻............................................131
分發系統............................................131

Limelight.網絡.............................132
Akamai......................................133
Brightcove.................................133
Vimeo........................................134
YouTube....................................135

製作適配移動設備的視頻. .....................136

使用固定比例. ..............................137
使用本地播放器...........................140
使用插件.....................................141

小結. .....142

第 11章 圖像壓縮............................. 143

圖片類型............................................144

JPEG/JPG.................................144
GIF............................................146

PNG..........................................147
WebP........................................148

壓縮工具............................................150

JPEGmini...................................150
PNGGauntlet.............................151
圖像優化工具 Radical..................151
ImageAlpha...............................151
ImageOptim...............................153
TinyPNG....................................153

壓縮結果............................................154
小結. .....155

第 3部分 性能優化
第 12章 條件.JavaScript. ................ 158

為什麽使用條件 JavaScript. .................159

滑塊...........................................160
圖片庫........................................160

使用條件 JavaScript...........................162

JavaScript媒體查詢....................163

使用 JavaScript插件..........................168

jRespond...................................168
mediaCheck...............................169
ConditionerJS............................169

小結. .....170

第 13章 Web組件............................ 171

使用 Web組件...................................172
Web組件示例....................................172

音頻元素.....................................172
視頻元素.....................................174
日期輸入.....................................175

使用 DOM處理.. .................................176

Shadow.DOM............................177
使用模板.....................................178
編輯內容.....................................179

Web組件 Polyfill................................180

Polymer.....................................181
Polymer元素..............................181
X-Tag.......................................182
使用 Brick...................................183

小結. .....183

第 14章 設備檢測與服務器請求. .......... 185

設備檢測............................................186

使用腳本檢測. ..............................186
讀取 user-agent字符串. ..............188
實現設備數據庫...........................190

HTTP頭部. ........................................191
使用客戶端提示. ..................................194
小結. .....196

第 15章 服務器優化. ..........................197

服務器配置.........................................198
Web.服務器.......................................198

Apache......................................198
Nginx.........................................199
IIS.199

Tomcat......................................200
NodeJS.....................................200

服務器插件.........................................201

SPDY........................................201
Cache........................................205
PageSpeed................................207

小結. .....210

第 16章 高性能與開發工具. ................. 211

開發工具............................................212
瀏覽器開發者工具...............................212

Chrome.開發者工具.. ...................212
Firefox.......................................218
Internet.Explorer........................223

構建工具............................................226

Grunt.........................................226
Gulp...........................................228

小結. .....229

 

<作者介紹>

作者:Phil Dutson(菲爾 達特森) 譯者:趙榮嬌
譯者從事相關工作多年,具有豐富的理論知識和實踐經驗,一直工作在技術最前沿,對相關知