Responsive (Mobile) Design

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

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 of Responsive (Mobile) Design

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