The document discusses responsive web design and addresses common questions about implementing it. It explains that responsive design is important because there are many different devices and screens, and the user experience needs to be consistent across all of them for the brand to build value. It then provides tips on using viewpoints, media queries, and common sizes to make a website responsive. It also recommends tools for testing responsive designs across multiple screens and devices. Finally, it discusses challenges like large file sizes and offers solutions like using RESS and compressing images.

1. Responsive Design
Hans Shih 2014.01.23 @ GozCafe

2. 為什麼要 Responsive?

3. 因為 Devices/Screens 很多

4. 體驗必須⼀一致

5. 體驗⼀一致，品牌才能累積價值

6. Let’s Get Responsive !
and Write Some Code

7. Viewpoint, Media Queries

8. min/max, width/height

9. device-, orientation, aspect-ratio

10. Google ”css media queries common sizes iPhone 5”

11. 挑想要的 size 然後 copy/paste

12. 網站就可以 Responsive 了
ㄎㄎㄎ
尼騙⼈人

13. Let’s Get Responsive !
and Do Some Tests

14. Responsive 測試⼯工具：Screenfly
http://quirktools.com/screenfly/

15. 多屏、多設備、多解析度測試
http://www.smashingmagazine.com/
http://www.bostonglobe.com/

16. Live Demo

17. Q: 怎麼找到合適的 Size 設定？

18. ⽤用 Google 找通⽤用的設定

19. 參考 GA - 常⽤用螢幕解析度

20. 參考 GA - 常⽤用⾏行動裝置

21. Q: 怎麼找到網站的 Breakpoint？

22. 使⽤用 Responsivepx.com 拉⼀一拉
http://responsivepx.com/

23. Breakpoint 補充：!
!
Media queries give you the ability to adjust that layout
based on the capabilities of a screen. There is no
default recommended set of breakpoints. !
!
Don't use breakpoints based on popular devices. This
list is always changing and you'll paint yourself into a
corner.!
!
from : http://www.lukew.com/ff/entry.asp?1714!

24. Q: 照⽚片也要跟著 Responsive?

25. 照⽚片變得太⼩小
http://www.cxpartners.co.uk/cxblog/user-experience-problems-with-responsive-photos/

26. 最好要 Responsive
http://www.cxpartners.co.uk/cxblog/user-experience-problems-with-responsive-photos/

27. 另⼀一個例⼦子：看不清楚的歐巴⾺馬
鏡頭可以再
靠近⼀一點嗎
http://blog.cloudfour.com/a-framework-for-discussing-responsive-images-solutions/

28. Q: 導覽列也要跟著 Responsive?

29. 導覽列⼀一定要 Responsive
請點下⾯面連結參考常⾒見的 Responsive Navigation Patterns
http://bradfrostweb.com/blog/web/responsive-nav-patterns/

30. Q: 表格也要跟著 Responsive?!
Q: ⽂文字也要跟著 Responsive?!
Q: Icon也要跟著 Responsive?

31. Yes! 表格也要 Responsive
Bad
Good
http://css-tricks.com/responsive-data-tables/

32. Yes! ⽂文字也要 Responsive
http://ia.net/blog/responsive-typography-the-basics/

33. No! Icon 最好不要 Responsive
雖然底下的⽂文章認為要 Responsive，但最好不要，因為 Icon 很難辨認
http://designmodo.com/responsive-icons/

34. 有這麼多東⻄西要 Responsive!
所以最容易遇到的問題是

35. 網站檔案太⼤大
因為很多東⻄西要跟著 Responsive（尤其是圖⽚片），所以
檔案會⽐比較⼤大，網站變慢，頻寬吃得多，付錢也付得多。
!
One of the most common critiques against responsive
Web design is that it creates large (file size) Web sites,
thereby slowing Web pages down.
http://www.lukew.com/ff/entry.asp?1714

36. 解決辦法⼀一：RESS
The Server Side of Responsive Web Design
在 Server 端做完 Responsive 才傳靜態網⾴頁回 Client 端。
http://www.lukew.com/ff/entry.asp?1807
解決辦法⼆二：壓縮圖⽚片
Google has some great information on ways to optimize images.
請看下⾯面⽂文章中第七條
http://blog.cloudfour.com/8-guidelines-and-1-rule-for-responsive-images/

37. 最後為您獻上!
45 Free Responsive HTML5 Templates
http://www.instantshift.com/2013/10/14/free-responsive-html5-templates/

38. Thanks For Your Attention
Hans Shih!
Blog : www.hansshih.com!
Email : oort.shih@gmail.com