1. Alan Sun
響應式網⾴頁設計
(RWD)概述
前端⼯工程師!
穎客資訊!
alan@ink.net.tw

2. 以前我們上網....
http://shapewebdesigns.com/online-computer-repairs/

3. 現在我們可以⽤用.....
http://resolutionmedia.com/us/google-estimated-cross-device-conversions-pov/

4. 甚至這些......
http://www.monkeyfishmarketing.com/news/ready-multiple-device-internet-marketing/

5. 網⾴頁如何在多個裝置上呈現

6. Responsive Web Design
響應式網⾴頁設計
响应式⽹网页设计
⾃自适应⽹网页设计
回應式網⾴頁設計

7. 易讀性 (Readability)
⾃自適應網⾴頁設計（英⽂文：Responsive web
design，通常縮寫為RWD）是⼀一種網⾴頁設計
的技術做法，該設計可使網站在多種瀏覽裝置
（從桌⾯面電腦顯⽰示器到⾏行動電話或其他⾏行動產
品裝置）上閱讀和導航，同時減少縮放、︑平移
和捲動。︒—— 摘⾃自 維基百科
http://adsense.blogspot.tw/2013/10/get-your-multi-device-strategy-off.html

8. RWD PATTERNS

9. 低解析度 —————————————————————————————> ⾼高解析度
Mostly fluid
• 主要呈現的區塊隨著螢幕⼤大
⼩小縮放!
• 次要內容以落下(dropping)
或回填(reflowing)作為分斷
點的呈現

10. http://nanoc.ws/

11. 低解析度 ————————————————————————————> ⾼高解析度
Column drop
• 多欄全幅式框架!
• ⾼高解析度 - 內容區塊並排呈現!
• 低解析度 - 內容區塊垂直堆疊!
• 內容區塊以落下(dropping) 或回
填(reflowing)作為分斷點的呈現

12. http://www.pinterest.com/

13. Layout shifter
• 主要分斷點的內容排列差異⼤大!
• 以內容區塊移動作為分斷點時
的變化!
• 維護與變更上較為不易
低解析度 ————————————————————————————> ⾼高解析度

14. http://foodsense.is/

15. Tiny tweaks
• 以簡單、︑少量的改變的佈局
⽅方式!
• 適合單⾴頁式網站(SPA)或⽂文章
類為主的網⾴頁呈現
低解析度 ————————————————————————————> ⾼高解析度

16. http://mingshan.qrweb.com.tw/

17. 解析度⾼高
Off canvas
• 使⽤用頻率少的內容隱藏/顯⽰示!
• ⾼高解析度 - 顯⽰示其內容!
• 低解析度 - 隱藏其內容!
• 以點擊選單的⽅方式將隱藏內容
(選單)喚出（類似App作法）
解析度低

18. http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/

19. RWD 起步
❖ 選擇 RWD pattern!
❖ Mobile First!
❖ 捨棄固定排版 (Fixed Layout) 改⽤用流動式排版 (Fluid
Layout)!
❖ 善⽤用百分比 (%) 與 比例 (em, rem) !
❖ 選擇RWD的分斷點 (breakpoint) 切換版⾯面!
❖ 測試...測試...測試...

20. 但是...要改的東西好多

21. 不
如
就
改
天
吧
!
（
設
計
對
⽩白
）

22. 其實你有更簡單的選擇

23. 【⼯工商服務】
❖ 簡易直覺的操作界⾯面!
❖ 提供QR Code 讓宣傳更容易!
❖ 響應式設計，⾏行動裝置輕鬆瀏覽!
❖ 嵌入Google Analytics 隨時掌握網站動態
⽇日租⾏行動網
http://www.qrweb.com.tw

24. Q & A