RWD (Responsive Web Design) 響應式設計
意指
網站根據不同的裝置(載具)、螢幕大小解析度、瀏覽器支援度等，提供不同的畫面設計給使用者，相較於傳統的桌上型電腦或筆記型電腦，可針對手持式裝置更適切地提供易於閱讀與瀏覽的人機界面
詳細定義可見 Wikipedia : Responsive web design
在閱讀 「好感度 No.1 的網頁設計: RWD 不出槌法則，網站在任何裝置都完美呈現」 後，簡單記錄一下當中提到的工具與內容
尺寸對應工具
- YUI CSS Fonts: pixel 與 percent 對應表
http://yuilibrary.com/yui/docs/cssfonts/
- pxtoem: pixel, em, percent, point 尺寸對應表
http://pxtoem.com/
註: 1em = 16px
檢測優化工具
- Google PageSpeed Insights: 網站評測可優化項目
https://developers.google.com/speed/pagespeed/insights/
支援工具
- html5shim: 補足對 HTML5 標籤支援不足
https://code.google.com/p/html5shim/
- IE7.js: 補跑對 IE6、7、8 相容性問題, PNG 透明圖片問題http://code.google.com/p/ie7-js/
- Respond.js: 補足不支援 Media queries 的瀏覽器或平台
https://github.com/scottjehl/Respond
圖檔壓縮
- jpg 壓縮
http://www.jpegmini.com/
- png 壓縮
http://tinypng.org/
Web Fonts-網路字型資源
- https://www.google.com/fonts
- https://edgewebfonts.adobe.com/
- http://www.fonts.com/
- https://webfont.arphic.com/
- http://www.justfont.com/
RWD Framework
- Bootstrap
- http://getbootstrap.com/
- 由 Twitter 打造，靈活度高，含 Javascript、CSS、font 等相關檔案，內建 多個 icon 採用的 icon font 形式
- Foundation
- http://foundation.zurb.com/
- 由 ZURB 打造，採用 mobile first 概念，適合製作於以 mobile 為先的網站，但檔案較大，本身沒有 icon 設計
- Pure
- http://purecss.io/
- 由 Yahoo 打造，單純支援 CSS 的 RWD Framework，輕量，檔案小，適用大量客制化的網站，若需 Javascript Framework 需自行額外載入 ，本身沒有 icon 設計
- SUSY
- 使用 Compass 為基底，需有 Ruby 與 SASS 環境
RWD 線上平台檢測
- Responsinator
http://www.responsinator.com/
- Screenfly
http://quirktools.com/screenfly/
RWD 檢測重點
- CSS float 排版區塊
- Media queries, ex: 可能出現橫軸區城
- 內文排版, ex: 文字排版、斷句、舒適度
- 多媒體測試, ex: 圖片、影片、音樂
- 表單輸入與按鈕測試
- 網站選單點擊、連結、按鈕測試
- 第三方服務 (ex: 所見即所得編輯單、Facebook like、google plus / adsense)與廣告版位 等外掛測試