2018.4.19更新通知：如您想獲得2018年更新版本，可付費觀看線上課程喔！ https://www.tibame.com/course/325 ------ 2014年3月到某單位分享RWD的簡報，針對他們需求做的規劃，從概念到實務寫法，從自刻到使用框架工具。本簡報適合閱讀之對象：設計師或網站企劃。

1. A Guide to
Responsive Web Design
深入淺出自適應網頁設計
主講者：Marie Chang

2. 什麼是
Responsive Web Design

3. 是因應手機上網趨勢而產生的解決方案

4. 是一種能符合各種螢幕尺寸的網站設計方法

5. 是根據裝置螢幕寬度而調用不同CSS規則

6. 我還是不懂
廢話太多
為什麼要這樣設計
這樣設計有什麼好處
以後的網站都要朝這方向設計嗎
( 這是要設計師的命嗎 )

7. RWD
Web UX
Mobile
網站 使用者經驗
手機上網
因應潮流/趨勢提供使用者更佳的瀏覽體驗

8. 縮短開發不同螢幕裝置的時程和成本
=
1 WEB=
1 WEB + 1 Native App for Mobile
( + 1 Native App for Pad )
$ 50,00,00 ↑
$ 10,00,00

9. 這樣有懂嗎？

10. 但這一帖非靈丹妙藥

11. Responsive Web Design
的缺點

12. 1) 瀏覽器兼容的問題
2) 效能問題
IE8 不支援media queries, IE6不支援max(min)-width,
這兩大項是RWD的CSS必用規則
解法：使用網路上能降級的js套件或多花心思自寫css hack
網站結構較複雜，通常有大量圖片或資源，即使符合行動裝置來流覽，
在行動頻寬下，等待下載的時間長，檔案也過大。
解法：RWD + Server Side Solution，透過伺服器端判斷裝置後調配
資源

13. 你目前網站有多少流量來自行動裝置？
你的網站是否需要自適應設計以服務行動裝置使用者？
你們是否有企劃或UX師會共同參與設計？
若追求網站效能，是否具有程式設計師協同工作？
拿起手機/平板流覽自己公司網站，你感受的使用經驗為何？
你有使用智慧型手機或平版的習慣嗎？
先提出問題，再決定是否採用RWD

14. Responsive Web Design
工作流程

15. 發現
資訊
架構
內容
整理
草稿
原型
設計
視覺
設計
測試
討論
NO
完成!
RWD完整流程

16. Responsive Web Design
規劃首則

17. Content first
Mobile first
內容優先
行動裝置優先

18. 內容規劃-網頁區塊模組化
線上demo： http://www.philiphousenyc.com/
http://mashable.com/
http://stuffandnonsense.co.uk/

19. 範例：4 col → 2 col → 1 col

20. Responsive Web Design
牛刀小試時間

21. 任務：5分鐘，畫出手機上的樣式或排序吧!
1
2
3
4
5

22. Responsive Web Design
視覺設計要點

23. 1) 一致性
2) 視覺上的反饋設計
常用對比顏色去突顯(例如選單和內文背景色對比)，全站色彩規
劃一致，標題與內文要易於辨識，因為小的行動裝置不需要太多
裝飾或花俏設計，而是以易於閱讀、易於瀏覽為優先。
若有餘力則進一步考量行動裝置與電腦的不同。
例如按鈕在行動裝置中，按下去才有效果，hover在行動裝置中
則無用。例如自動捲動的圖片，除了在電腦能點選左右鍵換圖外，
是否支援touch時左右滑動。
http://mediaqueri.es/ 有很多範例

24. Responsive Web Design
實作技術

25. Meta Tag寫法
CSS Media Queries
自適應的Grid
自適應的image
隱藏或顯示content
完成以上四點就是RWD!

26. Meta Tag: Viewport
沒設viewport 有設viewport

27. Meta Tag: Viewport
對瀏覽器說：viewport規則套用，寬度設定為device-width，且初始縮放數值為1
IE8或更舊的IE則可CDN javascript來解決：
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->

28. Media Queries
max寫法：當螢幕寬度600像素以下時，class的背景是紅色的
Min寫法：當螢幕寬度超過900像素時，
class的背景是灰色的
混合寫法：當螢幕寬度在600~900像素時，
class的背景是深灰色的

29. @media screen and (max-width: 980px) {
/* style */
}
@media screen and (max-width: 720px) {
/* style */
}
@media screen and (max-width: 480px) {
/* style */
}
Media Queries

30. Media Queries : Breakpoint
@media screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
Device寫法：當螢幕寬度超過900像素時，
class的背景是灰色的

31. 自適應的Grid，用%或em，不用px

32. 自適應的image
img { max-width: 100%; }
基於效能(選擇性載入大圖)解決方案：
使用別人撰寫好的 rwd-images.js 搭配服用
最好讓圖片都隨著外圍容器(Grid)縮放

33. 隱藏/顯示content
@media screen and (max-width: 980px) {
.col { with: 23.4%; }
}
@media screen and (max-width: 720px) {
.col { with: 23.4%; }
}
@media screen and (max-width: 480px) {
.col { display: none; }
}

34. 結論
剩下就是看你CSS怎麼刻了

35. Responsive Web Design
Framework
RWD框架快速開發技術

36. Bootstrap，mobile web 或 RWD前端框架
http://getbootstrap.com/

37. 瀏覽器的支援：不支援IE8

38. http://v3.bootcss.com/
別怕，有簡體中文版，讓我們直接看看

39. 框架必熟的撇步
1. 搞懂Grid System
2. 從套用template開始著手
3. 熟悉常用的class name
4. 熟悉顏色規則
5. 既然有vertical，一定有horizontal
6. 既然有Left就會有right, center
7. 特效請愛用jQuery 相關Plugin

40. Bootstrap插件大觀園

41. Bootstrap好用工具與資源
Bootable Template 網站範例
Boostrap Landing page 登陸頁應用
Bootstrap 3 PSD 視覺設計psd檔
Bootstrap 3 Illustrator Template視覺設計ai檔
Free theme for Boostrape 免費樣版
Bootsnipp 現成小元件套用

42. Responsive Web Design
好用輔助工具介紹

43. 原型/草圖工具
(為什麼要畫3次 Wireframe？)
Responsive Web Design Sketch Sheets
http://balsamiq.com/
https://moqups.com
格線工具
http://simplegrid.info/
http://www.columnal.com/
SUSY
企劃和格線的好用工具

44. 測試工具
http://mattkersley.com/responsive/ (線上)
http://www.responsinator.com/ (線上)
Opera Mobile Classic Emulator (安裝到電腦)
沒有太多實機能測試時的虛擬取代方案

45. 謝謝指教! 學習愉快!
THANK YOU
THANK
YOU
3Q