This document discusses responsive web design (RWD). It defines RWD as maintaining one code for any size screen and being cross-platform. It recommends prototyping by focusing on content and functions first before design. Key aspects of RWD include grid systems, fluid layouts, media queries, and responsive layouts that adapt to different screen sizes and devices with one page.

1. 你真的懂 RWD 嗎?
Responsive Web Design pattern by Ted
Ted

2. Intro
‧Responsive Web Design?
‧Grid system?
‧Fluid layout
‧Media query
‧Responsive layout
‧Layout design

3. Responsive Web Design?
Responsive Web Design
響應式網頁設計

4. Good
Maintain one code
For any size screen
Cross platform

5. Bad
Performance
Browser issue

6. For Design
PC Tablet Phone

9. prototyping
prototyping
prototyping

10. Prototyping
content first
What information you want show?
What function you want?

11. Pen & Board & Stick

12. For Develop
media query?
viewport?

13. For Develop
media query?
viewport?

14. It is a design pattern!

15. for screen size
for device
one page any screen
example

16. Grid System?
960 grid system

17. Grid System?
960 grid system

18. Grid System?
1200 grid system

19. Grid System?
1200 grid system

20. Grid System?
responsive grid system!

21. for 4px base
margin & padding & border

22. Box Model
margin
border
padding
content

23. margin first
box-sizing: border-box is our friend

24. Proposal - Pure
from Yahoo
less 10KB
easy to use
for 16px base
example

25. Fluid Layout
base for responsive web design
base width for 4px or 16px
% > px
responsive for every layout design

26. Media Query
responsive web design level up!
detect any screen status
know device screen size
demo

27. Notice About Responsive Layout
color
font size
line height
margin & padding
content
image size & retina screen
white area
multi-lang

28. Layout Design
It is like container
put something element in html

29. Web Design != Graphic Design

30. Light comes from the sky(Flatty Design)
Black and white first(High Contrast)
Double your whitespace
Learn the methods of overlaying text on images
Make text pop - and un-pop
Only use good fonts
Steal like an artist

31. Refer
Responsive Web Design by Henry Lin
UX 設計師寫給 UI 新手的 7 個法則（上）
UX 設計師寫給 UI 新手的 7 個法則（下）
Media Queries for Standard Devices
设备像素比devicePixelRatio简单介绍
http://tedshd.lionfree.net/device/