你真的懂 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!

for screen size

for device

one page any screen

example

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/