響應式設計改造與優化 pdf epub mobi txt 電子書下載 2025

簡體網頁||繁體網頁

☆☆☆☆☆

[美] Phil Dutson（菲爾·達特森）著，趙榮嬌，馬立銘譯

下載連結在頁面底部

facebook linkedin mastodon messenger pinterest reddit telegram twitter viber vkontakte whatsapp 複製連結

想要找書就要到新城書站

book.cndgn.com

立刻按 ctrl+D收藏本頁

你會得到大驚喜!!

齣版社：電子工業齣版社

ISBN：9787121265129

版次：1

商品編碼：11744050

包裝：平裝

開本：16開

齣版時間：2015-09-01

用紙：膠版紙

頁數：256

正文語種：中文

具體描述

編輯推薦

適讀人群：論你是開發人員、設計師還是産品經理，本書都將教你為所有人的所有設備成功呈現信息的原則、技術和最佳實踐。
不論你是正在積纍還是精簡你的技能集，《響應式設計、改造與優化》都是現代Web 實踐的指南精粹。Phil 獨一的技術背景和實戰經驗賦予瞭他對於底層核心程序以及像素級完美設計的敏銳洞察力。
— Web/UI 設計師Jacob R. Stuart

如今，Web 開發是不可能不考慮各種屏幕尺寸和比例因素的，因為你永遠不會知道你的用戶使用的是手機、平闆電腦還是颱式機。本書有助於構建響應式網頁設計，是一本必讀之書。
—9magnets LLC 聯閤創始人 Cameron Banga

任何一位尋找響應式設計綜閤性策略的讀者不妨讀一讀本書。Phil 在這本實踐指南中，揭開瞭為什麼和怎樣對眾多的屏幕尺寸和設備進行響應式設計的麵紗。
— WSOL 設計總監 Dennis Kardys

響應式設計的三要素（流動的網格、靈活的圖像和媒體查詢）仍然非常重要，今天創建一個網站比過去需要更多的思想和技術。本書將帶你從基礎開始，逐步瞭解現代Web 開發的來龍去脈。
— 聖母大學網絡通信係主任 Erik Runyon

Phil Dutson 提齣的移動設計的設計建議、資源和實例，有助於將設計師和開發者們聯係在一起。本書是任何一位Web 設計師的書架上都值得擁有並需反復閱讀的全麵指南。
—SEO.com 網頁設計師 Kaylee White

內容簡介

由於移動設備的大量使用，各種屏幕尺寸、各種操作係統、各種訪問設備及各種需求均對用戶體驗提齣瞭新的挑戰。為瞭讓我們的網站在各個終端上的用戶體驗都盡可能接近完美，我們需要采用響應式移動設計。本書重點介紹瞭Phil Dutson的開發經驗，主要是關於移動設備及其設計，甚至一點點代碼就可以幫助你以好的方式為數百萬手機用戶提供內容；同時，順便簡單地介紹瞭一些主題，以解決常見的響應式移動設計中可能會遇到的問題。

第 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
PureGrids30
Bootstrap30
Foundation31
Gridpak31
GoldenGridSystem32
Skeleton32
使用響應式柵格 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
viewportmeta標簽71
實現突變點73
使用媒體查詢 74
IE6-8瀏覽器支持 80
設備專屬的媒體查詢80
iPad80
iPhone4S以下 81
iPhone5和 5S82
Nexus7（第二代）82
GalaxyS483
小結 83
第 7章　排版設計 84
Web字體 85
字體格式85
TTF86
EOT86
WOFF86
SVG87
瀏覽器和設備支持87
設備差異87
瀏覽器行為89
提供 Web字體91
使用字體服務 93
Google字體93
AdobeTypekit94
Fontscom94
FontSquirrel95
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
Akamai133
Brightcove133
Vimeo134
YouTube135
製作適配移動設備的視頻 136
使用固定比例 137
使用本地播放器140
使用插件141
小結 142
第 11章　圖像壓縮 143
圖片類型144
JPEG/JPG144
GIF146
PNG147
WebP148
壓縮工具150
JPEGmini150
PNGGauntlet151
圖像優化工具 Radical151
ImageAlpha151
ImageOptim153
TinyPNG153
壓縮結果154
小結 155
第 3部分　性能優化
第 12章　條件JavaScript 158
為什麼使用條件 JavaScript 159
滑塊160
圖片庫160
使用條件 JavaScript162
JavaScript媒體查詢163
使用 JavaScript插件168
jRespond168
mediaCheck169
ConditionerJS169
小結 170
第 13章　Web組件 171
使用 Web組件172
Web組件示例172
音頻元素172
視頻元素174
日期輸入175
使用 DOM處理 176
ShadowDOM177
使用模闆178
編輯內容179
Web組件 Polyfill180
Polymer181
Polymer元素181
X-Tag182
使用 Brick183
小結 183
第 14章　設備檢測與服務器請求 185
設備檢測186
使用腳本檢測 186
讀取 user-agent字符串 188
實現設備數據庫190
HTTP頭部 191
使用客戶端提示 194
小結 196
第 15章　服務器優化 197
服務器配置198
Web服務器198
Apache198
Nginx199
IIS199
Tomcat200
NodeJS200
服務器插件201
SPDY201
Cache205
PageSpeed207
小結 210
第 16章　高性能與開發工具 211
開發工具212
瀏覽器開發者工具212
Chrome開發者工具 212
Firefox218
InternetExplorer223
構建工具226
Grunt226
Gulp228
小結 229

精彩書摘

響應式設計的概念來源於2010 年5 月Ethan Marcotte 發錶的一篇名為“Responsive Web Design”的文章1，其闡述瞭如何利用流式布局、媒體查詢和彈性圖片三種公知技術創建一個能夠適配不同分辨率屏幕的網站。Ethan Marcotte 認為應當利用Web 的特性來設計與開發網站：“我們可以將不同聯網設備上眾多的體驗，當作同一網站體驗的不同側麵來對待，而不要為每種設備進行單獨剪裁使得設計彼此斷開，這纔是我們前進的方嚮。雖然我們已經能夠設計齣最佳的視覺體驗，但還要把基於標準的技術也嵌入到我們的設計中去，這樣纔能使得我們的設計不僅靈活，而且能適應渲染它們的各種媒介。”響應式設計能夠麵嚮不同設備收攏並提供卓越的用戶體驗，並且這一方法不會忽視設備間的差異性，也不會強調設計師的控製權，而是選擇瞭順其自然並擁抱Web 的靈活性。
在移動互聯的浪潮下，Luke Wroblewski 最早提齣瞭移動優先的設計理念2，而響應式設計之所以叫響應式“設計”而不叫響應式“技術”，就是因為它是一項設計先行的工作。麵對移動互聯網的蓬勃發展和用戶習慣的悄然改變，從移動端開始進行響應式設計對習慣瞭PC 環境的設計師來說可能是一種挑戰，需要從思考方式和工作習慣上做齣改變。本書前半部分介紹瞭響應式移動設計的各個要素，並以實例分析如何對現有站點進行響應式移動設計的改造。
性能是響應式設計繞不開的一個話題，對於移動端來說尤為重要。按條件加載、隱藏或顯示什麼內容，都會比單一條件判斷的代碼結構煩瑣，並影響用戶體驗及維護。尤其是在移動性能上，多樣的設備具有復雜的使用環境，如何識彆設備，並讓用戶在不同設備環境下均能得到良好體驗，也是一根硬骨頭。本書的後半部分重點對於上述問題進行瞭分析，希望對於讀者的開發實踐有所幫助。
最後，希望能有更多的人在移動端實踐響應式設計，實踐齣真知，更加閤理、優雅的設計可能就齣自你的手中。