RWD： 開發與維護成本 不需下載APP就能使用 可同時適用不同裝置

1. RWD 響應式網頁
彭其捷
http://about.me/divaka

2. RWD 優點
2
優點
開發與維
護成本
不需下載
APP就能
使用
可同時適
用不同裝
置
開發 RWD 網頁
大概 1day ~ 1個月
開發專屬 APP
大概 N 個月

3. RWD 限制
3
 萬惡的 IE
 IE9+ 以上才完整支援
 效能問題
 網站內容載入量一般比 APP 多
 體驗問題

4. 4
http://alistapart.com/d/responsive-web-
design/ex/ex-site-FINAL.html
RWD 經典案例

5. 大螢幕框架
5

6. 中型與小型螢幕的網站內容框架
6

7. 同場加映：教育百科
7
http://pedia.cloud.edu.tw/

8. RWD 原則
8
 按鈕要好點選（減少文字超連結），避免 hover
 多使用滿版的排版，但定義出內容寬度
 手機版的設計不一定要多華麗（清楚比較重要）
 大版面的圖片/影片比較清楚
 盡量保有相對應的資訊架構
 PC/Mobile 內容不一定要完全相同
 前後頁階層需定義清楚

9. 按鈕要給他大一點
9
 避免純文字型的按鈕

10. 設計限制：需減少 Hover 的行為
10
 行動裝置上面，沒有 hover 的事件
 需直接顯示文字

11. 多使用滿版的排版，但定義出內容寬度
11
 定義出中間的區塊，才好進行縮放
 簡單的作法：寬度一般訂在 1024px（或是 800px）

12. 手機版的設計不一定要多華麗
12
 RWD 內頁的設計有時不用想太
多
 清楚比較重要
 導航 + 下拉式選單的設計
 簡單又好用

13. 大版面的圖片/影片比較清楚
13
http://www.w3schools.com/css/css_rwd_images.asp
http://www.w3schools.com/css/css_rwd_videos.asp

14. Banner 選擇方式
14
 在大中小螢幕都能正常顯示，雖然顯示的圖片區塊不同

15. 盡量保有相對應的資訊架構
15
 教育百科：Menu RWD 設計

16. 頁籤也可以改成下拉式
16

17. PC/Mobile 內容不一定要完全相同
17
 好像有些地方不一樣
 好用的 .element{display:none}

18. RWD Concept

19. PC 排版種類：靜態排版(Static)
19

20. RWD 液體狀排版(Liquid)
20

21. RWD 設計原理
21

22. 原本側邊的元素
就讓他往下 float 吧
區塊定義需清楚
22

23. RWD Framework

24. RWD Framework（Bootstrap）
24
http://getbootstrap.com/examples/grid/

25. Bootstrap 的 RWD 設計
25
Grid Sysyem
http://www.w3schools.com/css/css_rwd_grid.asp
http://www.bootply.com/render/73778

26. Bootstrap 的 RWD 設計
26
Grid Sysyem
http://www.w3schools.com/css/css_rwd_grid.asp
瀏覽器大小改變時，也會自動縮放

27. RWD Test

28. 快速裝置測試（解析度差異）
28
 http://mattkersley.com/responsive/

29. 快速裝置測試（各種 iPhone）
29
 http://www.responsinator.com/

30. 使用外掛
30
 Window Resizer

31. 快速裝置測試
31
 還是直接拖拉瀏覽器最快

32. 瀏覽器 Debug
32
 Chrome：Chrome Develop Console
 Firefox：Firebug
 IE：按 F12 Develop tool（不能使用 console.log）

33. 語法測試方法
33
 Jsfiddle
 http://jsfiddle.net/divaka/jf6akxt6/

34. 跨瀏覽器測試：Multi –browser
Viewer
34
 可完整測試 IE 舊版
 效果遠好於 IE Tester

35. 跨 OS 測試：安裝 VM
35
 Win 使用 VM 軟體
 Mac 使用 Parallel Desktop

36. 跨裝置測試：Electric Mobile Studio
36
 最好當然是手上有機器
 可以模擬實際呈現的樣式
 網站：http://www.electricplum.com/studio.aspx

37. RWD 網站資源

38. 檢測網站速度
38
 Google 檢測網頁
 https://developers.google.com/speed/pagespeed/insights/

39. 參考閱讀
39
 http://mediaqueri.es/
專門蒐集各式各樣的 Media Queries 效果
http://responsive-jp.com/
日本的 RWD 網站

40. 替網站加入 RWD：Media Query

41. CSS Reset
41
 可統一不同瀏覽器的標準
http://www.vcarrer.com/2010/11/css-mobile-reset.html

42. CSS Media Query
42
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

43. 目前可用的幾種 media type
43

44. Media Features
44
出處

45. 設備對應 Media Query
45
http://nmsdvid.com/snippets/

46. RWD 設計原理
46

47. 偵測 Orientation
47
 http://www.w3schools.com/css/css_rwd_mediaqueries.asp

48. 加入 CSS import 的技巧
48
https://github.com/bohachu/eduPedia/blob/e3f805879502617a7412c684c
521cd650cbdba04/eduPedia/Views/Shared/_LayoutHeaderFooter.cshtml
獨立一個 CSS 定義，比較容易維護

49. 用 class 的方式套用 RWD
取代直接針對元素下 CSS
49

50. RWD 的 Viewport 設定
50

51. 不同設備顯示不同圖片
51
http://www.w3schools.com/css/css_rwd_images.asp

52. 不要想太多的 select 與 option
52
 建議直接用標準語法吧，簡單清爽無 Bug
 在各裝置上面都擁有最佳的呈現
 例如：
 HTML <select> Tag
 HTML <option> Tag
 HTML <form> Tag

53. THE END