響應式網頁(Responsive Web Design)介紹, Bootstrap介紹

1. 利用HTML5+CSS3打造行動裝置
友善網站-響應式網頁技術介紹
凌網科技 鄭穎駿
jiun.9023510@gmail.com

2. 大綱
行動化的趨勢
網站行動裝置友善調查
如何使網站行動裝置友善化
響應式網頁(ResponsiveWeb Design)
◦ HTML5+CSS3 ,Viewport, Media Query, Bootstrap
結語
Q&A
1

3. 課程目標
希望與課者透過此課程能
◦ 了解行動裝置的流行與多螢幕尺寸為
網站設計帶來的挑戰
◦ 了解HTML5響應式網頁(RWD)相關技
術與RWD的優缺點
◦ 實際應用相關技術於適合的專案或產品
中
2

4. 行動化的趨勢
智慧型手機,平板的普及
3
圖片來源:http://static.businessinsider.com/image/52161ea66bb3f7d61500004f/image.jpg

5. 行動化的趨勢
行動裝置帶來的便利
4
圖片來源:http://s2.gigacircle.com/media/s2_5413ab02b238b.jpg

6. 行動化的趨勢
多螢一雲
◦ 讓多種裝置都可便利存取一樣的雲端服務
5
圖片來源:http://todaymade.com/blog/wp-content/uploads/2013/07/HiRes-890x534.jpg

7. 網站行動裝置友善調查
Google Chrome裝置模擬器
6

8. 網站行動裝置友善調查
1. www.google.com.tw
PC-HTML5
7

9. 網站行動裝置友善調查
Smartphone-HTML5
8

10. 網站行動裝置友善調查
Tablet-HTML5
9

11. 網站行動裝置友善調查
2. tw.yahoo.com
PC-HTML4
10

12. 網站行動裝置友善調查
自動轉tw.mobi.yahoo.com
Smartphone-HTML5
11

13. 網站行動裝置友善調查
Tablet-HTML4
12

14. 網站行動裝置友善調查
3. www.usa.gov
PC-HTML5
13

15. 網站行動裝置友善調查
Smartphone-HTML5
14

16. 網站行動裝置友善調查
Tablet-HTML5
15

17. 網站行動裝置友善調查
4. www.gov.tw
PC-HTML4
16

18. 網站行動裝置友善調查
切換 mobile.www.gov.tw
Smartphone-HTML4
17

19. 網站行動裝置友善調查
Tablet-HTML4
18

20. 網站行動裝置友善調查
大部分電腦版網站版面在Tablet上可以正常檢
視與使用
Google等大廠與美國政府網站已開始採用
HTML5技術, 並且版面都已支援對行動裝置友
善化
國內一些大型網站也開始支援對行動裝置友
善化與使用HTML5
國內政府網站大都使用HTML4, 有行動版網頁,
但不一定會依據裝置螢幕大小或類型自動轉
址
19

21. 如何使網站行動裝置友善化
網站有既有使用HTML4設計的行動版網頁
◦ 建議透過javascript偵測連線裝置螢幕大小自動提示
轉址行動版網頁, 方便使用者在smartphone上快速
切換到行動版網頁
20

22. 如何使網站行動裝置友善化
Javascript程式碼參考
21

23. 如何使網站行動裝置友善化
新開發之網站建議可使用HTML5+CSS3
設計行動版網頁
HTML5是HTML最新的修訂版本，2014
年10月由W3C完成標準制定。目標是
取代1999年所製定的HTML 4.01和
XHTML 1.0標準
Google等大廠網站皆已採用HTML5，
HTML5為未來的趨勢
22

24. 如何使網站行動裝置友善化
行動裝置上各主要瀏覽器HTML5支援情況
23
滿分550分, 資料來源https://html5test.com/results/mobile.html

25. 如何使網站行動裝置友善化
HTML5支援響應式網頁(Responsive Web
Design)使網頁可依據裝置螢幕大小進行
呈現效果最佳化
24
圖片來源:http://www.onbile.com/info/wp-content/uploads/2013/03/responsive-web-design.jpg

26. 響應式網頁(ResponsiveWeb Design)
(What)同一個網頁在不同的解析度下，
會呈現不同的介面達到最好的顯示效果
25

27. 響應式網頁(RWD)
Ethan Marcotte 於2010年在 A List Apart
雜誌的一篇文章中發明了術語
Responsive Web Design
.net 雜誌將RWD列為 2012 年頂級網頁
設計趨勢的第二名 (漸進增強是第一名)
(Why)各種裝置螢幕大小不一，固定大
小的網頁無法在所有裝置達到最佳呈現
效果
26

28. 響應式網頁(RWD)
(How)如何以HTML5+CSS3進行RWD
1.HTMLViewport meta
◦ 使用中繼檢視區標記控制瀏覽器檢視
區寬度和縮放比例
27

29. 響應式網頁(RWD)
當網頁沒有指定檢視區時，行動瀏覽器
會以範圍介於 800 到 1024 CSS 像素來
顯示網頁
28
裝置寬度(320) 網頁寬度(955)
附註: 螢幕寬度 ≠ 裝置寬度,
以iPhone5為例,螢幕實際解析度為1136 x 640 像素

30. 響應式網頁(RWD)
指定viewport為device-width後
網頁檢視區寬度=裝置寬度
29

31. 響應式網頁(RWD)
viewport所有可設置之屬性
30
內容 描述
width [數字]或
device-width
檢視區寬度，單位為像素(px)
height [數字]或
device-height
檢視區高度，單位為像素(px)
initial-scale 介於0.0到10.0之數字 起始縮放比
maximum-scale 介於0.0到10.0之數字 操作放大上限
minimum-scale 介於0.0到10.0之數字 操作縮小下限
user-scalable 1或0(yes或no) 是否允許使用者操作縮放，
預設yes

32. 響應式網頁(RWD)
2.CSS Media Query
◦ 可套用到 CSS 樣式的簡易篩選器，透過
Media Query即可輕鬆依據顯示內容的裝置
特性變更樣式(Responsive)
寬度
高度
橫向、直向
解析度
色彩
31

33. 響應式網頁(RWD)
CSS Media Query範例
32
寬度640以下套用
寬度640以上套用
直向套用
橫向套用
寬度500~600套用

34. 響應式網頁(RWD)
CSS Media Query語法
33
屬性 結果
min-width 任何超過查詢中指定寬度的瀏覽器都會套用規則。
max-width 任何未超過查詢中指定寬度的瀏覽器都會套用規則。
min-height 任何超過查詢中指定高度的瀏覽器都會套用規則。
max-height 任何未超過查詢中指定高度的瀏覽器都會套用規則。
orientation=portrait 任何高度大於或等於寬度的瀏覽器都會套用規則。
orientation=landscape 任何寬度大於高度的瀏覽器都會套用規則。
完整屬性參考
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
media_type: | all | handheld | print | projection | screen | tv | …

35. 響應式網頁(RWD)
使用viewport與Media Query即可達到網頁內
容依裝置類型動態編排的效果
34
圖片來源:http://www.digitalfamily.com/wp/wp-content/uploads/2012/08/Responsive-Design-
boxes.jpg

36. 響應式網頁(RWD)
RWD優缺點比較
35
設計各尺寸專屬網站 設計RWD網站
開發成本 中-高 中
N份(HTML+CSS+程式) 1份(HTML+程式)+N份(CSS)
維護成本 高 中-低
各尺寸獨立修改 可統一修改
SEO 弱 強
多網址 單一網址
網站回應速度 快 慢
尺寸專屬HTML 1份HTML
適用複雜網頁 強 弱
尺寸專屬設計 Mobile First
舊瀏覽器支援 強 弱
IE8 hack,IE7以下no

37. 響應式網頁(RWD)
獨立網站 重效能、規模大
使用RWD 內容簡潔、易維護、富設計感
APP 追求更好的體驗與功能
36
行動版提供為
獨立網站 台灣Yahoo、PChome、博客來、
mobile01、Google 、amazon…等
使用RWD iThome、台灣微軟、華碩、宏碁 、
Mister Donuts、KKBOX…等
APP 台灣Yahoo新聞、中央氣象局…等

38. 響應式網頁(RWD)
Bootstrap - 支援RWD的CSS元件
◦ 讓非CSS專業的程式設計師也可快速開發RWD網
頁
◦ 視覺設計師可參考此元件的設計概念或基於此元
件設計RWD網頁
37

39. 響應式網頁(RWD)
Bootstrap
◦ (2014/6)No.1 project on GitHub with over
73,000 stars and more than 27,000 forks
◦ the most popular HTML, CSS, and JS
framework for developing responsive,
mobile first projects on the web
提供一組標準的HTML與CSS排版框架
供快速開發網頁雛型並支援RWD
38

40. 響應式網頁(RWD)
Bootstrap目標在對常見的網站元素與互
動模式提供簡單與彈性的 HTML、CSS
與 Javascript 基底，以幫助使用者提高
其生產力
39
圖片來源:http://images.payeasy.com.tw/products/6073/2486/2486675.jpg

41. 響應式網頁(RWD)
40
http://getbootstrap.com/

42. 響應式網頁(RWD)
Grid System(格狀排版系統)
Use .container for a responsive container
41

43. 響應式網頁(RWD)
基本排版範例，row與col ( col-[target device]-[col size] )
每個row的col size加總需為12，md代表中尺寸螢幕
42
row1
row2
row3
col1 col2
col2
col2 col3
col1
col1

44. 響應式網頁(RWD)
排版系統target device分四類 ( col-[target device]-[col size] )
◦ lg (大尺寸螢幕-桌面)
◦ md (中尺寸螢幕-桌面)
◦ sm (小尺寸螢幕-平板)
◦ xs (特小尺寸螢幕-手機)
43

45. 響應式網頁(RWD)
四類尺寸範圍
◦ ≧1200
◦ 1199~992
◦ 991~768
◦ ≦767
44
lg
md
sm
xs

46. 響應式網頁(RWD)
xs代表小尺寸螢幕時採用之設定，md代表中尺寸螢
幕時採用之設定
RWD範例(Desktops (≥992px) md設定生效 )
45

47. 響應式網頁(RWD)
RWD範例 (Phones (<768px) xs設定生效 )
46

48. 響應式網頁(RWD)
Offsetting columns (偏移)
47

49. 響應式網頁(RWD)
Nesting columns (巢狀)
48

50. 響應式網頁(RWD)
Responsive utilities
◦ 特定尺寸下顯示或隱藏
49
* = block,inline,inline-block

51. 響應式網頁(RWD)
Responsive utilities範例
50

52. 響應式網頁(RWD)
Bootstrap並提供常見的網站元素與互動基底
51
CSS Components JavaScript
Typography Glyphicons Transitions
Code Dropdowns Modal
Tables Button groups Dropdown
Forms Button dropdowns Scrollspy
Buttons Input groups Tab
Images Navs Tooltip
Helper classes Navbar Popover
Breadcrumbs Alert
Pagination Button
Labels Collapse
Badges Carousel
Jumbotron Affix
Page header
Thumbnails
Alerts
Progress bars
Media object
List group
Panels
Responsive embed
Wells

53. 響應式網頁(RWD)
由bootstrap網站參考各元素用法
52

54. 響應式網頁(RWD)
Bootstrap使用心得
◦ 非視覺設計人員也可用Bootstrap快速
開發出RWD網頁
◦ 只用Bootstrap CSS套版畫面偏單調，
仍需視覺設計人員美化
適合雛型開發用
53

55. 響應式網頁(RWD)
Bootstrap在RWD CSS設計方面可參考
的地方
◦ 分大、中、小、特小四個尺寸
◦ 每列12欄的排版方式
◦ 對常見網站元素提供基底樣式
54

56. 結語
行動裝置的流行與多螢幕尺寸為網站設計帶
來新的挑戰
本課程以行動裝置網站呈現之友善性為出發
點，進而介紹HTML5 RWD相關技術與RWD
技術的優缺點
使用Bootstrap可以快速導入RWD網頁技術
HTML5應為未來趨勢，希望本課程相關知識
對與課者有所助益
55

57. 結語
目前使用HTML5可能遭遇的問題
◦ 網頁無障礙標章與檢測問題
HTML5也可達到無障礙，只是目前無障礙標章
條文與檢測工具可能只適用於HTML4內容
◦ 舊版瀏覽器(IE8)相容問題
基於安全性，舊版瀏覽器應該會逐漸被淘汰
若上兩點為重點考量，則桌面版網站
仍採HTML4,於行動版網站採用HTML5
56

58. 結語
HTML5與網頁無障礙(Accessibility)技術
◦ WAI-ARIA(Accessible Rich Internet Applications)
W3C制訂之動態網站(使用ajax,javascript)可用性標準
-2104/3/20 W3C Recommendation
WAI-ARIA參考資料
◦ https://developer.mozilla.org/en-
US/docs/Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ
◦ https://blog.othree.net/log/2010/10/10/introduction-to-wai-aria-1/
WAI-ARIA檢測工具
◦ https://itaccessibility.illinois.edu/web-evaluation-tools
57

59. Q&A
58