Part1 RWD你必須知道的事
隨處可在的網站
RWD的誕生與使命
桌上型電腦與筆記型電腦的螢幕限制大解放
網路速度的變化
標準與瀏覽器地支援度
表單樣式
桌上型電腦與筆記型電腦與移動裝置的操作差異
Media Queries的運用
Meta viewport、Media queries結構規則
實際演練Meta viewport 與Media queries
排版上的選擇
排版這件事
固定寬度排版
流動佈局排版
彈性格式排版
混合模式排版
實際演練固定寬度排版
實際演練流動佈局排版
字體的二三事
Web fonts的使用
Web fonts的字體資源與使用方式
在RWD設計下使用Web fonts
Part2 RWD的設計與開發
什麼樣的網站適合RWD
該從哪些因素評估起?
專案經費估算
網站架構大小
網站資料量多寡
圖片、音樂等數為媒材過多
無法支援RWD的套件或元素
一般網頁設計流程與RWD設計流程差異
一般網站專案設計流程
RWD網站設計流程
一定會遇到的圖片問題
到底圖片會有哪些問題
讓圖片可以支援RWD的方法
RESS (Responsive Design + Server Side Components)
到底RESS是什麼東西?
User agent的取得方式
Modernizr-server
目前常見的RWD Framework介紹
使用RWD Framework的優缺點
有Twitter支持的Bootstrap
號稱最先進的Foundation
由Yahoo打造的Pure
使用Compass為基底的SUSY
Part3 RWD的使用者經驗與檢測
以使用者為中心的RWD
桌機、平板與手機使用環境上的差異
使用者經驗測試流程
Persona建模的重要性
實際的網站使用者經驗測試
最容易出問題的按鈕與連結
RWD的檢測方式
使用者的操作模式有哪些?
手動縮放瀏覽器大小
線上檢測平台
RWF測試重點