Upload
ted-shiu
View
1.822
Download
2
Embed Size (px)
Citation preview
你真的懂 RWD 嗎? Responsive Web Design pattern by Ted
Ted
Intro
‧Responsive Web Design?
‧Grid system?
‧Fluid layout
‧Media query
‧Responsive layout
‧Layout design
Responsive Web Design?
Responsive Web Design
響應式網頁設計
Good
Maintain one code
For any size screen
Cross platform
Bad
Performance
Browser issue
For Design
PC Tablet Phone
prototyping
prototyping
prototyping
Prototyping
content first
What information you want show?
What function you want?
Pen & Board & Stick
For Develop
media query?
viewport?
For Develop
media query?
viewport?
It is a design pattern!
Grid System?
960 grid system
Grid System?
960 grid system
Grid System?
1200 grid system
Grid System?
1200 grid system
Grid System?
responsive grid system!
for 4px base
margin & padding & border
Box Model
content
paddingbordermargin
margin first
box-sizing: border-box is our friend
Proposal - Pure
from Yahoo
less 10KB
easy to use
for 16px base example
Fluid Layout
base for responsive web design
base width for 4px or 16px
% > px
responsive for every layout design
Media Query
responsive web design level up!
detect any screen status
know device screen size
demo
Notice About Responsive Layout
color
font size
line height
margin & padding
content
image size & retina screen
white area
multi-lang
Layout Design
It is like container
put something element in html
Web Design != Graphic Design
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
Refer
Responsive Web Design by Henry Lin
UX 設計師寫給 UI 新手的 7 個法則(上)
UX 設計師寫給 UI 新手的 7 個法則(下)
Media Queries for Standard Devices
设备像素比devicePixelRatio简单介绍
http://tedshd.lionfree.net/device/