設計師都該懂的UI/UX設計實務：超圖解跨裝置網頁設計實戰講座
這本書除了列舉跨裝置優化的方法外，也提供數個相關工具及相關的程式語法設定。
如果沒有相關基礎的話讀起來會很痛苦。適合有一定實作經驗的人讀。
若感興趣的人也可參考下列內容，再考慮要不要買進當工具書。
CH01.支援跨裝置瀏覽的必要設定
檢測指標：PageSpeed Insights、行動裝置相容性測試
相容性類
- 設定Viewport
- 避免內容寬度超出螢幕寬：獨立網址、動態服務、響應式設計
- 避免文字過小
- 超連結之間保留間距
- 不使用不相容的外掛
速度類
- 縮小HTML、CSS、JavaScript
- 壓縮HTTP
- 最佳化圖片：減少資料量、響應式圖片、向量圖片、減少載入改內嵌或延遲或CSS
- 利用瀏覽器快取
- 決定顯示順序
- 清除轉譯的Java、CSS
- 不使用重新導向
- 縮短伺服器回應時間
CH02.設定Viewport
在<head></head>之間加入<meta name="viewport" content="width=device-width">(Android)也可以在width裡輸入一個值不用加單位
<meta name="viewport" content="width=device-width,initial-scale=1.0">(IOS)
CH03.避免內容寬度超出螢幕寬的方法
避免內容寬度超出螢幕寬：獨立網址
為不同的裝置提供不同的網頁，偵測使用者的裝置後重新導向到適合瀏覽的網頁。
例如分作電腦版（平板歸電腦版）及行動版，且須定義兩版之間的關係以免搜尋引擎認為是「重複的內容」。
<link rel="alternate" media="only screen and (max-width:599px)" href="行動版網址">
<link rel="canonical" href="電腦版網址">
重新導向建議使用「302」
缺點：多個網頁會有管理繁瑣問題／重新導向會使網頁顯示速度變慢／須使用使用者代理程式識別裝置
避免內容寬度超出螢幕寬：動態服務
同個網頁下依照裝置輸出不同的原始碼。
使用Wordpress時可使用外掛（例如：Multi Device Switcher 可識別裝置，此外掛提供切換兩版的按鈕）讓不同版本使用不同佈景主題。
也可使用Wordpress內建的wp_is_mobile（手機及平板）函數在佈景主題不變的前提下利用PHP的條件式設定。
缺點：多個原始碼管理問題／須使用使用者代理程式識別裝置
避免內容寬度超出螢幕寬：響應式設計
SEO最好
同網頁同原始碼下依照裝置的螢幕寬，透過CSS調整網頁。
行動版及電腦版共用的CSS設定
@media (max-width:767px){
在共用的設定下加入、覆寫的行動版CSS設定
}
@media (min-width:768px){
在共用的設定下加入、覆寫的電腦版CSS設定
}
加入中繼檢視點（優化中間過渡的介面）
@media (min-width:500px) and (max-width:767px){
在共用的設定下加入、覆寫的CSS設定
}
裝置為橫向時套用的CSS設定
@media (orientation:landscape) and (max-width:767px){
在共用的設定下加入、覆寫的CSS設定
}
現有的響應式CSS框架：Bootstrap、Foundation（使用了也可視需求增加中繼檢視點）
缺點：會傳送多餘資料
CH04.識別裝置的方法
本書第四章介紹CSS、HTML、JavaScript、PHP、Modernizr識別裝置寬度或其他特性的語法、方法
CH05.響應式設定
利用響應式網頁設計在三個版面之中切換
以多個欄位組合成網頁
文字
隨裝置大小改變字體大小及行高
若希望在任何裝置瀏覽時都能顯示相同字型，可採用網路字型。
響應式圖片/文字
影片
IE8不支援<video>
<video>可設定多種格式的影片，利用<source>來設定，瀏覽器會依照支援的格式選擇，若都支援則播放最先撰寫的影片格式。
單純用iframe嵌入Youtube影片無法調整高度，須用div將之包在內進行進一步設定以固定長寬比。
在HTML設定背景圖片/影片
點擊目標
IOS建議44x44像素；Android則建議48x48像素。
雖然使用者介面指南建議大於48像素，但只要周圍保留足夠的的留白，不會點擊錯誤到其他點擊目標的話，就不會提出修正要求。
使用下拉式選單
CH06.最佳化圖片
最佳化圖片&再壓縮
選擇適當的圖檔格是：一般而言照片素材會選擇JPG格是，線條圖或插圖類會使用PNG格式。
| 最佳化圖片工具 | 支援格式 | URL | 支援系統 |
| jpegtran | JPEG | http://jpegclub.org/ | Windows |
| jpegoptim | JPEG | http://freecode.com/projects/jpegoptim/ | Mac |
| OptiPNG | PNG | http://optipng.sourceforge.net/ | Windows |
| PNGOUT | PNG | http://www.advsys.net/ken/util/pngout.htm | Mac |
jpegtran的Windows版本為Jpegcrop這套軟體，將偏好裡的「Entropy Coding Method」設定為「Huffman Optimized」、「Marker Copy Option」設定為「None」，如此一來只要載入JPEG並另存就能完成最佳化處理。
OptiPNG的Windows版本只要將PNG圖檔拖到optipng.exe就能最佳化，原檔會被覆寫。
ImageOptim在OS X環境下可使用，啟動後將JPEG或PNG圖檔拖至視窗就能最佳化處理，原檔會被覆寫。
Wordpress可使用外掛「EWWW Image Optimizer」；或者從「Media>Bulk Optimize］點選Optimize Media Library的「Start optimizing」壓縮上傳的圖片；此外點選Optimize Everything Else的「Scan and optimize」就能最佳化佈景主題資料夾裡的圖片。
Wordpress可使用外掛「RICG Responsive Images」將文章中插入的圖片做成使用<img>的srcset屬性的響應式圖片。
利用PS CC產生響應式圖片
先設定偏好：編輯>偏好設定>增效模組，確認「啟動產生器」已勾選；
將要自動產生圖片的圖層名稱命名為圖檔的名稱，例如：img.jpg（預設是100%尺寸、90%畫質的圖檔）；
可進一步在圖層名稱設定尺寸、畫質，例如：50% img.jpg100%（50%尺寸、100%畫質的圖檔）；
可進一步在圖層名稱設定輸出多版本的圖檔，例如：img.jpg100%,50% img.jpg100%,25% img.jpg100%（會輸出三張尺寸不同、畫質相同的圖檔）；
輸出：檔案>產生>影像資產，會自動產生資料夾收入該檔輸出的圖檔。
PageSpeed Insights的圖片尺寸判定
會以螢幕寬度為320像素、裝置像素比（density）為2的裝置作為測試基準。或圖檔大小大於320px的兩倍，會提出修正要求；
以background-image嵌入的背景圖片則目前還無法檢測。
使用SVG
可使用SVGOMG這套線上工具進行最佳化
使用Google Fonts
在Google Fonts選擇要使用的字型，再追加預設的CSS設定就能使用。
使用Font Awesome
Font Awesome是一套收錄多種圖示的圖示字型，載入它的CSS設定就能設定類別名稱，顯示對應圖示。
以上不管是哪一種與單一圖檔相比，檔案都會比較大，但在網頁內使用的部分越多，以上兩種效率就越高。
字型圖示有不同的檔案格式，瀏覽器支援的格式也不同，因此可設定多種候選從檔案小的開始：Woff2>eot(IE8)>Woff>TTF>SVG Font
使用CSS建立的元件
CSS建立的元件與向量格式的檔案一樣，不管放大或是在高解析度的裝置顯示，都能清晰顯示。
使用CSS的圖示集
ICONO有大量已CSS製作的圖示，載入它的CSS設定就能設定類別名稱，顯示對應圖示。
CH07.網頁加速
可以google開發人員工具裡的「Network」檢視；時間條的顏色各代表著不同項目的處理↓
深綠色：DNS Lookup→將網域名稱轉換為IP位址的處理
橘色：Initial Connection→與伺服器建立連線的處理
綠色：Waiting（TTFB：Time to First Byte）→從HTTP請求傳送給伺服器到收到第一個回應之前的處理
藍色：Content Download→下載資源的處理
基本上DNS Lookup與Initial Connection的處理只要是同一個網域就不會重複執行，最耗費時間的是Waiting的時間，要縮短Waiting就必須讓伺服器加速，但這不太實際，因此可試著使用瀏覽器快取或合併資源以減少HTTP的請求次數。
要縮短Content Download的時間可使用精簡處理與HTTP壓縮，Content Download會因為連線種類而產生大幅變化。
瀏覽器要顯示網頁前必須建構DOM（Document Object Model）與CSSOM（CSS Object Model）。因此會載入所有的HTML、CSS、Javascript才進行解析，等到建構完成後才顯示網頁。
可由Google開發人員工具裡的Network設定Setting，勾選Color-code resource types，用顏色區分資源種類。（綠色：CSS／橘色：Java／紅色：font／紫色：image）
可將CSS與Java內嵌，或是採取非同步載路的方式；減少FirstView的資料量，並且替各項資源設定載入優先順序。
精簡處理
透過刪除多餘的空白、換行與註解來刪減資料量。
可使用線上工具Online JavaScript/CSS/HTML Compressor，可同時使用「UglifyJS 2」、「Clean-CSS」、「HTML Minifier」三套工具，這些工具除了可刪除多餘空白，還能做到依照選項的設定刪除無法執行的程式碼等最佳化處理。
啟用HTTP壓縮
啟用HTTP壓縮的伺服器會自動將資源壓縮成gzip格式，減少資料量後再傳給瀏覽器，瀏覽器下載壓縮過的資源後會先解壓縮再使用。
可透過Google開發人員工具裡的Network，點選資源名稱即可在右側的Headers裡查看「Content-Encoding:gzip」
使用瀏覽器快取
大部分的瀏覽器都會把曾經載入的資源儲存在快取裡，等到下次瀏覽時就從快取載入資源，以節省HTTP請求與資料下載的時間。標準的快取只是暫存資料，伺服器端會設定資源的有效期限。
可透過Google開發人員工具裡的Network的Size查看（會顯示灰字From cache），點選資源名稱即可在右側的Header裡查看「Cache-Control」、「Expires」等有效期限的資訊。
要如何使用快取由瀏覽器決定。以Chrome為例，從書籤或連結來瀏覽網頁，資源在有效期限內的情況下就會從快取載入資源；但若是重新載入網頁的情況，則會存取伺服器確認資源是否更新，若無更新則使用快取的資源。
整合為單一檔案來減少HTTP請求次數
將圖示整合成單一圖檔。
將多張圖片合併成單一圖檔，並在需要時將圖片切出來顯示的技巧稱為「CSS Sprite」。
CSS Sprite可利用「Retina CSS Sprite Generator」輕鬆製作，甚至連同CSS的設定（它是以div為前提）
大部分的瀏覽器會將連往同一網域的伺服器同時連線數的上限設定為6上下，但也可利用CDN（內容傳遞網路）突破限制。
CDN是一種為了傳遞內容的最佳化網路系統，可依照瀏覽者的請求從最適當的伺服器傳遞資料，所以能高速而穩定地提供內容。
例如可免費使用的CloudFlare
為了減少構成網頁的檔案數量，以減少HTTP的請求次數，可將CSS、Java、圖片的資料直接編寫在HTML裡，這種方式就稱為「內嵌」。
CSS/JavaScript：可使用<style><script>將程式碼寫在HTML裡。
圖片：可利用Data URI scheme內嵌，Data URI scheme可利用<img>的src屬性，但圖檔必須是BASE64編碼的格式。而這個編碼會使圖片資料量增加，所以通常只用於小型圖片轉文字編碼使用。
可利用線上工具Duri.me來做BASE64編碼。
清除禁止轉譯
CSS跟JavaScript都會拖慢網頁顯示，通常會利用<link><script>寫在<head>裡，但google的PageSpeed Insight會將之認為是「禁止轉譯」的資源。
因此須透過設定讓JavaScript不同步載入、但讓jQuery同步載入；讓FirstView的CSS以<style>內嵌、並延遲載入其他的CSS。（詳細設定請參考書籍）
可使用jQuery的外掛Lazy Load設定讓非FirstView的圖片可捲動後載入。
調整載入的優先順序
重要的內容必須寫在HTML的開頭處。
FirstView的CSS>FirstView的內容>其他內容>小工具設定>其他CSS
覺得這本書不錯？👉🏻👉🏻👉🏻點此購買
｜版權聲明｜
為因應惡質新聞媒體隨意盜文，防不勝防，轉載請保留下段文字
本文圖／文皆瑪掐｜敏感星球創作，同步更新於Blogger平台，請認明作者瑪掐(Matcha)
若非上述平台轉載請註明來源：UIUX設計師都該懂的設計實務｜重點整理- 瑪掐Matcha, 並請保留本聲明！
留言列表
美食 (7)