公司內部分享 Responsive Web Design 的相關資訊，圖片若有侵權，麻煩請告知，會立即刪除。

1. Something about
Responsive Web Design
aco

2. about
RWD

3. RWD 3 Key Point
● Flexible Layout
● Flexible Media
● Media Queries

4. Flexible Layout

5. Flexible Media

6. Media Queries

7. https://www.pinterest.com/pin/574490496187451796/

8. about
Planning

9. Think about RWD or not
http://photopin.com/free-photos/bubbles

10. RWD Workflow
https://www.pinterest.com/mbellcre8/web-process/

11. Responsbility
● UR：Mobile 使用者研究與易用性評估
● PM：與相關人士溝通網站(RWD)的需求
● Planner, ID：整理網站(RWD)的內容，規劃資訊架構、UI Flow
● F2E：執行網站(RWD)的 HTML/CSS/JS 撰寫
● VD：進行網站(RWD)的視覺設計

12. http://smartview.dk/produkter/trafiktaelling-af-kunder-besogende/

13. Focus Content
Content is King, Navigation is Queen
• Who is the intended audience?
• What content is already available?
• How can existing content be simplified and condensed?
• What is the key message?
• Is there any content that does not support the key message?
• What is the hierarchy of the content?

14. Content Audit
• Page ID
• Page Name
• Link
• Document type
• Topics, keywords
• Owner/Maintainer
• ROT
• Notes

15. Page Table

16. Core and Path

17. Content First
http://justamemo.com/2013/03/11/responsive-web-design-process/

18. about
Design

19. Cross-device Experience

20. Choose Breakpoints
https://www.flickr.com/people/triller/

21. Optimize for Reading

22. Touch Friendly
44px

23. Display Video?

24. about
Implement

25. Flexible Layout

26. Flexible Media

27. Set the Viewport
<meta name="viewport" content="width=device-width, initial-
scale=1.0, user-scalable=yes">

28. Media Queries (Ems)

29. Think about Escalator
http://elevator.sellfile.ir/

30. Take Away
● 最好的瀏覽器就是使用者手上那個
● 內容是首要將使用者帶到我們網站的東西
● 先決定內容的結構，不要急於在一開始就涉及介面設計
● 在跨瀏覽器中完美的實現設計的想法其實是一個謬論
● 找出團隊中最佳的設計和開發步驟，關注的是整個網站

31. Reference
Google Web Fundamentals
The New Multi-Screen World Study
Learn to Code Advanced HTML & CSS
響應式網頁設計超強來襲

32. Content First, User First, Mobile First
Thank you