responsive (mobile) design

7
Responsive (Mobile) Design What is this? Why Should You Care?

Upload: qamra

Post on 09-Feb-2016

34 views

Category:

Documents


0 download

DESCRIPTION

Responsive (Mobile) Design. What is this? Why Should You Care?. How?. Optimize the Layout Adapt the content that is visible Shoot for 2-3 clicks Make your text bigger Simplify the buttons/navigation What does your user need?. How?. Geek Speak: Style sheets (CSS) Flexible Grids - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Responsive (Mobile) Design

Responsive (Mobile) DesignWhat is this? Why Should You Care?

Page 2: Responsive (Mobile) Design

How? Optimize the Layout Adapt the content that is visible

Shoot for 2-3 clicks Make your text bigger Simplify the buttons/navigation What does your user need?

Page 3: Responsive (Mobile) Design

How? Geek Speak:

Style sheets (CSS) Flexible Grids Media Queries

Page 4: Responsive (Mobile) Design

Change your thinking. Phone first, then…

Tablet Desktop

Create in chunks Think in %, not pixels Start Small

Do a Landing Page

Page 5: Responsive (Mobile) Design

Examples

Page 6: Responsive (Mobile) Design

Examples