"Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

29
Designing for the Responsive Web

description

"Designing for the Responsive Web," by Sam Otis for AIGA South Dakota's Open Mouse Night in Sioux Falls, SD - December 6, 2012.

Transcript of "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

Page 1: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

Designing for the Responsive Web

Page 2: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

RESPONSIVE DESIGN:

“A design that adapts to the size and capability of the device your content is being view on.”

Page 3: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 4: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 5: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 6: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 7: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

1. Simplify

Page 8: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 9: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 10: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

Progressive enhancement

Page 11: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 12: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

1. Simplify2. Create live wireframes

Page 13: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 14: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 15: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 16: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

DESIGN PATTERNS:

mobile-patterns.comui-patterns.com

Page 17: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

3. Design a visual language

Page 18: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 19: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 20: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 21: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 22: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

4. Sweat the details

Page 23: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 24: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 25: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 26: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

Device Testing

Page 27: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

Success!

Page 28: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 29: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

Thank You!Sam Otis | @sam_otis | [email protected]