rwd design pattern
TRANSCRIPT
![Page 1: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/1.jpg)
你真的懂 RWD 嗎? Responsive Web Design pattern by Ted
Ted
![Page 2: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/2.jpg)
Intro
‧Responsive Web Design?
‧Grid system?
‧Fluid layout
‧Media query
‧Responsive layout
‧Layout design
![Page 3: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/3.jpg)
Responsive Web Design?
Responsive Web Design
響應式網頁設計
![Page 4: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/4.jpg)
Good
Maintain one code
For any size screen
Cross platform
![Page 5: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/5.jpg)
Bad
Performance
Browser issue
![Page 6: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/6.jpg)
For Design
PC Tablet Phone
![Page 7: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/7.jpg)
![Page 8: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/8.jpg)
![Page 9: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/9.jpg)
prototyping
prototyping
prototyping
![Page 10: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/10.jpg)
Prototyping
content first
What information you want show?
What function you want?
![Page 11: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/11.jpg)
Pen & Board & Stick
![Page 12: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/12.jpg)
For Develop
media query?
viewport?
![Page 13: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/13.jpg)
For Develop
media query?
viewport?
![Page 14: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/14.jpg)
It is a design pattern!
![Page 16: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/16.jpg)
Grid System?
960 grid system
![Page 17: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/17.jpg)
Grid System?
960 grid system
![Page 18: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/18.jpg)
Grid System?
1200 grid system
![Page 19: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/19.jpg)
Grid System?
1200 grid system
![Page 20: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/20.jpg)
Grid System?
responsive grid system!
![Page 21: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/21.jpg)
for 4px base
margin & padding & border
![Page 22: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/22.jpg)
Box Model
content
paddingbordermargin
![Page 23: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/23.jpg)
margin first
box-sizing: border-box is our friend
![Page 24: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/24.jpg)
Proposal - Pure
from Yahoo
less 10KB
easy to use
for 16px base example
![Page 25: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/25.jpg)
Fluid Layout
base for responsive web design
base width for 4px or 16px
% > px
responsive for every layout design
![Page 26: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/26.jpg)
Media Query
responsive web design level up!
detect any screen status
know device screen size
demo
![Page 27: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/27.jpg)
Notice About Responsive Layout
color
font size
line height
margin & padding
content
image size & retina screen
white area
multi-lang
![Page 28: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/28.jpg)
Layout Design
It is like container
put something element in html
![Page 29: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/29.jpg)
Web Design != Graphic Design
![Page 30: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/30.jpg)
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
![Page 31: Rwd design pattern](https://reader033.vdocuments.site/reader033/viewer/2022052912/55a206d31a28abc5788b4633/html5/thumbnails/31.jpg)
Refer
Responsive Web Design by Henry Lin
UX 設計師寫給 UI 新手的 7 個法則(上)
UX 設計師寫給 UI 新手的 7 個法則(下)
Media Queries for Standard Devices
设备像素比devicePixelRatio简单介绍
http://tedshd.lionfree.net/device/