http://nowilldesign.com/ 投影片部份圖片引用至網路

1. 設計師！你RWD了沒？
RWD到底是蝦咪
13年5月18⽇日星期六

2. 海綿時代，多吸多健康
13年5月18⽇日星期六

3. 關於我(Nowill / 德德)
有點犯規的經歷
使⽤用者研究員
網路⾏行銷企劃
網⾴頁設計師
網站專案
PHP程式設計師
社群營運專案經理
服務過的客⼾戶
電信(中華、亞太)
美妝(舒摩兒、元氣堂)
藥廠(德國拜⽿耳、天義企業)
電玩(宇峻奧汀、遊戲怪獸)
⾦金融(台灣企銀、保德信)
補教(朱宗慶、台⼤大補習班)
美⻝⾷食(爭鮮壽司、京星餐飲)
出版(城邦、⻘青⽂文出版社)
現況
SOHO (歡迎合作)
部落客
連結
nowills.blogspot.com
nowilldesign.com
13年5月18⽇日星期六

4. 先說在前頭
思考⼀一下
A BOOK APART
2011
SMASHING MAGAZINE
2012
PACKT PUBLISHING
2012
13年5月18⽇日星期六

5. ⼤大綱
快速介紹RWD
設計師該如何切⼊入RWD
以使⽤用者為中⼼心的RWD
13年5月18⽇日星期六

6. 快速介紹RWD
正題終於來了
13年5月18⽇日星期六

7. 橫越桌機、平板、⼿手機
跟⾃自由發揮⼀一樣標準的跨出界
13年5月18⽇日星期六

8. Responsive Web Design
簡稱 RWD
中⽂文翻譯：響應式網⾴頁設計、⾃自應式網⾴頁設計
維基百科有記載：響應式網⾴頁設計
“響應式網⾴頁設計（英語：Responsive web design，通
常縮寫為RWD）是⼀一種網⾴頁設計的技術做法，該設計
可使網站在多種瀏覽裝置（從桌⾯面電腦顯⽰示器到⾏行動
電話或其他⾏行動產品裝置）上閱讀和導航，同時減少
縮放、平移和捲動” - 引⽤用⾃自維基百科之響應式網⾴頁設計
13年5月18⽇日星期六

9. CSS3技術⾯面(這不是重點)
@media screen,not , and , only ＝> Media Queries
範例：@media screen and (min-width: 400px) and
(max-width: 700px)
依舊是範例：<link rel="stylesheet" media="screen and
(max-width: 600px)" href="template.css" />
⽂文件：http://www.w3.org/TR/css3-mediaqueries/
13年5月18⽇日星期六

10. 什麼？舊瀏覽器不⽀支援！
(依然不是重點)
解法不⽌止⼀一種，最常⾒見的是JS⼤大補帖！
Respond.js
A fast & lightweight polyfill for min/max-width CSS3
Media Queries (for IE 6-8, and more)
https://github.com/scottjehl/Respond
13年5月18⽇日星期六

11. 設計師該如何切⼊入RWD
你是哪種設計師？
13年5月18⽇日星期六

12. 網⾴頁設計師有哪幾種？
視覺 前端 後端
畫網站
畫界⾯面
畫平⾯面
.
.
.
喜歡CSS
愛Javascript
對UI充滿熱忱
.
.
.
PHP
.net
Ruby
.
.
.
畫⾯面跟時間有限，故以上僅供參考
13年5月18⽇日星期六

13. 什麼樣的網⾴頁設計師
會需要做到RWD
13年5月18⽇日星期六

14. 客⼾戶說之前，請先
⾃自⼰己說13年5月18⽇日星期六

15. Ｋ資料以外，也請
動⼿手做13年5月18⽇日星期六

16. 沒經驗沒關係，那就⾃自⼰己
去創造13年5月18⽇日星期六

17. 只要有⼼心
下個案⼦子就開始
所以到底要怎麼切⼊入？
13年5月18⽇日星期六

18. 以使⽤用者為中⼼心的RWD
真正的重點來了
13年5月18⽇日星期六

19. RWD五⼤大祕訣 - 掌握解析度
StatCounter 2012年4月～2013年4月於台灣的⼿手機解
析度數據，近期 720 x 1280 已經超越 320 x 480
13年5月18⽇日星期六

20. RWD五⼤大祕訣 - 流動佈局
捨棄固定寬度(fixed-width)改⽤用液態排版(Liquid Layout)
px、pt、百分⽐比、em、rem...... 哪⼀一種適合流動？
是要可以⾃自⾏行伸縮，還是固定寬⾼高流動？
Liquid Layout
13年5月18⽇日星期六

21. RWD五⼤大祕訣 - 使⽤用者經驗
調查 需求建模 研究或訪談 修正 測試
導⼊入使⽤用者經驗研究流程，未必全部，但總⽐比沒有好
建⽴立網站⼈人物誌(Persona) ，假想使⽤用者操作環境(建模)
使⽤用者會開外掛，但這不該是你假想的⼤大部份使⽤用者
累積實作經驗，與同事或同業討論，⼤大家來找碴
13年5月18⽇日星期六

22. RWD五⼤大祕訣 - 體驗操作
被忽略⼜又假裝
成鉛筆的電容筆滑⿏鼠
超有⼿手感
之你的⼿手
13年5月18⽇日星期六

23. RWD五⼤大祕訣 - 體驗操作
孤島式
機械式
鍵盤
迷你型
螢幕鍵盤
13年5月18⽇日星期六

24. RWD五⼤大祕訣 - 體驗操作
幾個咩？ 幾個G？
13年5月18⽇日星期六

25. RWD五⼤大祕訣 - 推敲思考
找⼀一個RWD網站，開始思考為什麼這個設計師要如此
設計？有什麼缺點？有什麼優點？
去哪裡找RWD網站？ http://mediaqueri.es/
不知道如何思考起？
1.列出桌機、⼿手機、平板等規格的差異
2.實際使⽤用測試，不要放過任何可以點擊的地⽅方
3.列出你有覺得好設計與不好設計之處
4.開始思考各平台差異與優缺點為何要如此設計！
13年5月18⽇日星期六

26. 說在後頭
不是每個網站都適合做RWD，所以制作前請先評估
RWD三⼤大關鍵：Media Queries、流動佈局、資訊流(圖
⽚片、檔案⼤大⼩小等)
RWD並⾮非為全新的設計網⾴頁設計技術，只是⼀一種全新
的設計模式與概念，之前所累積的網⾴頁制作經驗不但
可以延續，更可以做更多的延伸
專案經驗：對客⼾戶來說，RWD的制作成本相較其他⽅方
式來說，是⽐比較低的
13年5月18⽇日星期六

27. 最後，我想尋找築夢的伙伴
Nowill Design : nowilldesign.com
草監網路： nowills.blogspot.com
草監網路粉絲團：www.facebook.com/nowilldesign
Plurk：www.plurk.com/nowills
13年5月18⽇日星期六