Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive design

2,538 views

Published on

Published in: Design, Technology

Responsive design

  1. 1. Responsive Design Hans Shih 2014.01.23 @ GozCafe
  2. 2. 為什麼要 Responsive?
  3. 3. 因為 Devices/Screens 很多
  4. 4. 體驗必須⼀一致
  5. 5. 體驗⼀一致,品牌才能累積價值
  6. 6. Let’s Get Responsive ! and Write Some Code
  7. 7. Viewpoint, Media Queries
  8. 8. min/max, width/height
  9. 9. device-, orientation, aspect-ratio
  10. 10. Google ”css media queries common sizes iPhone 5”
  11. 11. 挑想要的 size 然後 copy/paste
  12. 12. 網站就可以 Responsive 了 ㄎㄎㄎ 尼騙⼈人
  13. 13. Let’s Get Responsive ! and Do Some Tests
  14. 14. Responsive 測試⼯工具:Screenfly http://quirktools.com/screenfly/
  15. 15. 多屏、多設備、多解析度測試 http://www.smashingmagazine.com/ http://www.bostonglobe.com/
  16. 16. Live Demo
  17. 17. Q: 怎麼找到合適的 Size 設定?
  18. 18. ⽤用 Google 找通⽤用的設定
  19. 19. 參考 GA - 常⽤用螢幕解析度
  20. 20. 參考 GA - 常⽤用⾏行動裝置
  21. 21. Q: 怎麼找到網站的 Breakpoint?
  22. 22. 使⽤用 Responsivepx.com 拉⼀一拉 http://responsivepx.com/
  23. 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. 24. Q: 照⽚片也要跟著 Responsive?
  25. 25. 照⽚片變得太⼩小 http://www.cxpartners.co.uk/cxblog/user-experience-problems-with-responsive-photos/
  26. 26. 最好要 Responsive http://www.cxpartners.co.uk/cxblog/user-experience-problems-with-responsive-photos/
  27. 27. 另⼀一個例⼦子:看不清楚的歐巴⾺馬 鏡頭可以再 靠近⼀一點嗎 http://blog.cloudfour.com/a-framework-for-discussing-responsive-images-solutions/
  28. 28. Q: 導覽列也要跟著 Responsive?
  29. 29. 導覽列⼀一定要 Responsive 請點下⾯面連結參考常⾒見的 Responsive Navigation Patterns http://bradfrostweb.com/blog/web/responsive-nav-patterns/
  30. 30. Q: 表格也要跟著 Responsive?! Q: ⽂文字也要跟著 Responsive?! Q: Icon也要跟著 Responsive?
  31. 31. Yes! 表格也要 Responsive Bad Good http://css-tricks.com/responsive-data-tables/
  32. 32. Yes! ⽂文字也要 Responsive http://ia.net/blog/responsive-typography-the-basics/
  33. 33. No! Icon 最好不要 Responsive 雖然底下的⽂文章認為要 Responsive,但最好不要,因為 Icon 很難辨認 http://designmodo.com/responsive-icons/
  34. 34. 有這麼多東⻄西要 Responsive! 所以最容易遇到的問題是
  35. 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. 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. 37. 最後為您獻上! 45 Free Responsive HTML5 Templates http://www.instantshift.com/2013/10/14/free-responsive-html5-templates/
  38. 38. Thanks For Your Attention Hans Shih! Blog : www.hansshih.com! Email : oort.shih@gmail.com

×